環境安裝

全新版本的腳手架、逼格非常高、 記住這個名字 @vue/cli ，對就是這個 你npm 或者yarn 安裝就行了，先保證全局環境有它。

npm install -g @vue/cliyarn add global @vue/cli

創建項目

這里對比下以前2.X之前的版本 ，新版本把插件以及模板等 移植到命令行界面了.

來一張圖把 ，這里已經有幾個默認配好的模板了，我們選最后的Manually select features

vue-cli3.0在你創建后會有一個保存當前配置的功能

配置項目插件和功能

這里就很傻瓜了， 你要集成什么 就選就行了。我這里選個我比較常用的。

1. TypeScript
2. PWA
3. Vue-router
4. Vuex
5. CSS預處理
6. eslint prettier
7. 自動化測試單元測試 、e2e

這里我選LESS

這里我選eslint + prettier

這里選擇語法檢查的方式 保存就檢查 還是fix和commit時候檢查，我就默認選第一個了

這里單元測試 插件我選jest

這里是把babel,postcss,eslint這些配置文件放哪

1. 獨立文件放置
2. 放package.json里

個人喜好 這里我獨立放

最后就是選擇 是否記錄一下？ 下次繼續使用這套配置 ，這里咱就不存了 這玩呢存多了 我都不知道怎么刪 知道的小哥哥小姐姐麻煩 告訴我下哈。

ok最后確定后 等待裝好吧

嗖 裝好了

啟動項目進入目錄,啟動項目 這里 vue-cli 3.x 默認會打開瀏覽器 地址也會打在控制臺。

  yarn serve   // OR  npm run serve

啟動后的界面就不截圖了 ，按步驟正常操作下來應該跟之前版本一樣。

項目分析

首先看下整體目錄 比 2.x之前 是精簡了不少

去掉了2.x build和config等目錄 ,大部分配置 都集成到vue.config.js這里了

vue.config.js里
大概包括了配置 常用的輸出路徑名、跟目錄、預處理、devServer配置、pwa、dll、第三方插件等等
詳細配置可以看官方文檔 詳細config配置

如何隨心所欲

1. 服務器配置修改

這里我先改個端口, 修改vue.config.js 然后重新啟動工程 , 可以看到已經改成5999端口了

module.exports = { lintOnSave: false, devServer: {  port: 5999 }}

2. 常用webpack配置修改

webpack的配置在這個屬性里修改configureWebpack  

包括plugins也可以自己擴展 ，本身尤大已經把常用的都封裝了 ，不滿足可以自行擴展。

這里改個webpack devtool輸出方式、默認那個我屬實不知道怎么跟蹤代碼

configureWebpack: config => {  if (process.env.NODE_ENV === 'development') {    config.devtool = 'source-map'    // mutate config for production...  } }

其他配置 就不一一介紹了 具體可以看這里webpack

3. 全局變量的設置

在項目根目錄 創建二個文件

.env.development
.env.production

里面配置鍵值對就行了

但要注意 這里必須以VUE_APP開頭

這樣我們就可以自定義個全局變量在某個模式下

VUE_APP_MOCK_URL = 'http://xxxx.xxx.xx.xx/mockjs/'

比如這樣在axios中就可以配置根路徑了

const service = axios.create({  baseURL: process.env.VUE_APP_MOCK_URL})

總結

本文使用vue-cli3.x 從環境、到創建、到配置、和常用項目技巧進行了簡單介紹，希望可以幫助到剛使用的人 。也希望大家多多支持武林網。