轉(zhuǎn)載自：https://www.cnblogs.com/ysx215/p/14107054.html
1. 準備工作
1.1 安裝node.js
安裝過程很簡單户辞，在官網(wǎng)下載安裝包混萝，點擊安裝，一直下一步直到安裝完成即可期奔，新版本的node.js會自動添加環(huán)境變量厅须，不需要再手動添加環(huán)境變量仿畸，如有疑問，可自行前往環(huán)境變量查看朗和。
node.js官網(wǎng)：https://nodejs.org/zh-cn/
出現(xiàn)下圖所示表示node安裝完成错沽。
1.2 檢查安裝的node.js是否成功及其版本號
進入cmd（Windows+R進入運行界面，輸入cmd回車即可）窗口眶拉，在cmd窗口中輸入命令：
node -v
若出現(xiàn)node.js的版本號千埃，則表示node.js安裝成功。如下圖所示
1.3 檢查npm版本忆植，并修改鏡像為淘寶鏡像
安裝node后會自動安裝npm放可，可以通過命令查看npm的版本號
npm -v
若出現(xiàn)npm的版本號，即表示npm已經(jīng)安裝成功朝刊，如下圖所示
在命令行輸入如下命令耀里，配置npm鏡像為淘寶鏡像
npm config set registry https://registry.npm.taobao.org
設置之后可通過如下命令查看是否成功配置為淘寶鏡像
npm config get registry
若出現(xiàn)淘寶鏡像的URL路徑則表示配置淘寶鏡像成功，如下圖所示
當然拾氓，也可以安裝cnpm冯挎，通過cnpm來執(zhí)行npm命令，安裝cnpm命令如下
npm install -g cnpm --registry=https://registry.npm.taobao.org
//--registry=https://registry.npm.taobao.org 為淘寶的鏡像地址咙鞍，下載過慢時可以添加此地址
cnpm -v //查看cnpm是否安裝成功及其版本號织堂，若出現(xiàn)版本號則表示安裝成功叠艳。
出現(xiàn)如下圖所示，表示環(huán)境準備工作完成
2. 安裝vue-cli4.5
因為vue-cli4.5和之前的3.0以下的老版本不一樣易阳，安裝命令也有所不同附较。
npm install -g @vue/cli //全局安裝vue-cli最新版本
安裝過程中若下載過慢，可以使用cnpm進行安裝潦俺，或采取上述方式拒课，在命令后加上淘寶鏡像地址
安裝之后查看vue-cli是否安裝成功及其版本號
vue -V //注意，此時需要使用大寫的-V事示，小寫的-v
出現(xiàn)下圖所示表示vue腳手架（vue-cli4.5）安裝成功
3. 創(chuàng)建vue項目
3.1 進入創(chuàng)建項目目錄
根據(jù)自己的需要進入想要創(chuàng)建vue項目的目錄早像，然后通過cmd窗口執(zhí)行命令
（可通過在目錄窗口上方的路徑地址欄中輸入cmd進入當前目錄，也可以從c盤逐步進入當前目錄）
vue create test001 //創(chuàng)建項目肖爵，test001位項目名卢鹦，項目名中不允許出現(xiàn)大寫字母
3.2 選擇自定義配置
通過鍵盤中的向下箭頭控制，選擇 Manually select features 手動配置
如下圖所示劝堪。
手動配置選項解釋
| 序號 | 選項 | 描述 | 選擇 |
|---|---|---|---|
| 1 | Choose Vue version | 選擇Vue版本 | Y |
| 2 | Babel | vue項目中普遍使用es6語法冀自，但有時我們的項目需要兼容低版本瀏覽器，這時就需要引入babel插件秒啦，將es6轉(zhuǎn)成es5 | Y |
| 3 | TypeScript | TypeScript通過添加類型來擴展JavaScript熬粗。通過了解JavaScript，TypeScript可以節(jié)省您捕獲錯誤的時間并在運行代碼之前提供修復余境。任何瀏覽器驻呐，任何操作系統(tǒng)，任何運行JavaScript的地方芳来。 完全開源 | |
| 4 | Progressive Web App (PWA) Support | 漸進式Web應用程序（PWA）支持 | |
| 5 | Router | 路由 | |
| 6 | Vuex | Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式含末。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化 | |
| 7 | CSS Pre-processors | CSS預處理器即舌，預處理器：比如要用sass或者cssNext就要按照人家規(guī)定的語法形式佣盒，就是用人家的語法去編寫，然后人家把你編寫的代碼轉(zhuǎn)成css侥涵。 | |
| 8 | Linter / Formatter | 格式化程序 | Y |
| 9 | Unit Testing | 單元測試 | |
| 10 | E2E Testing | 端到端（end-to-end） |
3.3 選擇手動配置中的選項
向上向下箭頭控制方向沼撕，空格進行選中，可選擇如下配置芜飘，引入Router 和vuex以及CSS預處理器务豺，選擇完成回車即可
3.4 選擇vue版本
因為 vue 3還沒有正式發(fā)布，建議非嘗鮮項目選擇 vue 2.x嗦明。
3.5 選擇是否使用歷史模式
此處建議選擇不使用笼沥，即輸入N，選擇使用hash模式
3.6 選擇CSS預處理器
此處建議選擇 Sass/SCSS(with dart-sass)，即直接選擇回車即可奔浅。
node-sass是自動編譯實時的馆纳，dart-sass需要保存后才會生效
3.7 選擇eslint 校驗規(guī)則
此處建議選擇默認配置，即直接回車即可汹桦。
3.8 選擇什么時候進行代碼校驗
此處建議選擇第一個鲁驶，即直接回車即可
Lint on save 保存時檢查， Lint and fix on commit 提交時檢查
3.9 選擇如何存放配置
此處一般選擇默認配置舞骆，即直接回車
In dedicated config files 存放到獨立文件中钥弯，In package.json 存放到 package.json 中
3.10 選擇是否保存本次配置
建議選擇N，即不保存督禽，否則以后創(chuàng)建項目修改不配置不太方便
3.11 等待創(chuàng)建項目
若出現(xiàn)如下界面脆霎，表示項目創(chuàng)建完成。
4. 運行創(chuàng)建的vue項目
4.1 進入創(chuàng)建的vue項目的目錄
此處選擇進入test001(即創(chuàng)建的項目test001的目錄)
4.2 在項目目錄下執(zhí)行命令運行項目
npm run serve
出現(xiàn)如下頁面表示運行成功狈惫。
4.3 在瀏覽器中查看項目運行是否成功
在瀏覽器中打開上述vue項目部署的地址睛蛛，看到下圖所示即表示項目創(chuàng)建運行成功。
5. 也可以通過vscode打開項目胧谈，并運行項目
5.1 打開文件夾
在頁面左上角選擇File,在下拉菜單中選擇 Open Folder
5.2 打開控制臺
找到項目所在目錄忆肾，打開，然后在頁面上方選擇打開新的控制臺（Terminal）
npm run serve //在控制臺輸入此命令即可
5.3查看項目是否運行成功
點擊項目部署地址在瀏覽器中打開第岖，若出現(xiàn)如下圖所示頁面难菌，表示項目創(chuàng)建運行成功
