vue前端工程自动化

这几天再忙着 几天没有更新了 今天给大家总结一下前端工程自动化吧 

首先 先理解一下什么是自动化 我自己理解的就是 好比一个机器 你设定好程序 无论你怎么操作 都不影响流程和结果 就按照你设定好的程序走 

先思考一下 为什么要用自动化 肯定是方便 减少操作的复杂度 

比如 我们封装了很多的方法.js  对应很多js文件 然后在页面里面使用的时候 是不是要全部都一个一个的引入 很多人认为 方法都放在一个js文件里面 不需要很多 其实 正常来说 是根据功能来划分的 比如 权限 导入导出 校验 。。。 在或者说 vuex里面的命名空间 动态vue路由等 肯定都会遇到 

不多哔哔 先看下自动化的目录吧 

正常来说 就是一个主文件和一个modules文件夹 然后里面放置不同的js文件 

自动化工程 主要是使用的es6 require.context方法实现的 里面有是三个参数 第一个路径第二个boolean 是否加载子文件 第三个正则 用来匹配文件格式 

先以vue router 为例看一下吧 

const routersFiles = require.context('./modules', true, /\.js$/)
// let routerList = []
// routersFiles.keys().forEach(item=>{
//   // console.log(routersFiles(item).default,routerList)
//   routerList.push(routersFiles(item).default)
// })
// console.log(routersFiles,"routersFilesroutersFiles")
const routers = routersFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = routersFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
export const constantRoutes = [
  ...Object.values(routers),
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  }
];

根据不同场景 有多种写法 

在看看vuex

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters
})

export default store

自己写的时候 一定要去打印 看看方法里面得到的是什么 这样的话 才能方便更好理解和吸收