簡(jiǎn)要說(shuō)明

Vue CLI是一個(gè)基于Vue.js進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)，是vue-cli的升級(jí)版，除含有快速搭建Vue項(xiàng)目的腳手架外還有許多實(shí)用功能，vue ui是個(gè)亮點(diǎn)，官方詳細(xì)文檔傳送門(mén)。

一、安裝Vue CLI

安裝Vue CLI命令為npm install -g @vue/cli,若已安裝舊版vue-cli則需要先卸載vue-cli，卸載命令為npm uninstall vue-cli -g 。

二、創(chuàng)建vue工程

cmd命令vue create project-name創(chuàng)建vue工程，創(chuàng)建成功如下：

創(chuàng)建工程

這里會(huì)涉及一些vue的基礎(chǔ)，我們?cè)谶@篇博文中不做詳細(xì)說(shuō)明，不太了解的小哥哥小姐姐可以查閱vue相關(guān)教程（ps：vue的文檔還是相當(dāng)全面和詳細(xì)的）。

三、多頁(yè)面配置

使用vue腳手架創(chuàng)建的vue項(xiàng)目均為單頁(yè)面應(yīng)用（單頁(yè)面應(yīng)用有著多頁(yè)面不具備的多種優(yōu)勢(shì)），但在有些場(chǎng)景下（如一套系統(tǒng)的管理端和客戶端應(yīng)分為不同的頁(yè)面應(yīng)用）我們需要構(gòu)建多頁(yè)面應(yīng)用。使用舊版vue-cli構(gòu)建的工程實(shí)現(xiàn)起來(lái)需要修改許多配置，相當(dāng)繁瑣，基于Vue CLI配置可以輕松實(shí)現(xiàn)多頁(yè)面應(yīng)用構(gòu)建。

1、添加多頁(yè)面配置
在工程根路徑下（package.json同目錄）添加添加vue.config.js配置文件，內(nèi)容為：

module.exports = {
    pages: {
        console: {
            // 應(yīng)用入口配置，相當(dāng)于單頁(yè)面應(yīng)用的main.js，必需項(xiàng)
            entry: 'src/modules/console/console.js',

            // 應(yīng)用的模版，相當(dāng)于單頁(yè)面應(yīng)用的public/index.html，可選項(xiàng)，省略時(shí)默認(rèn)與模塊名一致
            template: 'public/console.html',

            // 編譯后在dist目錄的輸出文件名，可選項(xiàng)，省略時(shí)默認(rèn)與模塊名一致
            filename: 'console.html',

            // 標(biāo)題，可選項(xiàng)，一般情況不使用，通常是在路由切換時(shí)設(shè)置title
            // 需要注意的是使用title屬性template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
            title: 'console page',

            // 包含的模塊，可選項(xiàng)
            chunks: ['console']
        },
        // 只有entry屬性時(shí)，直接用字符串表示模塊入口
        client: 'src/modules/client/client.js'
    }
}

2、創(chuàng)建多頁(yè)面應(yīng)用
首先，安裝兩個(gè)插件，vue-router和vue-wechat-title。vue-router不解釋了，vue-wechat-title為單頁(yè)面應(yīng)用修改標(biāo)題的插件，詳細(xì)說(shuō)明點(diǎn)擊傳送門(mén)。
其次為創(chuàng)建模塊，在src下創(chuàng)建目錄modules，在modules下創(chuàng)建兩個(gè)模塊console和client；在public下添加模版console.html和clien.html。完成后工程結(jié)構(gòu)如下：

3、應(yīng)用路由配置
通過(guò)vue-router為應(yīng)用配置路由，以console模塊為例，在router.js中添加路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
    { path: '/', name: 'login', component: r => { require(['./login/Login'], r) }, meta: { title: 'console 登錄' }}
]

export default new VueRouter({
    routes: routes
})

4、應(yīng)用title跟隨路由切換
上面我們安裝了vue-wechat-title插件，在console.js中引入Vue.use(require('vue-wechat-title'))，console.js完整內(nèi)容為：

import Vue from 'vue'
import Console from './Console.vue'
import router from './router'

Vue.use(require('vue-wechat-title'))

new Vue({
    router,
    render: h => h(Console)
}).$mount('#console')

在console.vue中添加v-wechat-title指令，console.vue內(nèi)容為：

<template>
    <div id="console" v-wechat-title="$route.meta.title">
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: "console"
    }
</script>

<style scoped>

</style>

至此，針對(duì)console模塊的配置完成，對(duì)client模塊做相同配置即可。

四、運(yùn)行測(cè)試

執(zhí)行npm run serve指令以開(kāi)發(fā)模式運(yùn)行工程，訪問(wèn)http://localhost:8080/console.html可以看到進(jìn)入了我們?cè)诼酚衫餅閏onsole應(yīng)用設(shè)置的首頁(yè)面，title也與我們?cè)O(shè)置的相同：

訪問(wèn)http://localhost:8080/client.html進(jìn)入了我們?yōu)閏lient應(yīng)用設(shè)置的首頁(yè)面：

補(bǔ)充說(shuō)明：

該文源代碼github倉(cāng)庫(kù)地址：https://github.com/louie-001/vuecli3-multiple；
gitee倉(cāng)庫(kù)地址為：https://gitee.com/louie-sun/vuecli3-multiple；
文章內(nèi)容為個(gè)人工作學(xué)習(xí)總結(jié)，難免有紕漏，歡迎指摘、討論。