vue-cli介紹

https://cli.vuejs.org/zh/guide/installation.html

安裝vue-cli4

npm install -g @vue/cli
# OR
yarn global add @vue/cli

vue --version  //查看版本

vue create hello-world //創建一個項目

image

安裝和vue-cli3.0的是一模一樣的，對比了一下3.0的腳手架，除了目錄發生變化一些，其他的都一樣

image

image

** 安裝步驟和vue-cli3.0的一模一樣**

1.創建項目

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">vue create project-name</pre>

image

default 是 使用默認配置

Manually select features 是 自定義配置

2.選擇配置（自定義配置）

image

3.選擇css預編譯，這里我選擇SCSS

image

4. 語法檢測工具，這里我選擇ESLint + Prettier

image

5.選擇語法檢查方式，這里我選擇保存就檢測

image

6.接下來會問你把babel,postcss,eslint這些配置文件放哪，這里隨便選，

image

7.鍵入N不記錄，如果鍵入Y需要輸入保存名字

image

8.項目創建好后

<pre style="margin: 0px; padding: 0px; white-space: pre-wrap; overflow-wrap: break-word; font-family: "Courier New" !important; font-size: 12px !important;">cd project-name // 進入項目根目錄
npm run serve // 運行項目</pre>

9.然后在瀏覽器輸入http://localhost:8080,就可以看到運行的界面了

image

vue-cli3 新增

關于安裝

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等一系列的配置文件，這些配置文件都被放在了node_modules@vue文件下

browserslist

根目錄中多了一個.browserslist文件，可以指定項目的目標瀏覽器的范圍
用于轉譯的 JavaScript 特性和添加CSS 瀏覽器前綴，可以減少兼容代碼提高代碼質量
如果想少一個文件，你也可以在package.json中添加browserslist字段，參數是一個數組

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

使用 npx browserslist 可以查看項目的瀏覽器兼容情況
將需要支持的目標瀏覽器參數放在文件中就好

更多請查看官方文檔

vue-cli服務

在一個 Vue CLI 項目中，@vue/cli-service 安裝了一個名為 vue-cli-service 的命令。
你可以在 npm scripts 中以 vue-cli-service、或者從終端中以 ./node_modules/.bin/vue-cli-service 訪問這個命令
Vue CLI 項目有三個模式： development 模式用于啟動，production 模式用于打包和e2e測試，test 模式用于unit測試

啟動
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 會根據構建統計生成報告，它會幫助你分析包中包含的模塊們的大小

測試
 test: vue-cli-service test:e2e  端到端測試
         vue-cli-service test:unit  單元測試

現代模式

為了兼容那些不支持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.config.js文件中加入'baseUrl: './''

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

雖然官方說這個文件會被 @vue/cli-service 自動加載，但如果你啟動項目用的是npm run serve，那么你最好使用npx vue-cli-service serve重啟一下