vue开发基于 vue 和 vue-cli 搭建的整套开发底层,敏捷开发

# vue-base 基于 webpack + vue-cli + iview + Vue 构建的一套 Vue 的 单页面应用（SPA）开发方案。 当然你也可以把 iview 切换成各个你想要的 mobile 或 PC 组件库（mobile 需要自行配置下移动端 html 的 meta 头），来进行敏捷开发。 此项目无任何页面搭建，业务层要按需拓展。 ## 功能说明 * 只需熟悉写法，便可敏捷开发 * 测试接口和 mock 接口，一键切换 * 文件层级划分，尽可能减少开发提交碰撞 * Service 配置生成 ORM，有命名空间，在业务中快速调用 * Vuex 可以拆分至不同业务模块中，业务可自行选择是否使用 Vuex 来渐进增强开发 * 支持打包分析 npm run analyz * 支持异步组件加载 * 支持缓存层分离 * webpack 图片处理等等 ## 开始使用 ``` git clone https://github.com/PerseveranceZ/vue-base.git cd vue-base npm install npm run dev ``` ### 脚手架指令 * `npm run dev/start` 开发模式 * `npm run build` 线上打包 * `npm run analyz` 包分析( `webpack-bundle-analyzer` ) ### 目录结构 · |-- build （打包配置相关，无必要请勿动） |-- conifg （打包配置相关，无必要请勿动） |-- dist （发布） |-- mock （mock接口相关） |-- node_modules （node 依赖） |-- static （静态资源文件，图片，css，不走编译） |-- src （工程目录） |-- assets （动态资源文件，图片，css，每次都会走编译） |-- common （业务组件） |-- components （全局公用组件） |-- config （项目请求配置） |-- directives （指令） |-- pages （页面逻辑） |-- router （路由配置） |-- service （服务层） |-- store （全局的 store 如登录信息） |-- utils （工具层） |-- app.vue （根vue节点） |-- main.js （业务的根节点 js） ### 逻辑修改 修改文件目录中的```src\js\config\index.js``` ``` javascript // 接口拦截到需要跳转登录页面的 code 根据业务自行修改 export const LOGIN_CODE = 1000 // 请求 abort 超时时间 export const AJAXTIMEOUT = 20000 // 请求是否会发送本地的请求 // true Service 中的请求会请求 localPath ，也就是 mock 路径，mock 统一发送 get 请求，底层已经帮转好 不用关心， 该配 post 就配置 post // false 会走配置的 path 路径，一般就是测试接口和线上接口 export const LOCAL_AJAX = false export const DEBUG = { // 请求详情打印 req: false, // 响应详情打印 res: false, // 开启vue debug v_debug: true, // 开启vue devtools v_devtools: true } ``` 修改接口拦截器逻辑```src\js\config\ajax.js``` ``` javascript /** * 文档地址https://github.com/mzabriskie/axios * ajax为axios的实例 */ import axios from 'axios' import { TESTPATH, ABORT_TIME, DEBUG } from 'Config/index'; let _ajaxInstance = {} _ajaxInstance = axios.create({ timeout: ABORT_TIME*1000 //超时时间 nms后自动abort }) // request 拦截器 _ajaxInstance.interceptors.request.use(function(config) { DEBUG.req && console.info(config.url, ' request:', config) // 请求带上时间 // 请求拦截器 这里请自行根据业务做相应改动 if(config.params)config.params.v = +new Date() return config; }, function(error) { DEBUG.req && console.error('request', JSON.stringify(error)) GLOBAL.vbus.$emit('request_error', error) return Promise.reject(error); }); // response 拦截器 _ajaxInstance.interceptors.response.use(function(response) { DEBUG.res && console.info(response.config.url, ' response:', response) // resCode全局处理 这里请自行根据业务做相应改动 if (response.data.resCode === 0) return response.data.data; !!response.config.noShowDefaultError || GLOBAL.vbus.$emit('ajax_handle_error', response) return Promise.reject(response) }, function(error) { DEBUG.res && console.error('response', JSON.stringify(error)) GLOBAL.vbus.$emit('response_error', error) return Promise.reject(error); }); export default _ajaxInstance ``` 然后来到 App.vue 中做自己统一处理的页面逻辑。 ```javascript ... GLOBAL.vbus.$on('ajax_handle_error', (resData) => { if(!!resData.config.noShowDefaultError) return // 这里通过 config/index.js 配置的 LOGIN_CODE 来做登录逻辑 if (resData.data.resCode === LOGIN_CODE) { // 我们建议登录页面做成一个组件的形式 在全局 Store 中来控制他 this.$store.commit('SET_TO_LOGIN_PATH', this.$route.path) this.$store.commit('SET_TO_LOGIN', true) return } // 其他 code 不等于 0 的情况 this.$Notice.warning({ title: '操作失败', desc: resData.data.msg, onClose() { } }); }) GLOBAL.vbus.$on('request_error', (resData) => { // 网络请求错误，断网之类 this.$Notice.error({ title: '请求服务器失败', desc: '请检查您的网络连接情况', onClose() { //放入接口错误处理 } }); }) GLOBAL.vbus.$on('response_error', (resData) => { // 这里基本上就是网络接受错误，一般是服务器错误，可以根据不同的 code 码在做逻辑 this.$Notice.error({ title: '服务器在开小差', desc: '请稍后重试', onClose() { //放入接口错误处理 } }); }) ... ``` ### `ajax 和 常量使用规范 ( Service 层)` 底层使用`axios`，需要了解`API`自行了解`axios`库，需要在`service`中配置好自己的请求发送参数如 ``` javascript // order.js { // 接口名称，调用时会用到，注意重复 name: 'detail', // 发送请求类型 method: 'GET', // 接口描述 desc: '医生个人信息接口', // 本地地址 localPath: '/test/sectionDoctor/detail', // 线上地址 path: '/mobile/wx/individualDoc/queryById', // 发送出去的参数，自动会截取相应的参数，即使你传了很多用不到的参数也没关系。 // 如果不传定义好的参数，则会把下面的默认值带上发出去 params: { key: value } } ``` `Service` 层大概结构如下： ``` |-service （服务层） |-apis （请求集合） |-index.js （主页配置） |-order.js （订单模块） |-consts （常量集合） |-index.js （主页配置） |-order.js （订单模块） ``` `Service` 层文件命名尽量保持对应，抽象我们的业务，这样我们可以减少很多变量和请求方法的冗余代码，order 模块在 index 中进行配置如下： ```javascript import { Apior } from 'Utils/apior' // 报告查询 import order from './order' export default new Apior({ order })['API'] ``` 这样 Apior 会自动用 order 来作为前缀，做一层命名空间，放到$service中。 业务中调用方式 ``` javascript this.$apis['order/detail']({ key: value }, { // 额外的参数 如：header noShowDefaultError: true // 不弹出默认的报错提示 }).then((data) => { // 已经过滤了 resData.data，可直接使用，无需判断 // 具体的过滤器在 config/ajax 中 }, () => { // 失败的回调，错误已经自动报了，一般无需关心 }); ``` 如果你想单独发请求也没关系 ``` javascript //this.$ajax 替换为 GLOBAL.ajax 也行 this.$ajax.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // Optionally the