使用Vue CLI3開發多頁面應用
一、安裝vue-cli3
1、如果你已經全域性安裝了舊版本的 vue-cli
(1.x 或 2.x),你需要先通過 npm uninstall vue-cli -g
或 yarn global remove vue-cli
解除安裝它。
2、安裝命令:npm install -g @vue/cli 或
yarn global add @vue/cli
3、通過vue --version這個命令來檢查其版本是否正確 (3.x)
二、建立一個專案
1、執行以下命令來建立一個新專案:vue create vue-page,專案名稱:vue-page。
2、你會被提示選取一個 preset。你可以選預設的包含了基本的 Babel + ESLint 設定的 preset,也可以選“手動選擇特性”來選取需要的特性。這裡選擇第2種方式。(根據自己的專案需求選取合適的配置,新手可以一路回車)
3、這是專案建好之後的目錄結構:
4、進入當前專案:cd vue-page,執行專案:npm run serve 或 yarn serve
專案啟動成功:
三、構建多頁應用
1、在專案根目錄建立檔案:vue.config.js
2、在專案src目錄下新建資料夾pages,來存放多個頁面
如果單個頁面有使用到axios,router等,都單獨建資料夾寫。最外層的App.vue,main.js可以刪除。
每個頁面就是一個單獨的資料夾,應包含.html,.js,.vue檔案。
3、配置vue.config.js
module.exports = { // 預設情況下,Vue CLI假設您的應用程式將部署在域的根目錄下。 // https://www.xxxx.com/, 如果應用程式部署在子路徑上,則需要使用此選項指定子路徑。例如,如果您的應用程式部署在https://www.xxx.com/myapp/,集baseUrl到'/myapp/' publicPath: process.env.NODE_ENV === "production" ? "/myapp/" : "/", outputDir: "myapp", // 在yarn build時 生成檔案的目錄 default:'dist' assetsDir: "static", // 放置生成的靜態資源 (js、css、img、fonts) 的目錄。default: '' pages: { // 多頁配置 index: { entry: "./src/pages/index/index.js", // 配置入口js檔案 template: "./src/pages/index/index.html", // 主頁面 filename: "index.html", // 打包後的html檔名稱 title: "首頁", // 打包後的.html中<title>標籤的文字內容 // 在這個頁面中包含的塊,預設情況下會包含 // 提取出來的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, mobile: { entry: "./src/pages/mobile/mobile.js", template: "./src/pages/mobile/mobile.html", filename: "mobile.html", title: "詳情", chunks: ['chunk-vendors', 'chunk-common', 'mobile'] } }, devServer: { index: "index.html", // 預設啟動serve 開啟index頁面 port: 8099, // 埠號 open: true // 配置自動啟動瀏覽器 } };
4、頁面之間的跳轉可以通過a標籤來跳轉
5、打包:npm run build 或 yarn build
可以看到有2個html。
至此,多頁應用搭建完成。想要了解更多,可以前去官網學習:https://cli.vuejs.org/zh/guide/
補充:
拉取2.x模板(舊版本)
Vue CLI >= 3 和舊版使用了相同的 vue
命令,所以 Vue CLI 2 (vue-cli
) 被覆蓋了。如果你仍然需要使用舊版本的 vue init
功能,你可以全域性安裝一個橋接工具:
npm install -g @vue/cli-init # `vue init` 的執行效果將會跟 `[email protected]` 相同 vue init webpack my-project
&n