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
})
  1. 自动化注册全局组件
//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
    );
});

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

你可能感兴趣的:(Vue 之 自动化全局注册)