哈嘍，大家好！一個不懂前端框架的程序員不是一個合格的程序員，最近學習了在vue的一些基礎語法后，想學習搭建vue項目，正好想到了用node.js來搭建vue項目，下面由我為大家來介紹詳細步驟!
一、安裝環境
1、本機系統：Windows 10 Pro（64位）
2、Node.js：v12.15.0LTS（64位）
二、安裝Node.js步驟
1、下載對應你系統的Node.js版本:https://nodejs.org/en/download/
2、選安裝目錄進行安裝
3、環境配置
4、測試
三、前期准備
1、Node.js簡介
簡單的說 Node.js 就是運行在服務端的 JavaScript。Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。Node.js 的包管理器 npm，是全球最大的開源庫生態系統。
2、下載Node.js
打開官網下載鏈接:https://nodejs.org/en/download/ ，我這里下載的是node-v11.3.0-x64.msi。
四、開始安裝
1、下載完成后，雙擊“node-v11.3.0-x64.msi”，開始安裝Node.js
一路點擊【Next】按鈕，其中安裝目錄自行選擇（不建議裝在C盤）
至此Node.js已經安裝完成，可以先進行下簡單的測試安裝是否成功了，后面還要進行環境配置
在鍵盤按下【win+R】鍵，輸入cmd，然后回車，打開cmd窗口
安裝完后,如下圖所示：
此處說明下：新版的Node.js已自帶npm，安裝Node.js時會一起安裝，npm的作用就是對Node.js依賴的包進行管理，也可以理解為用來安裝/卸載Node.js需要裝的東西
五、環境配置
說明：這里的環境配置主要配置的是npm安裝的全局模塊所在的路徑，以及緩存cache的路徑，之所以要配置，是因為以后在執行類似：npm install express [-g] （后面的可選參數-g，g代表global全局安裝的意思）的安裝語句時，會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中，占C盤空間，故而如圖所示
創建完兩個空文件夾，來定義安裝路徑：
之后，打開cmd命令窗口，輸入
npm config set prefix "E:\node.js\node\node_global"
npm config set cache "E:\node.js\node\node_cache"
六、測試
配置完后，建議更換下npm鏡像源，原因：由於node安裝插件是從國外服務器下載，受網絡影響大，速度慢且可能出現異常。所以如果npm的服務器在中國就好了，所以我們樂於分享的淘寶團隊（阿里巴巴旗下業務阿里雲）干了這事。來自官網：“這是一個完整 npmjs.org 鏡像，你可以用此代替官方版本(只讀)，同步頻率目前為 10分鍾 一次以保證盡量與官方服務同步。
也就是說我們可以使用阿里布置在國內的服務器來進行node安裝。
同理，在cmd命令下輸入 ：
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
最后安裝個module測試下，我們就安裝最常用的express模塊，打開cmd窗口，
輸入如下命令進行模塊的全局安裝：
npm install express -g # -g是全局安裝的意思
當然到了這里,不是意味着就結束了，接下來我們可以簡單學習下，使用node.js腳手架來搭建下vue項目，步驟如下
七、搭建vue項目
1.安裝工具，需要三步：
1）安裝vue淘寶鏡像
npm install -g cnpm --registry=https://registry.npm.taobao.org
2）安裝webpack
npm install webpack -g
3）安裝vue腳手架
npm install vue-cli -g
- 輸入命令vue init webpack my-vue 創建一個vue項目，其中my-vue是指項目名
注意：這一步在執行過程中經常會出現vue不是內部命令，不要慌，主要原因是，環境變量配置的
問題，具體的可以分別參考下這兩篇博文：
https://blog.csdn.net/rainbow8300/article/details/82861907，
https://blog.csdn.net/Anchor_CHEN/article/details/99944211
3.命令之后，繼續，會出現下面幾步，如圖所示：
?Project name test -----------項目名字叫test
? Project description A Vue.js project -----這是一個vue項目
? Author jh --------------作者叫jh
? Vue build standalone
? Install vue-router? Yes ------------是否安裝路由（這里不安裝的話也可以進去后手動安裝，一般默認安裝y）
? Use ESLint to lint your code? No -------是否使用ESLint 模式（這是嚴格模式會比較麻煩，新手建議不用，畢竟影響不大）
? Set up unit tests Yes -------- 是否設置單元測試，看需求，一般使用
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes ----nightwatch實現vue應用e2e測試
等待一會兒就等下載完之后就好了，如果下載過程中有問題使用cnpm install 一下，
之后進去剛剛新建的vue項目的根目錄下面，輸入npm run dev 之后就運行了
直接訪問 http://localhost:8080
至此，一個vue項目就新建完成了。
參考博文：