vue-cli 3.x安裝配置步驟詳細說明

 

1、vue-cli 3.x簡單介紹

Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統：是一個相似於 create-react-app 的能夠用例命令行快速配置和生成一個 vue 項目。

CLI：@vue/cli 全局安裝的 npm 包，提供了終端裏的vue命令（如：vue create 、vue serve 、vue ui 等命令）

CLI 服務：@vue/cli-service是一個開發環境依賴。構建於 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）

CLI 插件：給Vue 項目提供可選功能的 npm 包 （如： Babel/TypeScript 轉譯、ESLint 集成、unit和 e2e測試 等）

具體工做：

1) 便捷的建立項目

2) 添加 vue 插件快速配置項目
3) 啓動服務調試開發

4) HTML和靜態資源 assets 的處理

5)配置 CSS ,配置 Webpack

6) 配置環境變量和環境模式: 針對不一樣環境進行打包, 發佈項目

2、使用安裝

一、node版本要求：vue cli 須要node版本>=8.9, （官方推薦：8.11.0+ ）。可以使用node -v 命令去檢測node的安裝版本，若是沒有安裝可到這裏安裝：

中文官方下載地址：http://nodejs.cn/download/ 

二、安裝@vue/cli（Vue CLI 3的包名稱由 vue-cli 改爲了 @vue/cli）

命名方式已經改成npm推薦的新的包名規則，使用做用域。

包名規則介紹：https://zcfy.cc/article/the-npm-blog-new-package-moniker-rules

1）命令執行：

2）安裝完成：

3）命令變化：可經過 vue -h 查看

1. create [options] <app-name> 建立一個由vue-cli-service支持的新項目
2. invoke <plugin> 在已建立的項目中添加插件
3. serve [options] [entry] 在開發者模式下以零配置運行一個js或vue文件
4. build [options] [entry] 在生產模式下以零配置構建一個js或vue文件
5. init <template> <app-name> 舊api 須要@vue/cli-init // 就是原來的vue-cli init <template> <app-name>

3、 搭建項目

一、命令：vue create project-name

******deMacBook-Pro:personal admin$ vue create cli-pro
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? No

 

能夠看到建立項目時會有個提示，會判斷你對npm/yarn源的鏈接速度，詢問你是否切換至淘寶鏡像

首先，會提示你選擇一個preset（預設）

? Please pick a preset:
> default (babel, eslint)  //默認
> Manually select features //手動選擇功能

1）default路線
1）default路線

Pick the package manager to use when installing dependencies: //用哪一個下載依賴
> Use Yarn
  Use NPM

安裝完成：

Vue CLI v3.2.1
✨  Creating project in /Users/admin/personal/cli-pro.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...


> fsevents@1.2.4 install /Users/admin/personal/cli-pro/node_modules/fsevents
> node install

[fsevents] Success: "/Users/admin/personal/cli-pro/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> yorkie@2.0.0 install /Users/admin/personal/cli-pro/node_modules/yorkie
> node bin/install.js

setting up Git hooks
done

added 1178 packages in 99.23s
🚀  Invoking generators...
📦  Installing additional dependencies...

added 26 packages, updated 2 packages and moved 5 packages in 10.788s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project cli-pro.
👉  Get started with the following commands:

 $ cd cli-pro
 $ npm run serve

 

進入項目文件，啓動項目：

*****deMacBook-Pro:personal admin$ cd cli-pro
*****deMacBook-Pro:cli-pro admin$ npm run serve

> cli-pro@0.1.0 serve /Users/admin/personal/cli-pro
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin                                                .  
 DONE  Compiled successfully in 3194ms                                  18:30:54

 
  App running at:
  - Local:   http://localhost:8082/ 
  - Network: http://192.168.xxx.xxx:8082/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

2）Manually 路線：自定義路線

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) TypeScript                                 // JavaScript的一個超集（添加了可選的靜態類型和基於類的面向對象編程：類型批註和編譯時類型檢查、類、接口、模塊、lambda 函數）
 ( ) Progressive Web App (PWA) Support          // 漸進式Web應用程序
 ( ) Router                                     // vue-router（vue路由）
 ( ) Vuex                                       // vuex（vue的狀態管理模式）
 ( ) CSS Pre-processors                         // CSS 預處理器（如：less、sass）
 ( ) Linter / Formatter                         // 代碼風格檢查和格式化（如：ESlint）
 ( ) Unit Testing                               // 單元測試（unit tests）
 ( ) E2E Testing                                // e2e（end to end） 測試

① 路由選擇：

 首先會讓你選擇是否使用history router：Vue-Router 利用了瀏覽器自身的hash 模式和 history 模式的特性來實現前端路由（經過調用瀏覽器提供的接口）

hash： 瀏覽器url址欄 中的 # 符號（如這個 URL：http://www.abc.com/#/hello，hash 的值爲「 #/hello」），hash 不被包括在 HTTP 請求中（對後端徹底沒有影響），所以改變 hash 不會從新加載頁面

history：利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法（須要特定瀏覽器支持）

? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors, Linter
? Use history mode for router? (Requires proper server setup for index fallback 
in production) No

② css預處理器：主要爲css解決瀏覽器兼容、簡化CSS代碼 等問題

? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> SCSS/SASS  //Sass安裝須要Ruby環境，是在服務端處理的，SCSS 是 Sass3新語法（徹底兼容 CSS3且繼承Sass功能）
  LESS       //Less最終會經過編譯處理輸出css到瀏覽器，Less 既能夠在客戶端上運行，也可在服務端運行 (藉助 Node.js)
  Stylus     //Stylus主要用來給Node項目進行CSS預處理支持，Stylus功能上更爲強壯，和js聯繫更加緊密，可建立健壯的、動態的的CSS。

③ ESLint：提供一個插件化的javascript代碼檢測工具

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only  //只有錯誤預防
  ESLint + Airbnb config   //Airbnb 配置
  ESLint + Standard config  //標準配置
  ESLint + Prettier         //使用較多  (漂亮的配置)

 ④  什麼時候檢測：

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save                    // 保存就檢測
 ( ) Lint and fix on commit          // fix和commit時候檢查

  ⑤  單元測試 ：

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai  //mocha靈活,只提供簡單的測試結構，若是須要其餘功能須要添加其餘庫/插件完成。必須在全局環境中安裝
  Jest          //安裝配置簡單，容易上手。內置Istanbul，能夠查看到測試覆蓋率，相較於Mocha:配置簡潔、測試代碼簡潔、易於和babel集成、內置豐富的expect

⑥   如何存放配置 

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 獨立文件放置
  In package.json // 放package.json裏

 ⑦   是否保存本次配置（以後能夠直接使用）：

? Save this as a preset for future projects? (Y/n) // y:記錄本次配置，而後須要你起個名; n：不記錄本次配置

4、項目結構區別

1. 文件的精簡度

vue cli 3的目錄結構圖

vue cli 2.x 的目錄結構

2. 詳細的配置區別：

  1）vuex（狀態管理）：

 vue cli 2 中：vuex是搭建完成後本身npm install的，並不包括在搭建過程當中。能夠看到vue cli 2的vuex文件夾（store）又包含了三個js文件：action（存放一些調用外部API接口的異步執行的的方法，而後commit mutations改變mutations 數據）、index（初始化mutations 數據，是store的出口）、mutations（處理數據邏輯的同步執行的方法的集合，Vuex中store數據改變的惟一方法commit mutations）

vue cli 3 中：vuex是包含在搭建過程供選擇的預設。vue cli 3 中的只用一個store.js代替了原來的store文件夾中的三個js文件

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state: {
        // 初始化狀態
        count: 0
    },
    mutations: {
        // 處理狀態
        increment(state, payload) {
            state.count += payload.step
        }
    },
    actions: {
        // 提交改變後的狀態
        increment (context) {
            context.commit('increment')
        }
    }
})

2）去掉 static  、 新增 public 文件夾

vue cli 2 ：static 是 webpack 默認存放靜態資源的文件夾，打包時會直接複製一份到dist文件夾不會通過 webpack 編譯 

vue cli 3  ：摒棄 static 新增了 public 。vue cli 3 中「靜態資源」兩種處理方式：

   經webpack 處理：在 JavaScript 被導入或在 template/CSS 中經過「相對路徑」被引用的資源會被編譯並壓縮

   不經webpack 處理：放置在 public 目錄下或經過絕對路徑被引用的資源將會「直接被拷貝」一份，不作任何編譯壓縮處理

3） index.html ：

vue cli 2 ：「index.html 」 

vue cli 3 ：「public/index.html 」此模板會被 html-webpack-plugin 處理的

4） src/views：vue cli 3 的 src文件夾 新增 views文件夾 用來存放 「頁面」，區分 components（組件）

5） 去掉 build（根據config中的配置來定義規則）、config（配置不一樣環境的參數）文件夾 ：

 vue cli 3 中 ，這些配置 你能夠經過 命令行參數、或 vue.config.js （在根目錄 新建一個 vue.config.js 同名文件）裏的 devServer 字段配置開發服務器 

6） babel.config.js：配置Babel 。Vue CLI 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不一樣，這個配置文件不會使用基於文件位置的方案，而是會一致地運用到項目根目錄如下的全部文件，包括 node_modules 內部的依賴。官方推薦在 Vue CLI 項目中始終使用 babel.config.js 取代其它格式。

7） 根目錄的一些其餘文件的改變：以前全部的配置文件都在vue create 搭建時preset預設 或者 後期能夠經過 命令參數 、 vue.config.js 中配置

根據須要在根目錄下新建 vue.config.js自行配置 ：https://cli.vuejs.org/zh/config/

 ps: 在3代中，webpack的配置已經被腳手架默認了，並不會顯示。若是咱們須要手動配置webpack的一些配置，能夠在根目錄下，手動建立配置文件---vue.config.js。