Vue 之 自动化全局注册

---

在开发vue项目过程中，如果路由、组件等过多的话，注册起来是一件很麻烦的事情，这里引入自动化注册会很大程度上减少工作量。
webpack使用 require.context 可以动态引入文件,我们可以借助这个方法实现自动化注册。

一、 require.context

1. require
const func = require('./dir/first.js');我们可以通过这个方法读取一个文件中的内容，这里一定要注意文件的路径要写对，不然会访问不到文件。
2. require.context
   在刚才的过程中，webpack 会创建一个 require.context ，通过正则匹配到可能的文件，全部引入。如果我们想自定义这个正则规则的话，可以自己写一个 require.context 。
   语法：require.context('./dir', true, /\.js$/)；第一个参数表示相对的文件目录，第二个参数表示是否包括子目录中的文件（true，false），第三个参数表示引入的文件匹配的正则表达式。
   实例：

const context = require.context('./dir', true, /\.js$/);
const keys = context.keys(); // => ["./another-first-level.js", "./first-level.js", "./sub-dir/second-level.js"]

二、开发实例

1. 自动化部署路由

//./router/index.js

//404中转页面
import Transit from '@/page/Transit'

//自动化部署
const requireComponent = require.context('../page', true, /\.vue$/);
const routes = requireComponent.keys().map(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName);
    // 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
    const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'');
    // 全局注册组件
    const component = Vue.component(
        componentName.replace(/\//,'-'),
        // 如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`，否则回退到使用模块的根。
        componentConfig.default || componentConfig
    );
    return {
        path: '/'+componentName,
        name: componentName.replace(/\//,'-'),
        component
    }
});

//添加404页面
let notFoundPage = {
    path: '*',
    name: '404',
    component: Transit
};
routes.push(notFoundPage);

Vue.use(Router);

export default new Router({
    routes
})

2. 自动化注册全局组件

//main.js
//自动化注册全局组件
const requireComponent = require.context('./components/global', true, /\.vue$/);
requireComponent.keys().forEach(fileName => {
    // 获取组件配置
    const componentConfig = requireComponent(fileName);
    // 剥去文件名开头的 `./` 和`.vue`结尾的扩展名
    const componentName = fileName.replace(/^\.\//,'').replace(/\.vue$/,'');
    // 全局注册组件
    const component = Vue.component(
        componentName.replace(/\//,'-'),
        componentConfig.default || componentConfig
    );
});

欲望以提升热忱，毅力以磨平高山。