目录
项目背景
北京品友互动信息技术有限公司(简称品友互动),创立于2008年,是中国领先的基于大数据技术的人工智能平台,是最早将程序化购买引入中国的企业之一。
pyff-vue的设计初衷是品友互动给大家提供一个更方便的vue前端框架。
本项目在Element UI基础上构建,在路由、自动化、缓存组件上有了很大的突破。另外我们的组件文档给前端爱好者提供了更丰富更实用的功能。
浏览器支持
Modern browsers and IE 10+。
项目的基础结构
- build - webpack config files
- config - webpack config files
- dist - build
- document - 组件文档
- src -your app
- api
- assets
- common
- components - your vue components
- mock
- styles
- views - your pages
- vuex
- App.vue
- main.js - main file
- routes.js
- static - static assets
项目的特色应用
1. 简洁轻量pyff-vue核心部分仅几兆,目录结构一目了然2. 构建快速构建项目简单迅速,新手简单易学,上手快3. 数据驱动驱动应用的数据源,以声明方式将数据源映射到视图4. 模块友好模块清晰,分工明确,低耦合,高内聚5. 组件化组件化明确,完全有能力驱动采用单文件组件来开发的更为复杂的单页应用
项目的部署运行
获取代码
-
clone或手动下载:http://gitlab.ipinyou.com/js/pyff-vue
本地配置
# install dependenciesnpm run init# serve with hot reload at localhost:3000npm run dev# build for production with hot reload at localhost:8080npm run start# build for production with minificationnpm run build
使用Api接口
接口介绍
在src/api/api.js中定义接口pyff-vue项目以品友互动后台为接口, 以ampBase为别名连接http://amptest.ipinyou.com/api
使用样例
export const login = params => amp.post(`${ampBase}/login`, params);export const logout = params => amp.get(`${ampBase}/logout`, { params });
路由配置
在src/routes-temple.js中定义路由,项目会自动在routes.js中配置好相关路径信息path: '/report',component: Home,name: 'reportCenter',menuName: '报表中心',iconCls: 'fa fa-book fa-fw', // 图标样式classchildren: [{ path: '/report', component: ReportReport, name: 'report', menuName: '报表中心' },]
项目的发展方向
-
demo展示时,提供在线运行,使用Jsfiddle
-
demo展示时,完善安装过程,hello world等
-
项目在构建的时候,能展示进度
-
highlight.js中的样式引用不到的问题
-
vue文件引用css源代码不能按postcss的解析,考虑配置问题
-
eslint配置
相关文档链接
有问题反馈
在使用中有任何问题,欢迎反馈给我,可以用以下联系方式跟我交流
- 邮件(weiqiang.han@ipinyou.com)
- 微信号: wxid_ej04ts6pl0ka22