vue项目优化

307 阅读1分钟

1.文件优化

一般的写法:

// router.js文件
// 1. 引入路由文件
import routerFiles1 from './modules/routerFiles1'
import routerFiles2 from './modules/routerFiles2'
import routerFiles3 from './modules/routerFiles3'
import routerFiles4 from './modules/routerFiles4'
// 将里面的内容设置到routes中
const config = {
  routes: [
    ...routerFiles1
    ...routerFiles2
    ...routerFiles3
    ...routerFiles4
  ]
}
const router = new Router(config)
export default router

优化后的写法:

目录文件结构
modules
  child1.js
  child2.js
  child3.js
  ...
index.js
// index.js中
const moduleFile = require.context('./modules', true, /\.js$/)
const modules = moduleFile.keys().reduce((acc, cur) => {
 var value = cur.replace(/^\.\/(.*)\.\w+$/, '$1')
 acc[value] = moduleFile(cur).default
 return acc
}, {})
const store = new Vuex.Store({
  modules
})
export default store

打印出来的modules