1.vue-cli搭建基本架构

使用命令 vue create 文件名创建项目
image.png

2.分环境打包

3.css文件分组

assets/css/base.less

  1. @import url('./base-flex.less');

assets/css/base-flex.less

  1. .df {
  2.   display: flex;
  3. }
  5. .aic {
  6.   align-items: center;
  7. }
  9. .jcb {
  10.   justify-content: space-between;
  11. }

4.引入SVG的使用

svg icon引入

  • 下载图标，存入src/icons/svg中

  • 安装依赖：svg-sprite-loader

    1. npm i svg-sprite-loader -D

  • 修改规则和新增规则，vue.config.js ```javascript // resolve定义一个绝对路径获取函数 const path = require(‘path’)

function resolve (dir) { return path.join(__dirname, dir) } //… chainWebpack(config) { // 配置svg规则排除icons目录中svg文件处理 // 目标给svg规则增加一个排除选项exclude:[‘path/to/icon’] config.module.rule(“svg”) .exclude.add(resolve(“src/icons”))

// 新增icons规则，设置svg-sprite-loader处理icons目录中的svg config.module.rule(‘icons’) .test(/.svg$/) .include.add(resolve(‘./src/icons’)).end() .use(‘svg-sprite-loader’) .loader(‘svg-sprite-loader’) .options({ symbolId: ‘icon-[name]’ }) }

  2. > 使用图标，App.vue --- 没有封装情况下的引用
  4. ```javascript
  5. <template>
  6.   <svg>
  7.       <use xlink:href="#icon-wx" />
  8.   </svg>
  9. </template>
  11. <script>
  12.   import '@/icons/svg/wx.svg'
  13. </script>
  • 自动导入 — 封装

创建icons/index.js

  1. const req = require.context('./svg', false, /\.svg$/)
  2. req.keys().map(req);

创建SvgIcon组件，components/SvgIcon/index.vue

  1. <template>
  2.   <svg :class="svgClass" v-on="$listeners">
  3.       <use :xlink:href="iconName" />
  4.   </svg>
  5. </template>
  8. <script>
  9. export default {
  10.   name: 'SvgIcon',
  11.   props: {
  12.     iconClass: {
  13.       type: String,
  14.       required: true
  15.     },
  16.     className: {
  17.       type: String,
  18.       default: ''
  19.     }
  20.   },
  21.   computed: {
  22.     iconName () {
  23.       return `#icon-${this.iconClass}`
  24.     },
  25.     svgClass () {
  26.       if (this.className) {
  27.         return 'svg-icon ' + this.className
  28.       } else {
  29.         return 'svg-icon'
  30.       }
  31.     }
  32.   }
  33. }
  34. </script>
  36. <style scoped>
  37. .svg-icon {
  38.   width: 1em;
  39.   height: 1em;
  40.   vertical-align: -0.15em;
  41.   fill: currentColor;
  42.   overflow: hidden;
  43. }
  44. </style>

注册全局组件
src/plugin/componentGlobal.js

  2. import SvgIcon from '@/components/SvgIcon'; // svg组件
  4. export default {
  5.   install (Vue) {
  6.     // register globally 注册到全局
  7.     Vue.component('svg-icon', SvgIcon);
  8.   }
  9. };

main.js全局引入

  1. import componentGlobal from '@/plugin/componentGlobal.js';
  3. Vue.use(componentGlobal);

5.引入loading

src\components\base\BaseLoading.vue

  1. <template>
  2.   <div class="fixedDiv loading">
  3.     <svg-icon icon-class="loading" class="loadingIcon"></svg-icon>
  4.   </div>
  5. </template>
  7. <script>
  8. export default {
  10. };
  11. </script>
  13. <style lang="less" scoped>
  14. .loading {
  15.   display: flex;
  16.   align-items: center;
  17.   justify-content: center;
  18.   .loadingIcon {
  19.     font-size: 50px;
  20.     color: #0067c5;
  21.     animation: loading 1s infinite linear;
  22.   }
  23. }
  24. @keyframes loading {
  25.   to {
  26.     transform: rotate(360deg);
  27.   }
  28. }
  29. </style>

src\App.vue

  1. <base-loading v-show="$store.state.loadingCount"></base-loading>

src\store\index.js

  1. import loading from '@/store/loading';
  3. modules: {
  4.   loading
  5. }

src\store\loading.js

  1. export default {
  2.   namespaced: true,
  3.   state: () => {
  4.     return {
  5.       loadingCount: 0
  6.     };
  7.   },
  8.   mutations: {
  9.     addLoadingCount (state) {
  10.       state.loadingCount++;
  11.     },
  12.     removeLoadingCount (state) {
  13.       state.loadingCount--;
  14.     }
  15.   }
  16. };

3.引入axios

axios官方文档
axios参考文档

utils/http.js （返回的是axios的对象，直接引入这个axios对象使用即可）

  1. import axios from 'axios'
  2. import router from '@/router'
  3. import store from '@/store/index' // 获取token
  4. import { Message } from 'view-design'
  5. const qs = require('qs');
  7. // ! 创建axios实例
  8. // ! axios 设置请求超时
  9. // 设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等
  10. var instance = axios.create({ timeout: 1000 * 20 })
  12. // ! post 请求头的设置
  13. // post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置
  14. instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'
  16. // ! 请求拦截
  17. // 在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？
  18. // 比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。
  19. // 这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊！
  20. instance.interceptors.request.use(
  21.   config => {
  22.     // todo 解决get请求传递数组参数出现 [ ] 解决方法
  23.     if (config.method === 'get') {
  24.       config.paramsSerializer = function (params) {
  25.         // qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) // 'a[0]=b&a[1]=c'
  26.         // qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) // 'a[]=b&a[]=c'
  27.         // qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) // 'a=b&a=c'
  29.         return qs.stringify(params, { arrayFormat: 'repeat' })
  30.       }
  31.     }
  33.     // 登录流程控制中，根据本地是否存在token判断用户的登录情况
  34.     // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token
  35.     // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码
  36.     // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。
  37.     const token = store.state.token
  38.     token && (config.headers.Authorization = token)
  39.     return config
  40.   },
  41.   error => {
  42.     return Promise.error(error)
  43.   }
  44. )
  46. // ! 响应的拦截
  47. /**
  48.  * todo 提示函数
  49.  * 禁止点击蒙层、显示一秒后关闭
  50.  */
  51. const tip = msg => {
  52.   Message.error({
  53.     background: true,
  54.     content: msg,
  55.     duration: 10
  56.   })
  57. }
  59. /**
  60. * todo 跳转登录页
  61. * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
  62. */
  63. const toLogin = () => {
  64.   router.replace({
  65.     path: '/login',
  66.     query: {
  67.       redirect: router.currentRoute.fullPath
  68.     }
  69.   })
  70. }
  72. /**
  73.  * todo 请求失败后的错误统一处理
  74.  * @param {Number} status 请求失败的状态码
  75.  */
  76. const errorHandle = (status, msg, response) => {
  77.   switch (status) {
  78.     case 400:
  79.       console.log(response, 'response ===');
  80.       tip('参数错误')
  81.       break
  82.     // 401: 未登录
  83.     // 1. 跳转登录页面，并携带当前页面的路径
  84.     // 2. 在登录成功后返回当前页面，这一步需要在登录页操作。
  85.     case 401:
  86.       toLogin()
  87.       break
  89.     // 403 token过期
  90.     // 登录过期对用户进行提示
  91.     // 清除本地token和清空vuex中token对象
  92.     // 跳转登录页面
  93.     case 403:
  94.       tip('登录过期，请重新登录')
  96.       // 清除token
  97.       localStorage.removeItem('token')
  98.       store.commit('loginSuccess', null)
  100.       // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
  101.       setTimeout(() => {
  102.         toLogin()
  103.       }, 1000)
  104.       break
  106.     // 404请求不存在
  107.     case 404:
  108.       tip('网络请求不存在')
  109.       break
  111.     case 500:
  112.       tip('服务器宕机')
  113.       break
  115.     // 其他错误，直接抛出错误提示
  116.     default:
  117.       tip(msg)
  118.       break
  119.   }
  120. }
  122. // todo 响应拦截器
  123. // 响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。
  124. // 例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。
  125. instance.interceptors.response.use(
  126.   // todo 请求成功
  127.   // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
  128.   // 否则的话抛出错误
  129.   res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),
  131.   // todo 请求失败
  132.   // 这里可以跟你们的后台开发人员协商好统一的错误状态码
  133.   // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
  134.   // 下面列举几个常见的操作，其他需求可自行扩展
  135.   error => {
  136.     // console.log(error, '======')
  137.     const { response } = error
  138.     console.log(response)
  140.     if (response) {
  141.       // 请求已发出，但是不在2xx的范围
  142.       errorHandle(response.status, response.data.message, response)
  143.       return Promise.reject(response)
  144.     } else {
  145.       // 处理断网的情况
  146.       // eg:请求超时或断网时，更新state的network状态
  147.       // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
  148.       // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
  149.       store.commit('changeNetwork', false)
  150.     }
  151.   }
  152. )
  154. export default instance

api/axios.js （封装的get和post请求）

  1. import { baseUrl } from './base' // 导入接口域名列表
  2. import axios from '@/utils/http' // 导入http中创建的axios实例
  3. import store from '@/store'
  4. /**
  5.  * ! get方法，对应get请求
  6.  * @param {String} url [请求的url地址]
  7.  * @param {Object} params [请求时携带的参数]
  8.  */
  9. export function get (url, params) {
  10.   store.commit('loading/addLoadingCount');
  11.   return new Promise((resolve, reject) => {
  12.     axios.get(baseUrl + url, { params }).then(res => {
  13.       if (res && res.data && res.data.code === 'ACK') {
  14.         resolve(res.data)
  15.       } else {
  16.         console.log('res ===', res)
  17.         reject(res)
  18.       }
  19.     }).then(() => {
  20.       store.commit('loading/removeLoadingCount');
  21.     })
  22.   })
  23. }
  25. /**
  26.  * ! post方法，对应post请求
  27.  * @param {String} url [请求的url地址]
  28.  * @param {Object} params [请求时携带的参数]
  29.  */
  30. export function post (url, params) {
  31.   return new Promise((resolve, reject) => {
  32.     axios.post(baseUrl + url, params).then(res => {
  33.       if (res && res.data && res.data.code === 'ACK') {
  34.         resolve(res.data)
  35.       } else {
  36.         console.log('res ===', res)
  37.         reject(res)
  38.       }
  39.     }, err => {
  40.       console.log(err)
  41.     }).then(() => {
  42.       store.commit('loading/removeLoadingCount');
  43.     })
  44.   })
  45. }

4.添加api的统一管理

api/index.js （合并所有的api）

  1. // ! api的出口文件
  2. import common from '@/api/common'
  3. export default {
  4.   // 公共的请求
  5.   common
  6. }

api/common.js

  1. import { get } from './axios' // 导入封装的请求方法
  2. // 项目列表
  3. const projectList = params => get('/project/list', params)
  5. export default {
  6.   projectList
  7. }

main.js

  1. import api from '@/api/index.js' // 导入api接口
  2. Vue.prototype.$api = api // 将api挂载到vue的原型上复制代码

5.添加公共的请求loading

  1. <!-- loading -->
  2. <common-loading v-if="loadingCount"></common-loading>
  4. import { mapState } from 'vuex'
  6. computed: {
  7.   ...mapState('loading', ['loadingCount'])
  8. },

每次请求loadingCount++，请求完成loadingCount—
（但是有一个问题，如果请求是在有嵌套逻辑关系的，例如：请求1完成之后，再进行请求2会造成loading会闪现的问题）

6.添加数组字典

dictionary/index.js

  2. export default {
  3.   // 漏洞类型
  4.   BugTypeEnum: {
  5.     codeerror: '代码错误',
  6.     security: '安全相关',
  7.     performance: '性能问题',
  8.     others: '其他',
  9.     interface: '界面优化',
  10.     newfeature: '新增需求',
  11.     designchange: '设计变更'
  12.   }
  13. }

main.js

  1. import dict from '@/dictionary' // 导入数据字典
  2. Vue.prototype.dict = dict;

7.添加其他的公共的方法

utils/NumberPrototype.js

  1. /* eslint no-extend-native: ["error", { "exceptions": ["Number", "String"] }] */
  3. /** 
  4.  * ! 加法
  5.   0.1+0.2         // 0.30000000000000004
  6.   0.1.add(0.2)    // 0.3
  7. */
  8. Number.prototype.add = function (arg) {
  9.   var r1, r2, m
  10.   try {
  11.     r1 = this.toString().split('.')[1].length
  12.   } catch (e) {
  13.     r1 = 0
  14.   }
  16.   try {
  17.     r2 = arg.toString().split('.')[1].length
  18.   } catch (e) {
  19.     r2 = 0
  20.   }
  22.   m = Math.pow(10, Math.max(r1, r2))
  24.   return Math.round(this.mul(m) + arg.mul(m)).div(m)
  25. }
  27. /** 
  28.  * ! 减法
  29.   0.3-0.1         // 0.19999999999999998
  30.   0.3.sub(0.1)    // 0.2
  31.   5000.02.sub(905.8)    // 4094.22
  32. */
  33. Number.prototype.sub = function (arg) {
  34.   return this.add(-arg)
  35. }
  37. /** 
  38.  * ! 乘法
  39.   0.00035.mul(100)    // 0.035
  40.  */
  41. Number.prototype.mul = function (arg) {
  42.   let m = 0
  43.   const s1 = this.toString()
  44.   const s2 = arg.toString()
  45.   try {
  46.     m += s1.split('.')[1].length
  47.   } catch (e) { }
  49.   try {
  50.     m += s2.split('.')[1].length
  51.   } catch (e) { }
  53.   return Number(s1.replace('.', '')) * Number(s2.replace('.', '')) / Math.pow(10, m)
  54. }
  56. // ! 除法
  57. Number.prototype.div = function (arg) {
  58.   let t1 = 0
  59.   let t2 = 0
  60.   try {
  61.     t1 = this.toString().split('.')[1].length
  62.   } catch (e) { }
  64.   try {
  65.     t2 = arg.toString().split('.')[1].length
  66.   } catch (e) { }
  68.   const r1 = Number(this.toString().replace('.', ''))
  69.   const r2 = Number(arg.toString().replace('.', ''))
  70.   return (r1 / r2).mul(Math.pow(10, t2 - t1))
  71. }
  73. /**
  74.  * ! 自定义数值转成指定小数位数
  75.  * num 数值
  76.  * digit 小数位数，默认2
  77. */
  78. function toDecimal (digit) {
  79.   var num = this
  80.   digit = digit === undefined ? 2 : digit
  82.   // this如果是字符串，则转成数字类型
  83.   if (typeof num === 'string') num = parseFloat(num)
  85.   // 参数digit如果是字符串，则转成数字类型
  86.   if (typeof digit === 'string') digit = parseFloat(digit)
  88.   // 如果为NaN抛出异常
  89.   if (isNaN(num)) return ''
  91.   // 判断小数位数
  92.   var n = 1
  93.   if (digit) {
  94.     for (var i = 0; i < digit; i++) {
  95.       n *= 10
  96.     }
  97.   };
  99.   // 数值进行四舍五入计算
  100.   var fixNum = (Math.round(num * n) / n).toString()
  102.   // 小数位数不足时，补全
  103.   if (digit !== 0 && fixNum.indexOf('.') === -1) {
  104.     fixNum += '.'
  105.   }
  107.   if (digit !== 0) {
  108.     while (fixNum.split('.')[1].length < digit) {
  109.       fixNum += '0'
  110.     }
  111.   }
  113.   // 此处不能返回 parseFloat(fixNum)，返回 parseFloat(fixNum) 会将 2.00 变成 2.
  114.   return fixNum
  115. }
  116. Number.prototype.toFixed = toDecimal
  117. String.prototype.toFixed = toDecimal

main.js

  1. import '@/utils/NumberPrototype' // 引入数字操作

8.vue防抖节流

main.js

  1. // todo 引入lodash
  2. import _ from 'lodash'
  4. Vue.prototype._ = _

防抖节流的使用

  1. this.debouncedInput = this._.debounce(this.getRequest, 800)
  3. // input失去焦点
  4. inputBlur () {
  5.   this.debouncedInput() // 触发表格请求
  6. },