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


 

一、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 之上(提供 如:servebuild 和 inspect 命令)

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

具體工作:

1) 便捷的創建項目

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

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

5)配置 CSS ,配置 Webpack

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

二、使用安裝

1、node版本要求:vue cli 需要node版本>=8.9, (官方推薦:8.11.0+ )。可使用node -v 命令去檢測node的安裝版本,如果沒有安裝可到這里安裝:

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

2、安裝@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>

三、 搭建項目

1、命令: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路線
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:不記錄本次配置

四、項目結構區別

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。

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM