1.首先卸載之前低版本的vue-cli,并安裝最新版的vue-cli3

  cnpm uninstall vue-cli -g         //我用的是淘寶鏡像
  cnpm install  -g  @vue/cli         //安裝全局安裝最新版vue-cli3
  vue -V                                      //查看當(dāng)前版本號(hào)

2.創(chuàng)建新項(xiàng)目

使用新命令創(chuàng)建：
vue create vueapp
--> 1. 使用上下箭頭選擇默認(rèn)設(shè)置還是手動(dòng)選擇功能

Vue CLI v3.0.3
? Please pick a preset:
  default (babel, eslint)
> Manually select features

--> 2. 按空格鍵選擇你需要的功能侄柔，選完后按回車

babel：javascript轉(zhuǎn)譯器，將最新版的js語(yǔ)法（es6沥潭、es7）轉(zhuǎn)換為現(xiàn)階段瀏覽器可以兼容的js代碼
typescript：使用 TypeScript 書(shū)寫源碼
PWA：漸進(jìn)式WEB應(yīng)用
Router：使用vue-router
Vuex：使用vuex
CSS Pre-processors：css預(yù)處理器
Linter / Formatter：代碼規(guī)范標(biāo)準(zhǔn)
Unit Testing：?jiǎn)卧獪y(cè)試
E2E Testing：e2e測(cè)試
Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

--> 3. router是否使用history模式伴嗡，history需要服務(wù)器支持詳惑艇，情請(qǐng)看這兒https://router.vuejs.org/zh/guide/essentials/history-mode.html

-> 4. css預(yù)處理器的選擇乘碑，我習(xí)慣用sass

--> 5跪解、代碼格式化檢測(cè)選擇掉丽，我用的是ide是vscode個(gè)人感覺(jué)搭配插件用著很舒服吓肋，所以我選Prettier

--> 6凳怨、是否保存剛才的配置，下一次就不用重新配置了蓬坡，我就直接回車

--> 7猿棉、關(guān)于Babel, PostCSS, ESLint, etc.這些配置文件你是想放在package.json里面還是單獨(dú)放在外面,編輯器一般默認(rèn)會(huì)在項(xiàng)目根目錄下尋找配置文件磅叛，這里我就直接回車選擇In dedicated config files
8、是否保存為未來(lái)項(xiàng)目的預(yù)配置嗎萨赁，我也是直接回車
最后配置如下

Vue CLI v3.0.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes

圖形化界面

圖形化操作非常方便

執(zhí)行npm命令
vue ui
訪問(wèn) http://localhost:8000 你就可以創(chuàng)建弊琴，管理，導(dǎo)入項(xiàng)目

實(shí)用新功能

• node_modules
• public
• src
• .browserslistrc
• .eslintrc.js
• .gitignore
• babel.config.js
• package.json
• postcss.config.js
• README.md

以上是項(xiàng)目根目錄杖爽，3.x對(duì)比2.x文件結(jié)構(gòu)明顯精簡(jiǎn)了不少敲董，多了一個(gè)public文件夾用于存放靜態(tài)文件少了config、build等一系列的配置文件慰安，這些配置文件都被放在了node_modules@vue文件下

browserslist

根目錄中多了一個(gè).browserslist文件腋寨，可以指定項(xiàng)目的目標(biāo)瀏覽器的范圍
用于轉(zhuǎn)譯的 JavaScript 特性和添加CSS 瀏覽器前綴，可以減少兼容代碼提高代碼質(zhì)量
如果想少一個(gè)文件化焕，你也可以在package.json中添加browserslist字段萄窜，參數(shù)是一個(gè)數(shù)組

這是默認(rèn)設(shè)置，兼容所有最新版本撒桨，不支持ie8以下
> 1%
last 2 versions
not ie <= 8

使用 npx browserslist 可以查看項(xiàng)目的瀏覽器兼容情況
將需要支持的目標(biāo)瀏覽器參數(shù)放在文件中就好

更多請(qǐng)查看官方文檔

vue-cli服務(wù)

在一個(gè) Vue CLI 項(xiàng)目中，@vue/cli-service 安裝了一個(gè)名為 vue-cli-service 的命令凤类。
你可以在 npm scripts 中以 vue-cli-service穗泵、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問(wèn)這個(gè)命令
Vue CLI 項(xiàng)目有三個(gè)模式： development 模式用于啟動(dòng)，production 模式用于打包和e2e測(cè)試谜疤，test 模式用于unit測(cè)試

啟動(dòng)
serve:vue-cli-service serve

  --open    在服務(wù)器啟動(dòng)時(shí)打開(kāi)瀏覽器

  --copy    在服務(wù)器啟動(dòng)時(shí)將 URL 復(fù)制到剪切版

  --mode    指定環(huán)境模式 (默認(rèn)值：development)

  --host    指定 host (默認(rèn)值：0.0.0.0)

  --port    指定 port (默認(rèn)值：8080)

  --https   使用 https (默認(rèn)值：false)

打包
build:vue-cli-service build

  --modern 使用現(xiàn)代模式構(gòu)建應(yīng)用佃延，為現(xiàn)代瀏覽器交付原生支持的 ES2015 代碼，并生成一個(gè)兼容老瀏覽器的包用來(lái)自動(dòng)回退夷磕。

  --target 允許你將項(xiàng)目中的任何組件以一個(gè)庫(kù)或 Web Components 組件的方式進(jìn)行構(gòu)建履肃。更多細(xì)節(jié)請(qǐng)查閱構(gòu)建目標(biāo)。

  --report 和 --report-json 會(huì)根據(jù)構(gòu)建統(tǒng)計(jì)生成報(bào)告坐桩，它會(huì)幫助你分析包中包含的模塊們的大小

測(cè)試
 test: vue-cli-service test:e2e  端到端測(cè)試
         vue-cli-service test:unit  單元測(cè)試

現(xiàn)代模式

為了兼容那些不支持js新特性的瀏覽器我們需要Babel轉(zhuǎn)譯榆浓，但轉(zhuǎn)譯后的代碼笨重冗長(zhǎng)，這次3.x提供了一個(gè)現(xiàn)代模式

npx vue-cli-service build --modern

這個(gè)命令會(huì)產(chǎn)生兩個(gè)應(yīng)用的版本：一個(gè)現(xiàn)代版的包撕攒，面向支持 ES modules 的現(xiàn)代瀏覽器，另一個(gè)舊版的包烘浦，面向不支持的舊瀏覽器
而且不需要我們手動(dòng)去部署和設(shè)置什么抖坪，簡(jiǎn)直很貼心

• 現(xiàn)代版的包會(huì)通過(guò) <script type="module"> 在被支持的瀏覽器中加載；它們還會(huì)使用 <link rel="modulepreload"> 進(jìn)行預(yù)加載
• 舊版的包會(huì)通過(guò) <script nomodule> 加載闷叉，并會(huì)被支持 ES modules 的瀏覽器忽略
• 一個(gè)針對(duì) Safari 10 中 <script nomodule> 的修復(fù)會(huì)被自動(dòng)注入

插件的添加

在一個(gè)已經(jīng)被創(chuàng)建好的項(xiàng)目中安裝一個(gè)插件,使用vue add命令

CLI 插件安裝

每個(gè) CLI 插件都會(huì)包含一個(gè) (用來(lái)創(chuàng)建文件的) 生成器和一個(gè) (用來(lái)調(diào)整 webpack 核心配置和注入命令的) 運(yùn)行時(shí)插件
對(duì)于這種cli插件需要加入@vue的前綴擦俐，這個(gè)命令將 @vue/eslint 解析為完整的包名 @vue/cli-plugin-eslint，然后從 npm 安裝它握侧，調(diào)用它的生成器

插件添加
vue add @vue/eslint

向被安裝的插件傳遞生成器選項(xiàng) (這樣做會(huì)跳過(guò)命令提示)
vue add @vue/eslint --config airbnb --lintOn save

第三方插件安裝

安裝并調(diào)用 vue-cli-plugin-apollo蚯瞧，不帶 @vue 前綴嘿期，該命令會(huì)換作解析一個(gè) unscoped 的包
執(zhí)行此命令后src里會(huì)創(chuàng)建一個(gè)plugins文件夾，里面會(huì)自動(dòng)生成關(guān)于插件的配置文件
vue add axios

基于一個(gè)指定的 scope 使用第三方插件埋合，如果一個(gè)插件名為 @foo/vue-cli-plugin-bar备徐，你可以這樣添加它：
vue add @foo/bar

配置修改

例：向所有 Sass 樣式傳入共享的全局變量
在根目錄新建一個(gè)vue.config.js，加入以下配置

module.exports = {
  css: {
    loaderOptions: {
      // 給 sass-loader 傳遞選項(xiàng)
      sass: {
        // @/ 是 src/ 的別名
        // 所以這里假設(shè)你有 `src/variables.scss` 這個(gè)文件
        data: `@import "@/variables.scss";`
      }
    }
  }
}

打包后路徑問(wèn)題

在vue.config.js文件中加入'baseUrl: './''

module.exports = {
    //...
    baseUrl: './'
    //...
}

雖然官方說(shuō)這個(gè)文件會(huì)被 @vue/cli-service 自動(dòng)加載甚颂，但如果你啟動(dòng)項(xiàng)目用的是npm run serve蜜猾，那么你最好使用npx vue-cli-service serve重啟一下

參考文章地址鏈接：http://www.reibang.com/p/0d78ff9fe6ed