使用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，來存放多個頁面

每個頁面就是乙個單獨的資料夾，應包含.html，.js，.vue檔案。

3、配置vue.config.js

module.exports =,
mobile: 
},devserver: 
};

4、頁面之間的跳轉可以通過a標籤來跳轉

5、打包：npm run build 或 yarn build

可以看到有2個html。

補充：拉取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