vue3.0初體驗有哪些實用新功能
關於安裝
Vue CLI 的包名稱由 vue-cli 改成了 @vue/cli
npm install -g @vue/cli
安裝完成後檢視版本
vue --V
專案建立
關於專案建立，除了命令建立3.x還增加了圖形化介面建立以及管理vue專案
在建立新專案時還可以混合選用多種整合
- TypeScript
- PWA
- Vue Router & Vuex
- ESLint / TSLint / Prettier
- 用 Jest 或 Mocha 進行單元測試
- 用 Cypress 或者 Nightwatch 進行 E2E 測試
使用命令建立
命令：vue create vueapp
1、使用上下箭頭選擇預設設定還是手動選擇功能
Vue CLI v3.0.3
? Please pick a preset:
default (babel, eslint)
> Manually select features
2、按空格鍵選擇你需要的功能，選完後按回車
babel：javascript轉譯器，將最新版的js語法（es6、es7）轉換為現階段瀏覽器可以相容的js程式碼 typescript：使用 TypeScript 書寫原始碼 PWA：漸進式WEB應用 Router：使用vue-router Vuex：使用vuex CSS Pre-processors：css前處理器 Linter / Formatter：程式碼規範標準 Unit Testing：單元測試 E2E Testing：e2e測試 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需要伺服器支援詳，情請看這兒https://router.vuejs.org/zh/guide/essentials/history-mode.html
這裡我就選no
4、css前處理器的選擇，我習慣用sass
5、程式碼格式化檢測選擇，我用的是ide是vscode個人感覺搭配外掛用著很舒服，所以我選Prettier
6、是否儲存剛才的配置，下一次就不用重新配置了，我就直接回車
7、關於Babel, PostCSS, ESLint, etc.這些配置檔案你是想放在package.json裡面還是單獨放在外面
編輯器一般預設會在專案根目錄下尋找配置檔案，這裡我就直接回車選擇In dedicated config files
8、是否儲存為未來專案的預配置嗎，我也是直接回車
最後配置如下
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
圖形化介面
圖形化操作非常方便，我就不一步步演示了，主要懶得貼圖 (°ー°〃)
執行npm命令
vue ui
訪問 http://localhost:8000 你就可以建立，管理，匯入專案
實用新功能
- node_modules
- public
- src
- .browserslistrc
- .eslintrc.js
- .gitignore
- babel.config.js
- package.json
- postcss.config.js
- README.md
以上是專案根目錄，3.x對比2.x檔案結構明顯精簡了不少，多了一個public資料夾用於存放靜態檔案少了config、build等一系列的配置檔案，這些配置檔案都被放在了[email protected]檔案下
browserslist
根目錄中多了一個.browserslist檔案，可以指定專案的目標瀏覽器的範圍
用於轉譯的 JavaScript 特性和新增CSS 瀏覽器字首，可以減少相容程式碼提高程式碼質量
如果想少一個檔案，你也可以在package.json中新增browserslist欄位，引數是一個數組
這是預設設定，相容所有最新版本，不支援ie8以下
> 1%
last 2 versions
not ie <= 8
使用 npx browserslist 可以檢視專案的瀏覽器相容情況
將需要支援的目標瀏覽器引數放在檔案中就好
| 引數 | 說明 |
|---|---|
| > 1% | 全球超過1%人使用的瀏覽器 |
| > 5% in US | 使用美國使用情況統計，接受兩個字母的國家/地區程式碼 |
| > 5% in my stats | 使用自定義使用資料 |
| last 2 versions | 所有瀏覽器相容到最後兩個版本根據CanIUse.com追蹤的版本 |
| Firefox ESR | 火狐最新版本 |
| Firefox > 20 | 指定版本範圍 |
| not ie <=8 | 方向排除部分版本 |
| Firefox 12.1 | 指定瀏覽器版本 |
| since 2013 | 2013年之後釋出的所有版本 |
更多請檢視官方文件
vue-cli服務
在一個 Vue CLI 專案中，@vue/cli-service 安裝了一個名為 vue-cli-service 的命令。
你可以在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令
啟動
serve:vue-cli-service serve
--open 在伺服器啟動時開啟瀏覽器
--copy 在伺服器啟動時將 URL 複製到剪下版
--mode 指定環境模式 (預設值：development)
--host 指定 host (預設值：0.0.0.0)
--port 指定 port (預設值：8080)
--https 使用 https (預設值：false)
build:vue-cli-service build
--modern 使用現代模式構建應用，為現代瀏覽器交付原生支援的 ES2015 程式碼，並生成一個相容老瀏覽器的包用來自動回退。
--target 允許你將專案中的任何元件以一個庫或 Web Components 元件的方式進行構建。更多細節請查閱構建目標。
--report 和 --report-json 會根據構建統計生成報告，它會幫助你分析包中包含的模組們的大小
現代模式
為了相容那些不支援js新特性的瀏覽器我們需要Babel轉譯，但轉譯後的程式碼笨重冗長，這次3.x提供了一個現代模式
npx vue-cli-service build --modern
這個命令會產生兩個應用的版本：一個現代版的包，面向支援 ES modules 的現代瀏覽器，另一箇舊版的包，面向不支援的舊瀏覽器
而且不需要我們手動去部署和設定什麼，簡直很貼心
- 現代版的包會通過
<script type="module">在被支援的瀏覽器中載入；它們還會使用<link rel="modulepreload">進行預載入 - 舊版的包會通過
<script nomodule>載入，並會被支援 ES modules 的瀏覽器忽略 - 一個針對 Safari 10 中
<script nomodule>的修復會被自動注入
外掛的新增
在一個已經被建立好的專案中安裝一個外掛,使用vue add命令
CLI 外掛安裝
每個 CLI 外掛都會包含一個 (用來建立檔案的) 生成器和一個 (用來調整 webpack 核心配置和注入命令的) 執行時外掛
對於這種cli外掛需要加入@vue的字首，這個命令將 @vue/eslint 解析為完整的包名 @vue/cli-plugin-eslint，然後從 npm 安裝它，呼叫它的生成器
外掛新增
vue add @vue/eslint
向被安裝的外掛傳遞生成器選項 (這樣做會跳過命令提示)
vue add @vue/eslint --config airbnb --lintOn save
第三方外掛安裝
安裝並呼叫 vue-cli-plugin-apollo，不帶 @vue 字首，該命令會換作解析一個 unscoped 的包
執行此命令後src裡會建立一個plugins資料夾，裡面會自動生成關於外掛的配置檔案
vue add axios
基於一個指定的 scope 使用第三方外掛，如果一個外掛名為 @foo/vue-cli-plugin-bar，你可以這樣新增它：
vue add @foo/bar
配置修改
例：向所有 Sass 樣式傳入共享的全域性變數
在根目錄新建一個vue.config.js，加入以下配置
module.exports = {
css: {
loaderOptions: {
// 給 sass-loader 傳遞選項
sass: {
// @/ 是 src/ 的別名
// 所以這裡假設你有 `src/variables.scss` 這個檔案
data: `@import "@/variables.scss";`
}
}
}
}
雖然官方說這個檔案會被 @vue/cli-service 自動載入，但如果你啟動專案用的是npm run serve，那麼你最好使用npx vue-cli-service serve重啟一下
參考文章
官方文件 https://cli.vuejs.org/zh/guide/
browserslist的github https://github.com/browserslist/browserslist
https://mp.weixin.qq.com/s/hfr2Q3FXZFIdqM_r8HrLwQ
轉載：https://www.jianshu.com/p/0d78ff9fe6ed