Vue CLI提供了非常方便的多頁面應用程序(MPA)的開發。MPA是指包含多個HTML文件的應用程序,每個HTML文件都對應一個獨立的Vue實例。這種開發方式適用于那些需要使用多個互相獨立的頁面,每個頁面中只能有一個Vue實例的場景。
Vue CLI的多頁面模板已經默認支持了MPA開發。我們通過執行以下命令即可創建一個基本的多頁面應用程序:
vue create my-multipage-app # 創建項目 cd my-multipage-app # 進入項目目錄 vue add @vue/cli-plugin-multi-page # 安裝多頁面插件
上述命令執行之后,我們就可以創建多個HTML文件了。我們可以在/public
目錄下新建一個about.html
文件,里面的代碼如下:
About About
{{ message }}
通過{{ message }}
我們可以向/src/pages/About.vue
文件中傳遞數據。上述代碼還引入了一個新的腳本文件about.js
,我們需要在/src/main.js
文件中告訴Vue CLI如何處理這個文件。我們可以按如下代碼編輯/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
來實例化一個路由器,通過routes
參數我們可以指定哪個組件對應哪個頁面。
通過以上步驟,我們就已經創建了一個基本的多頁面Vue應用程序。