mahua

目录

项目背景

北京品友互动信息技术有限公司(简称品友互动),创立于2008年,是**领先的基于大数据技术的人工智能平台,是最早将程序化购买引入**的企业之一。

Pyff-vue-sample是我们自定义的一套前端项目模板,满足前端项目可能需要的各种条件,Webpack,Babel,ESLint,Webpack--loaders,Vue-router,Vuex等都已经在模板中配置。

浏览器支持

Modern browsers and IE 10+。

testling badge

项目的基础结构

  • 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

使用Api接口

以登录接口为例。在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的解析,考虑配置问题

  • 进一步简化安装程序

  • 根据业务场景继续封装组件,提升开发速度

相关文档链接

主要维护者

版权许可证

WTFPL& MIT