1. 准備工作
1.1 安裝node.js
安裝過程很簡單，在官網下載安裝包，點擊安裝，一直下一步直到安裝完成即可，新版本的node.js會自動添加環境變量，不需要再手動添加環境變量，如有疑問，可自行前往環境變量查看。
node.js官網：https://nodejs.org/zh-cn/
出現下圖所示表示node安裝完成。
1.2 檢查安裝的node.js是否成功及其版本號
進入cmd（Windows+R進入運行界面，輸入cmd回車即可）窗口，在cmd窗口中輸入命令：
node -v
若出現node.js的版本號，則表示node.js安裝成功。如下圖所示
1.3 檢查npm版本，並修改鏡像為淘寶鏡像
安裝node后會自動安裝npm，可以通過命令查看npm的版本號
npm -v
若出現npm的版本號，即表示npm已經安裝成功，如下圖所示
在命令行輸入如下命令，配置npm鏡像為淘寶鏡像
npm config set registry https://registry.npm.taobao.org
設置之后可通過如下命令查看是否成功配置為淘寶鏡像
npm config get registry
若出現淘寶鏡像的URL路徑則表示配置淘寶鏡像成功，如下圖所示
當然，也可以安裝cnpm，通過cnpm來執行npm命令，安裝cnpm命令如下
npm install -g cnpm --registry=https://registry.npm.taobao.org
//--registry=https://registry.npm.taobao.org 為淘寶的鏡像地址，下載過慢時可以添加此地址
cnpm -v //查看cnpm是否安裝成功及其版本號，若出現版本號則表示安裝成功。
出現如下圖所示，表示環境准備工作完成
2. 安裝vue-cli4.5
因為vue-cli4.5和之前的3.0以下的老版本不一樣，安裝命令也有所不同。
npm install -g @vue/cli //全局安裝vue-cli最新版本
安裝過程中若下載過慢，可以使用cnpm進行安裝，或采取上述方式，在命令后加上淘寶鏡像地址
安裝之后查看vue-cli是否安裝成功及其版本號
vue -V //注意，此時需要使用大寫的-V，小寫的-v
出現下圖所示表示vue腳手架（vue-cli4.5）安裝成功
3. 創建vue項目
3.1 進入創建項目目錄
根據自己的需要進入想要創建vue項目的目錄，然后通過cmd窗口執行命令
（可通過在目錄窗口上方的路徑地址欄中輸入cmd進入當前目錄，也可以從c盤逐步進入當前目錄）
vue create test001 //創建項目，test001位項目名，項目名中不允許出現大寫字母
3.2 選擇自定義配置
通過鍵盤中的向下箭頭控制，選擇 Manually select features 手動配置
如下圖所示。
手動配置選項解釋
| 序號 | 選項 | 描述 | 選擇 |
|---|---|---|---|
| 1 | Choose Vue version | 選擇Vue版本 | Y |
| 2 | Babel | vue項目中普遍使用es6語法，但有時我們的項目需要兼容低版本瀏覽器，這時就需要引入babel插件，將es6轉成es5 | Y |
| 3 | TypeScript | TypeScript通過添加類型來擴展JavaScript。通過了解JavaScript，TypeScript可以節省您捕獲錯誤的時間並在運行代碼之前提供修復。任何瀏覽器，任何操作系統，任何運行JavaScript的地方。 完全開源 | |
| 4 | Progressive Web App (PWA) Support | 漸進式Web應用程序（PWA）支持 | |
| 5 | Router | 路由 | |
| 6 | Vuex | Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化 | |
| 7 | CSS Pre-processors | CSS預處理器，預處理器：比如要用sass或者cssNext就要按照人家規定的語法形式，就是用人家的語法去編寫，然后人家把你編寫的代碼轉成css。 | |
| 8 | Linter / Formatter | 格式化程序 | Y |
| 9 | Unit Testing | 單元測試 | |
| 10 | E2E Testing | 端到端（end-to-end） |
3.3 選擇手動配置中的選項
向上向下箭頭控制方向，空格進行選中，可選擇如下配置，引入Router 和vuex以及CSS預處理器，選擇完成回車即可
3.4 選擇vue版本
因為 vue 3的生態目前還不太健全，建議非嘗鮮項目選擇 vue 2.x。
3.5 選擇是否使用歷史模式
此處建議選擇不使用，即輸入N，選擇使用hash模式
3.6 選擇CSS預處理器
此處建議選擇 Sass/SCSS(with dart-sass)，即直接選擇回車即可。
node-sass是自動編譯實時的，dart-sass需要保存后才會生效
3.7 選擇eslint 校驗規則
此處建議選擇默認配置，即直接回車即可。
3.8 選擇什么時候進行代碼校驗
此處建議選擇第一個，即直接回車即可
Lint on save 保存時檢查， Lint and fix on commit 提交時檢查
3.9 選擇如何存放配置
此處建議選擇第二個配置，即存放到package.json文件中。
In dedicated config files 存放到獨立文件中，In package.json 存放到 package.json 中
3.10 選擇是否保存本次配置
建議選擇N，即不保存，否則以后創建項目修改不配置不太方便
3.11 等待創建項目
若出現如下界面，表示項目創建完成。
4. 運行創建的vue項目
4.1 進入創建的vue項目的目錄
此處選擇進入test001(即創建的項目test001的目錄)
4.2 在項目目錄下執行命令運行項目
npm run serve
出現如下頁面表示運行成功。
4.3 在瀏覽器中查看項目運行是否成功
在瀏覽器中打開上述vue項目部署的地址，看到下圖所示即表示項目創建運行成功。
5. 也可以通過vscode打開項目，並運行項目
5.1 打開文件夾
在頁面左上角選擇File,在下拉菜單中選擇 Open Folder
5.2 打開控制台
找到項目所在目錄，打開，然后在頁面上方選擇打開新的控制台（Terminal）
npm run serve //在控制台輸入此命令即可
5.3查看項目是否運行成功
點擊項目部署地址在瀏覽器中打開，若出現如下圖所示頁面，表示項目創建運行成功
