最新在學習vue，自己總結一下使用vue的腳手架搭建前端工程的步驟

1.下載Nodejs

https://nodejs.org/en/

安裝完成後 使用管理員許可權開啟cmd

使用 node -v 和 npm -v 驗證是否安裝成果

修改npm的本地倉庫（可選）

npm config set prefix  "D:\Program Files\nodejs\node_global"
npm config set cache  "D:\Program Files\nodejs\node_cache"

不修改依賴預設安裝在 C:\Users\電腦使用者名稱\AppData\Roaming\npm-cache 和 npm中

2.將npm更新到最新版

npm install npm –g

3.安裝淘寶映象

npm install -g cnpm --registry=https://registry.npm.taobao.org

可用 npm config list 檢視配置列表

4.設定使用淘寶映象

npm config set registry https://registry.npm.taobao.org

5.安裝express

npm install -g express

6.安裝webpack

npm install -g webpack

7.安裝vue-cli

npm install -g vue-cli

安裝完之後使用 vue -V 驗證是否安裝成果 注意！是大寫的V

如果提示命令不是內部命令，需要配置一下環境變數，如果按照上面步驟修改了本地倉庫，則將node_global目錄配置到環境變數，如下圖

如果本地倉庫未作修改，則將 C:\Users\電腦使用者名稱\AppData\Roaming\npm（AppData是隱藏目錄，找到自己電腦的npm目錄） 配置到環境變數

8.使用腳手架建立vue專案

由於第一次建立專案需要下載模板，不是使用淘寶的映象，我們在建立前執行下面命令

cnpm install --save-dev webpack

然後使用下面命令建立專案

vue init webpack 專案名

• Project name (baoge)： -----專案名稱，直接回車，按照括號中預設名字（注意這裡的名字不能有大寫字母，如果有會報錯Sorry, name can no longer contain capital letters），阮一峰老師部落格為什麼檔名要小寫，可以參考一下。
• Project description (A Vue.js project)： ----專案描述，也可直接點選回車，使用預設名字
• Author ()： ----作者，輸入你的大名
  接下來會讓使用者選擇：
• Runtime + Compiler: recommended for most users 執行加編譯，既然已經說了推薦，就選它了
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅執行時，已經有推薦了就選擇第一個了
• Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數情況下都使用，這裡就輸入“y”後回車即可。
• Use ESLint to lint your code? (Y/n) 是否使用ESLint管理程式碼，ESLint是個程式碼風格管理工具，是用來統一程式碼風格的，一般專案中都會使用。
  接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預設，編寫vue專案時的程式碼風格，直接y回車
• Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試，我選擇安裝y回車
• Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車

最後執行

npm run dev 或  npm start

訪問 localhost:8080, 看到這個頁面說明搭建成果

參考：

https://www.cnblogs.com/ming1025/p/9887247.html

https://blog.csdn.net/wjnf012/article/details/80422313

https://blog.csdn.net/qq_32352777/article/details/86585110?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf

https://www.cnblogs.com/651434092qq/p/11090737.html