vue的高級使用技巧

 

1.  全局組件注冊

一般組件應用弊端，比較笨拙繁瑣低效，比如我們寫了一些組件，需要引用上的時候就通過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

        ]

    })

 

    到此路由的分區就完成了