最近剛好在做vue相關(guān)項(xiàng)目，于是想試一下vue-cli3.0，下面是使用后的一些記錄，方便以后查看

安裝vue-cli3.0

vue-cli3.0 的包名稱由 vue-cli 改成了 @vue/cli。 如果之前有全局安裝了舊版本的 vue-cli (1.x 或 2.x)，需要先通過(guò) 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是手動(dòng)，第一次建議手動(dòng)創(chuàng)建，可以根據(jù)自己的需要來(lái)創(chuàng)建，創(chuàng)建完后會(huì)讓你選擇是否此配置，前面那兩個(gè)就是我之前創(chuàng)建時(shí)保存的，下次如果要用的話直接選擇就行了。

image

目錄結(jié)構(gòu)

vue-cli3.0的目錄結(jié)構(gòu)相比之前的簡(jiǎn)潔了很多，去掉了build文件夾和config文件夾，多了public文件夾。

public文件夾里有一個(gè)index.html，這是模板文件，默認(rèn)是index.html，如果你是開(kāi)發(fā)多頁(yè)面而且有不同模板文件的可以新建多個(gè)模板文件。

image

src里有components和assets文件夾，components是放自定義組件的，assets是放一些靜態(tài)資源的，比如圖片、樣式、js等，你也可以在scr里新建文件夾來(lái)單獨(dú)存放css或js，看你個(gè)人習(xí)慣。

App.vue和main.js就等于是一個(gè)頁(yè)面了，main.js是入口文件，App.vue是頁(yè)面文件，一個(gè)入口文件對(duì)應(yīng)一個(gè)頁(yè)面文件，如果你有多個(gè)頁(yè)面，可以新建一個(gè)pages文件夾，比如下面這種，每一個(gè)文件夾對(duì)應(yīng)一個(gè)頁(yè)面，里面分別是入口文件和頁(yè)面文件，但是要在 vue.config.js 里配置 pages

相關(guān)配置可以在 vue.config.js 中配置，具體配置請(qǐng)點(diǎn)擊https://cli.vuejs.org/zh/config/，這里說(shuō)下我用到的配置

vue.config.js的配置

在src同級(jí)目錄下新建vue.config.js文件，內(nèi)容如下

module.exports = {
  publicPath: "./",
  pages: {
    index: {
      // page 的入口
      entry: "src/pages/index/index.js",
      // 模板來(lái)源
      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: "頁(yè)面標(biāo)題1",
      // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
      // 提取出來(lái)的通用 chunk 和 vendor chunk。
      chunks: ["chunk-vendors", "chunk-common", "index"]
    },
    index2: {
      entry: "src/pages/index2/index2.js",

      template: "public/index.html",

      filename: "index2.html",

      title: "頁(yè)面標(biāo)題2",

      chunks: ["chunk-vendors", "chunk-common", "index2"]
    }
  }
};

• publicPath
  publicPath定義相對(duì)路徑，這樣在打包后圖片路徑就不會(huì)報(bào)錯(cuò)了

• pages
  頁(yè)面配置，圖中是定義了兩個(gè)頁(yè)面共用一個(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

具體介紹請(qǐng)看這里

我在目錄下分別創(chuàng)建了三個(gè)文件，如下圖所示：

image

.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)目里就可以通過(guò) process.env.VUE_APP_NODE_ENV獲取到當(dāng)前模式了。。

環(huán)境變量可以幫助我們?cè)陂_(kāi)發(fā)時(shí)期和正式上線時(shí)期使用根據(jù)環(huán)境不同使用不同的變量，比如在開(kāi)發(fā)時(shí)期后端一般會(huì)提供測(cè)試接口，這時(shí)候我們就可以在開(kāi)發(fā)時(shí)期根據(jù)環(huán)境變量使用測(cè)試接口，等到了正式上線了打包了使用的就是線上的接口了，當(dāng)然要提前寫(xiě)好接口配置文件，然后在package.json里配置命令，如下圖所示：

image

在命令后面加上 --mode 模式值 就能指定模式打包了

最后

以上就是 vue-cli3.0 項(xiàng)目基本內(nèi)容了，還有其它更加高級(jí)的內(nèi)容得多看看文檔才行