最近剛好在做vue相關(guān)項(xiàng)目箍铲，于是想試一下vue-cli3.0宾添，下面是使用后的一些記錄突雪，方便以后查看
安裝vue-cli3.0
vue-cli3.0 的包名稱由 vue-cli 改成了 @vue/cli闪唆。 如果之前有全局安裝了舊版本的 vue-cli (1.x 或 2.x)碧库，需要先通過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。這里我用的是yarn巧勤。卸載完后用下面的命令全局安裝
yarn global add @vue/cli
創(chuàng)建項(xiàng)目
vue create project-name
輸入命令后要讓你選擇創(chuàng)建方式嵌灰，default是默認(rèn)，manully是手動颅悉，第一次建議手動創(chuàng)建沽瞭，可以根據(jù)自己的需要來創(chuàng)建，創(chuàng)建完后會讓你選擇是否此配置剩瓶，前面那兩個(gè)就是我之前創(chuàng)建時(shí)保存的驹溃，下次如果要用的話直接選擇就行了。
目錄結(jié)構(gòu)
vue-cli3.0的目錄結(jié)構(gòu)相比之前的簡潔了很多延曙，去掉了build文件夾和config文件夾豌鹤，多了public文件夾。
public文件夾里有一個(gè)index.html枝缔，這是模板文件布疙，默認(rèn)是index.html，如果你是開發(fā)多頁面而且有不同模板文件的可以新建多個(gè)模板文件愿卸。
src里有components和assets文件夾灵临，components是放自定義組件的，assets是放一些靜態(tài)資源的趴荸，比如圖片儒溉、樣式、js等发钝，你也可以在scr里新建文件夾來單獨(dú)存放css或js顿涣，看你個(gè)人習(xí)慣。
App.vue和main.js就等于是一個(gè)頁面了酝豪，main.js是入口文件园骆，App.vue是頁面文件，一個(gè)入口文件對應(yīng)一個(gè)頁面文件寓调，如果你有多個(gè)頁面锌唾，可以新建一個(gè)pages文件夾，比如下面這種，每一個(gè)文件夾對應(yīng)一個(gè)頁面晌涕，里面分別是入口文件和頁面文件滋捶，但是要在 vue.config.js 里配置 pages
相關(guān)配置可以在 vue.config.js 中配置，具體配置請點(diǎn)擊https://cli.vuejs.org/zh/config/余黎，這里說下我用到的配置
vue.config.js的配置
在src同級目錄下新建vue.config.js文件重窟，內(nèi)容如下
module.exports = {
publicPath: "./",
pages: {
index: {
// page 的入口
entry: "src/pages/index/index.js",
// 模板來源
template: "public/index.html",
// 在 dist/index.html 的輸出
filename: "index.html",
// 當(dāng)使用 title 選項(xiàng)時(shí)，
// template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: "頁面標(biāo)題1",
// 在這個(gè)頁面中包含的塊惧财，默認(rèn)情況下會包含
// 提取出來的通用 chunk 和 vendor chunk巡扇。
chunks: ["chunk-vendors", "chunk-common", "index"]
},
index2: {
entry: "src/pages/index2/index2.js",
template: "public/index.html",
filename: "index2.html",
title: "頁面標(biāo)題2",
chunks: ["chunk-vendors", "chunk-common", "index2"]
}
}
};
publicPath
publicPath定義相對路徑，這樣在打包后圖片路徑就不會報(bào)錯(cuò)了pages
頁面配置垮衷，圖中是定義了兩個(gè)頁面共用一個(gè)index.html模板
環(huán)境變量與模式的使用
vue-cli 提供了三種模式厅翔，分別是
- development 模式用于
vue-cli-service serve - production 模式用于
vue-cli-service build 和 vue-cli-service test:e2e - test 模式用于
vue-cli-service test:unit
具體介紹請看這里
我在目錄下分別創(chuàng)建了三個(gè)文件，如下圖所示：
.env.development 的內(nèi)容如下：
NODE_ENV = development
VUE_APP_NODE_ENV = development
.env.qa 的內(nèi)容如下：
NODE_ENV = production
VUE_APP_NODE_ENV = qa
outputDir = 'dist/qa'
.env.production 的內(nèi)容如下：
NODE_ENV = production
VUE_APP_NODE_ENV = production
outputDir = 'dist/production'
NODE_ENV 是環(huán)境變量搀突，VUE_APP_NODE_ENV 是該環(huán)境下的模式名稱刀闷，在項(xiàng)目里使用模式一定要加上 VUE_APP_ 前綴，然后在項(xiàng)目里就可以通過 process.env.VUE_APP_NODE_ENV獲取到當(dāng)前模式了仰迁。甸昏。
環(huán)境變量可以幫助我們在開發(fā)時(shí)期和正式上線時(shí)期使用根據(jù)環(huán)境不同使用不同的變量，比如在開發(fā)時(shí)期后端一般會提供測試接口徐许，這時(shí)候我們就可以在開發(fā)時(shí)期根據(jù)環(huán)境變量使用測試接口施蜜，等到了正式上線了打包了使用的就是線上的接口了，當(dāng)然要提前寫好接口配置文件雌隅，然后在package.json里配置命令花墩，如下圖所示：
在命令后面加上 --mode 模式值 就能指定模式打包了
最后
以上就是 vue-cli3.0 項(xiàng)目基本內(nèi)容了，還有其它更加高級的內(nèi)容得多看看文檔才行
