vue的高级使用技巧

全局组件注册

一般组件应用弊端，比较笨拙繁琐低效，比如我们写了一些组件，需要引用上的时候就通过import导入，那如果是高频繁需要使用的组件，则需要在每个使用的时候都需要引入并注册

假设现在有两个组件

很明显，如果我们有n个组件，那么就需要多次的import导入并注册，如果是高频繁使用的，就会显得非常繁琐，那么如何优化呢？我们可以利用webpack的一个api：require.context

新建一个文件global.js

//global.js

import Vue from 'vue';

function changeStr(str) {

    return str.charAt(0).toUpperCase() + str.slice(1);

}

/**

 * context有三个参数

 * 第一个是跟目录

 * 第二个是false,代表是否使用下面的子目录，如果该目录下有子目录并且该子目录下有组件，则需要为ture

 * 第三个是一个正则,匹配文件

 */

const requireComponent = require.context('.', false, /\.vue$/ );

requireComponent.keys().forEach(fileName => {

    //./child1.vue

    const config = requireComponent(fileName);

    //取组件名

    const componentName = changeStr(

        fileName.replace(/^\.\//, '').replace(/\.\w+$/,'')

    )

    console.log(componentName);

    Vue.component(componentName, config.default || config)

});

然后在main.js引入

import global from './components/global.js';

完成后现在的组件引用就不需要再写components：{}了

//之前的HelloWorld.vue

import Child1 from './child1'

import Child2 from './child2'

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  },

  components: {

    Child1,

    Child2

  }

}

//优化后的HelloWorld.vue

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  }

}

由此，我们全局注册组件已经实现了，我们注册的这个组件现在是可以在全局任何的这个Helloworld组件里面调用，比之前的要逐个import要变得简洁高效。所以你可以把你**高频繁使用**的组件都放在同一个目录下并配置一个全局js进行统一的引入

注：如果不是频繁并且有许多组件引入的情况没必要用此方法，要分具体应用场合

　　2.路由动态引入之路由分区

　　什么是路由分区？

　　所谓的路由分区就是在router文件夹下新建你要分区的路由模块，比如登录模块

那么如何配置呢？其配置方式与vue组件全局注册是一样的道理，

也是通过vue里面集成的webpack的api：require.context

首先我们先新建几个vue组件

如果是按照我们以前的写法，都是先导入，然后配置routes，如果路由少的话并没有太大的问题，但是，如果有一个项目里有几百个页面的时候，会有很长一串的import，routes文件内容也会很冗长，而且也不好维护，即使代码块可以折叠

　　接下来就进行优化

分区

　　先在router文件夹下新建两个文件login.routes.js 和index.routes.js

　　然后再文件里面写上路由信息

 //login.routes.js

        export default {

        path: '/login',

        name: 'login',

        component: () => import('../views/login.vue'),

        children: []

    }

引用

 import Vue from 'vue'

        import Router from 'vue-router'

        import Home from './views/home.vue'

        import Index from './views/index.vue'

        // import Login from './views/login.vue'

        import Login from './router/login.routes'

        Vue.use(Router)

        export default new Router({

            routers: [

                {

                    path: '/',

                    name: 'home',

                    compoment: Home

                },

                {

                    path: '/index',

                    name: 'index',

                    component: Index

                },

                // {

                //     path: '/login',

                //     name: 'login',

                //     component: Login

                // }

                Login

            ]

        })

接下来我们再继续优化

在router/index.js里定义一个方法

const routerList = [];

    function importAll(r){

      r.keys().forEach((key) => routerList.push(r(key).default));

    }

    importAll(require.context('./router',true, /\.router\.js/))

 //router.js

    import Vue from 'vue'

    import Router from 'vue-router'

    import Home from './views/home.vue'

    Vue.use(Router)

    const routerList = [];

    function importAll(r){

        r.keys().forEach((key) => routerList.push(r(key).default));

    }

    importAll(require.context('./router',true, /\.router\.js/))

    export default new Router({

        routes: [

            {

                path: '/',

                name: 'home',

                component: Home

            },

            ...routerList

        ]

    })

到此路由的分区就完成了

vue的高级使用技巧

猜你喜欢