使用Vue-Cli 4.x腳手架項目初步搭建

1. 前提：

node的版本要在8.11.0+，並配置好node 的環境變量

2. 如果之前電腦中安裝多其他版本的腳手架需要卸載掉其他的版本，重新安裝4.x版本

**npm uninstall -g vue-cli**

3. 安裝最新版本腳手架

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

安裝後查看腳手架的版本

**vue --version**  或  vue -V

注意：如果在使用命令行時出現

vue 不是內部或外部命令

需要在C盤根目錄下搜索

vue.cmd

然後找到node_global文件的vue.cmd; 講文件路徑添加到系統的環境變量path中

再運行剛纔的命令就可以了

4. 生成vue項目

在cmd中進入想要存放代碼的路徑然後輸入命令

 vue create 項目名

注意：項目名要小寫

項目名不能出現大寫字母

選擇 Manually select features 自定義配置
按空格鍵選中和反選

Babel (必選) 是一個 JavaScript 編譯器， Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。
TypeScript（項目中使用ts開發的話，可以勾選）
Progressive Web App (PWA) Support (接口緩存，優化項目) Progressive Web App其實嚴格說來不是一個產品，而是一種理念，或者叫打包產品，因爲他是把衆多能讓WEB產品APP化的能力的一個集合。三個特性：類APP交互，消息推送，離線緩存
Router 選擇是否使用路由 history router，其實直白來說就是是否路徑帶 # 號，建議選擇，否則服務器還要進行配置
Vuex Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。（如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗餘的。但是，如果您需要構建一箇中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成爲自然而然的選擇。）引用 Redux 的作者 Dan Abramov 的話說就是：Flux 架構就像眼鏡：您自會知道什麼時候需要它。
CSS Pre-processors (css預處理器，需要) CSS預處理器是一種專門的編程語言，用來爲CSS增加一些編程特性（CSS本身不是編程語言）。不需要考慮瀏覽器兼容問題，因爲CSS預處理器最終編譯和輸出的仍是標準的CSS樣式。可以在CSS預處理器中：使用變量、簡單邏輯判斷、函數等基本編程技巧。
Linter / Formatter (代碼格式，一般默認選中)
Unit Testing (代碼測試)
E2E Testing（需求界面測試）
然後回車
選擇scss預編譯語言（部分特性：繼承，嵌套，變量， mixin，函數功能，引用父元素& 等）
dart-sass 和 node-sass的區別
sass 官方目前主力推dart-sass 最新的特性都會在這個上面先實現
node-sass是自動編譯實時的，dart-sass需要保存後纔會生效
選擇 ESLint 代碼校驗規則，提供一個插件化的javascript代碼檢測工具，ESLint + Prettier 使用較多
然後選擇什麼時候進行代碼校驗，Lint on save 保存就檢查，Lint and fix on commit fix 或者 commit 的時候檢查，建議第一個
選擇單元測試，我選的是Jest
選擇存放babel,postcss,eslint這些配置文件
最後就是是否保存本次的配置了，N 不記錄，如果選擇 Y 需要輸入保存名字
.
然後開始vue的自動生成
生成成功界面
vue的簡單架子目錄結構
在瀏覽器裏輸入運行結束後的提示地址