项目经验总结 2019-12-10

1.vue-cli 3.0 创建项目之后，webpack的配置被隐藏了。当你需要覆盖原有配置时,则需要在原有根目录下，创建vue.config.js来配置自己的配置。vue.config.js会自动加载。

module.exports = {
    /* 部署生产环境和开发环境下的URL：可对当前环境进行区分，baseUrl 从 Vue CLI 3.3 起已弃用，要使用publicPath */ 
    publicPath: process.env.NODE_ENV === 'production' ? '/public/' : './',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
    outputDir: 'dist',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
    assetsDir: "assets",
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
    productionSourceMap: false,
    /* 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存，你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变) */
    filenameHashing: false,
    /* 代码保存时进行eslint检测 */
    lintOnSave: true,
    /* webpack-dev-server 相关配置 */
    devServer: {
        /* 自动打开浏览器 */
        open: true,
        /* 设置为0.0.0.0则所有的地址均能访问 */
        host: '0.0.0.0',
        port: 8066,
        https: false,
        hotOnly: false,
        /* 使用代理 */
        proxy: {
            '/api': {
                /* 目标代理服务器地址 */
                target: 'http://47.100.47.3/',
                /* 允许跨域 */
                changeOrigin: true,
            },
        },
        // 通常在此处设置mock数据 app.get(url, (res,req) => res.json({data: 'get'}))
        before(app) {
          if (!this.proxy) {
            mockDev(app)
          }
        },
        // 是否显示打包进程
        progress: false
     },
    // vue-cli内部的配置是通过 webpack-chain配置的。允许以更细微的粒度来控制其内部配置
    // eg: 配置resolve选项、配置module选项...
     chainWebpack: (config) => {
        config.resolve.alias
          .set('@src', resolve('src'))
     } 
}

2.mock.js也可以只产生数据。不参加接口的拦截。如：拦截请求使用node-express中间件，返回数据的格式使用mock.js来模拟

const Mock = require('mockjs')
app.get('/sepm/sys/login', (req, res) => {
    res.json(Mock.mock({
      'code': '0',
      'data': {
        'manageId': '@natural',
        'name': '@cname',
        'squareName': '@string(7, 10)',
        'role': '@integer(0, 3)'
      }

    }))
  })

3.对于组件库的使用

自己有的组件尽量用自己的，不得已引入了第三方组件就按需加载

// 项目中用到了antd的组件  antd.js
export {
  Pagination,
  DatePicker,
  TimePicker,
  LocaleProvider
} from 'ant-design-vue'


// main.js

import * as Antd from '@config/antd'
import Vue from 'vue'
// Vue.use全局引入
for (let x in Antd) {
  Vue.use(Antd[x])
}

4.beforeEach路由守卫判断登陆

router.beforeEach((to, from, next) => {
  const permision = to.meta.role && to.meta.role.includes(store.getters.userInfo.role)
  // let userInfo = store.getters.userInfo
  if (sessionStorage.getItem('manageId')) { // 已经登陆
    if (to.path == '/login' && permision) { // 已登录并且有权限
      next('/')
    } else if (!permision) { // 没权限，做处理后去登录页
      sessionStorage.clear()
      next('/login')
    } else {
      next()
    }
  } else { // 未登录
    if(to.path=='/login'){
      next()
    } else { // 未登录访问其他页面，统一过登陆页去
      next(`/login?redirect=${encodeURIComponent(to.path)}`)
    }
  }
})

5.vue全局引入组件时候给组件重新l名一个名字

Vue.component('l-table', Table)

6.<a-locale-provider>组件可以使得全部的anted-design-vue组件的语言变为中文

<template>
  <div id="app">
    <a-locale-provider :locale="zh_CN">
      <router-view></router-view>
    </a-locale-provider>
  </div>
</template>

<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN'
export default {
  name: 'app',
  data () {
    return {
      zh_CN
    }
  }
}
</script>

7.VUE模板文件中，尽量少的减少字符串，数字的出现，如果某些字符串，数字必须出现，且这些字符串都是永远不会改变的。那么必须用带有附带可读意义的常量代替。增加可读性。

// 请求成功
export const SUCCESS_CODE = '0'
// 项目配置
export const NULL_KEY = ''                                        
// 角色权限 每个常量代表一种角色
export const SUPER_ADMIN = '0'                               
export const VENUE_ADMIN = '1'                               
export const CHANNEL_ADMIN = '2'

8.项目中用到的key-value形式的配置文件，用map代替object形式，取值时map.get()

export const DIREC_PUBLIC = 'a'                                   
export const NOT_DIREC_PUBLIC = 'b'                           
export const direcPublicActiMap = new Map([
  [NULL_KEY, '请选择'],
  [DIREC_PUBLIC, '是'],
  [NOT_DIREC_PUBLIC, '否']
])

9.vuex-persistedstate可以生成持久化vuex数据，内部原理时设置了localStorage

import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  plugins:[createPersistedState()]
})

10.如果由需求是相对于不同权限的用户，展示不同的组件，或者侧边栏。可以把这些角色用常量标识出来，在路由配置中，分析哪些角色可以看到这个组件，把这些人组成一个数组，放在对应组件下的meta中

        {
          path: 'a',
          component: S,
          module: 'a',
          name: 'a',
          meta: {
            title: 'aaa',
            role: [VENUE_ADMIN, CHANNEL_ADMIN] // 这两种角色可以看到此组件
          }
        }

11.axios响应或者请求拦截器

axios.interceptors.request.use((request) => {
  request.headers['oaid'] = 'aaa' // 设置请求头
  return request
})

axios.interceptors.response.use(
  (response) => { // 相应拦截器
    if (response.data.code === -200) {
      window.location.href = response.data.url
    }
  }
)