vue-cli3搭建項目步驟

 

全局安裝3.x版本腳手架：npm install -g @vue/cli

確認安裝成功沒：vue -V（注意這里是大寫的“V”）

 

全局安裝webpack：npm install -g webpack

腳手架安裝過程中會問問要不要安裝webpack-cli，webpack4開始多了個獨立包webpack-cli

這里建議選擇no等會自己cnpm淘寶鏡像安裝，不然非常慢

 

淘寶鏡像安裝webpack-cli：cnpm install -g webpack
確認安裝成功沒：webpack-cli -v

 

 用腳手架創建vue項目：vue create my-project

 

安裝預設：

 Manually select features (自定義配置，一般都選這個)

 

 鍵盤上下箭頭控制方向，空格鍵確定/取消勾選，回車鍵確定配置選擇

 

 

選項	描述	安裝建議
Choose Vue version	選擇Vue版本：2.x、3.x	建議選擇
Babel	ES6轉ES5	必選的
TypeScript	項目用TypeScript	想用就裝
Progressive Web App (PWA) Support	漸進式Web應用	一般不裝
Router	路由	必選的
Vuex	狀態管理	大項目才用
CSS Pre-processors	CSS預處理器，sass會用得上	需要sass就裝
Linter / Formatter	代碼格式化程序（就是ESLint）	語法檢查基本都需要的
Unit Testing	單元測試	一般不裝
E2E Testing	端到端測試	一般不裝

// === TypeScript ======
Use class-style component syntax？是否使用class風格的組件語法
react 16版本都推薦function conponent；class component不再是主流
至於放棄原因百度很多解釋就不在這展開了
vue2+ts可以用class component；vue3直接上function conponent
總結：不裝

 

use babel alongside typescript for auto-detected polyfills?是否使用babel做轉義

https://blog.csdn.net/viliyer/article/details/107243841

 總結：安裝

 

 // === Router路由 ======

Use history mode for router?是否使用 history 模式
YES：history模式，URL 無 # 符號，但是需要后台配置支持
NO：hash模式，URL 有 # 符號，但 # 符號並不包含在 HTTP 請求中
history模式官網說明：https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子
總結：用不用都可以，自己的小項目無無后台就用hash，后台提供支持就history

 

// === CSS預編譯 ======

dart-sass 和 node-sass 的區別https://segmentfault.com/a/1190000037553344
node-sass 是用 node(調用 cpp 編寫的 libsass)來編譯 sass；
dart-sass：保存后生效，用 drat VM 來編譯 sass；
node-sass：自動實時編譯； 用node(調用 cpp 編寫的 libsass)來編譯 sass
總結：推薦選第一個Sass/SCSS (with dart-sass) ，dart-sass 性能好sass官方推薦使用

 

 // === ESLint ======

第1個：使用ESLint官網規則，這些規則在這里添加鏈接描述
第2個：使用ESLint官網規則 + Airbnb 第三方的配置
第3個：使用ESLint官網規則 + Standard 第三方的配置

總結：推薦選第一個

 

在什么時候進行ESLint檢測：

第1個：保存時檢測

第2個：提交時檢測

總結：推薦選第一個，保存時檢測

 

 在什么位置保存ESLint配置文件：

 

第1個：獨立保存為 config 文件
第2個：全部保存在 package.json 文件
總結：推薦選第一個，獨立保存為 config 文件

 

 是否保存本次配置以便於下次使用：

 

 總結：自行決定把，這個無所謂的

 

以上就是常規搭建項目過程