北京品友互动信息技术有限公司(简称品友互动),创立于2008年,是**领先的基于大数据技术的人工智能平台,是最早将程序化购买引入**的企业之一。
Pyff-vue-sample是我们自定义的一套前端项目模板,满足前端项目可能需要的各种条件,Webpack,Babel,ESLint,Webpack--loaders,Vue-router,Vuex等都已经在模板中配置。
Modern browsers and IE 10+。
- build - webpack config files
- config - webpack config files
- src -your app
- api
- assets
- mock
- store
- views - your pages
- App.vue
- main.js - main file
- routes.js
- routes-temple.js
1. 简洁轻量
pyff-vue-sample核心部分仅几兆,目录结构一目了然
2. 构建快速
构建项目简单迅速,新手简单易学,上手快
3. 数据驱动
驱动应用的数据源,以声明方式将数据源映射到视图
4. 模块友好
模块清晰,分工明确,低耦合,高内聚
5. 组件化
组件化明确,完全有能力驱动采用单文件组件来开发的更为复杂的单页应用
# global installation of vue-cli tools
# requirement:node > 6.x npm > 3.x git
$ npm install -g vue-cli
# download the project template and name it
$ vue init iPinYou/pyff-vue-sample my-project
# enter the project
$ cd my-project
# install dependencies
$ npm install
# serve with hot reload at localhost:3000
$ npm run dev
以登录接口为例。在src/api/api.js中定义接口
const base = '';
export const requestLogin = params => axios.post(`${base}/login`, params);
通过axios向api接口发送get或者post请求。
在src/views/Login.vue中引入api.js抛出的方法并使用
import { requestLogin } from 'api';
在src/routes-temple.js中定义路由,项目会自动在routes.js中配置好相关路径信息
{
path: '/',
component: Helloworld,
name: 'hello',
iconCls: 'py-icon-message', // 图标样式class
children: []
}
-
项目在构建的时候,能展示进度
-
vue文件引用css源代码不能按postcss的解析,考虑配置问题
-
进一步简化安装程序
-
根据业务场景继续封装组件,提升开发速度