Vue CLI提供了非常方便的多頁(yè)面應(yīng)用程序（MPA）的開發(fā)。MPA是指包含多個(gè)HTML文件的應(yīng)用程序，每個(gè)HTML文件都對(duì)應(yīng)一個(gè)獨(dú)立的Vue實(shí)例。這種開發(fā)方式適用于那些需要使用多個(gè)互相獨(dú)立的頁(yè)面，每個(gè)頁(yè)面中只能有一個(gè)Vue實(shí)例的場(chǎng)景。

Vue CLI的多頁(yè)面模板已經(jīng)默認(rèn)支持了MPA開發(fā)。我們通過執(zhí)行以下命令即可創(chuàng)建一個(gè)基本的多頁(yè)面應(yīng)用程序：

vue create my-multipage-app # 創(chuàng)建項(xiàng)目
cd my-multipage-app # 進(jìn)入項(xiàng)目目錄
vue add @vue/cli-plugin-multi-page # 安裝多頁(yè)面插件

上述命令執(zhí)行之后，我們就可以創(chuàng)建多個(gè)HTML文件了。我們可以在/public目錄下新建一個(gè)about.html文件，里面的代碼如下：

About
{{ message }}

通過{{ message }}我們可以向/src/pages/About.vue文件中傳遞數(shù)據(jù)。上述代碼還引入了一個(gè)新的腳本文件about.js，我們需要在/src/main.js文件中告訴Vue CLI如何處理這個(gè)文件。我們可以按如下代碼編輯/src/main.js文件：

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
let routes = {
'about': {
template: '',
components: { App  }
}
}
new Vue({
el: '#app',
components: { App },
template: '',
router: new VueRouter({ routes })
}).$mount('#app')

在上面的代碼中我們使用VueRouter來實(shí)例化一個(gè)路由器，通過routes參數(shù)我們可以指定哪個(gè)組件對(duì)應(yīng)哪個(gè)頁(yè)面。

通過以上步驟，我們就已經(jīng)創(chuàng)建了一個(gè)基本的多頁(yè)面Vue應(yīng)用程序。