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

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

おすすめ