为什么选择vue

新起的项目是一个宣传类的网站，做好了基本上应该很少会再动。
是一个很轻的网站，无服务端
需要快速上线

创建项目模版

src 资源文件
assets 图片资源
components 重复率高的组件
main.js 入口文件
router router文件夹
views 页面文件资源
template 为文件模板文件，src底下文件以功能模块划分文件夹（名字自定义）
children 子页面（名字自定义）
pug html模板文件
js js文件
scss css文件
index.vue vue总文件

本模版文件引用了 pug 模版和scss

├── App.vue
├── assets
│   └── logo.png
├── components
├── main.js
├── router
│   └── index.js
└── views
    ├── README.md
    └── template
        ├── README.md
        ├── _.js
        ├── _.pug
        ├── _.scss
        ├── children
        │   ├── README.md
        │   └── childA
        │       ├── _.js
        │       ├── _.pug
        │       ├── _.scss
        │       └── index.vue
        └── index.vue

router收集器构建思路

怎么自动收集呢？我想到的是用脚本遍历文件夹，然后收集文件名，以及路由信息。既然是要用脚本收集的东西，自然是越规范越简单。先从最简单的开始，可以通过require.context()获取文件路径。然后再进行router封装。

正常引入router

/**
 * Auto collect router
 */
import Vue from 'vue'
import Router from 'vue-router'

文件路径获取

let routers = require.context('@/views', true, /\.vue$/i).keys() // 获取vue文件
console.log('routers', routers)

初始化router数组，对文件路径进行遍历封装

const indexRouterMap = {} // 基础routers

routers.forEach(item => {
  const paths = item.match(/[a-zA-Z]+/g)
  // let routerChild
  const setChildren = (item, paths) => {
    if (paths[1] === 'children') {
      indexRouterMap[paths[0]].children.push({// 定义路由对象
        path: `/${paths[2]}`,
        name: `${paths[2]}`,
        component (resolve) {
          require([`@/views${item.slice(1)}`], resolve) // 动态引入模块
        },
        children: []
      })
    }
  }

  if (indexRouterMap.hasOwnProperty(paths[0])) {
    setChildren(item, paths)
  } else {
    indexRouterMap[paths[0]] = {// 定义路由对象
      path: `/${paths[0]}`,
      name: `${paths[0]}`,
      component (resolve) {
        require([`@/views${item.slice(1)}`], resolve) // 动态引入模块
      },
      children: []
    }

    setChildren(item, paths)
  }
})

console.log('indexRouterMap', indexRouterMap)

router 注入

Vue.use(Router)
const routes = []
for (let key in indexRouterMap) {
  routes.push(indexRouterMap[key])
}
export default new Router({
  routes
})

这样就能简单的收集路由了。

扩展

这样虽然已经能后简单收集路由，但是同时也丢了很多router的属性。所以我们还可以对它进行扩展一下。

未完待续......

vue路由自动收集器，你值得拥有！