spring boot + vue + element-ui全棧開發入門——windows開發環境

一、node.js開發環境

windows系統，去網站https://nodejs.org/en/download/，下載對應的安裝程式，並安裝Windows Installer (.msi)

接下來，開始配置環境變數。

1.配置“NODE_HOME”為：“D:\Program Files (x86)\nodejs”

我這裡，node.js安裝在“D:\Program Files (x86)\nodejs”目錄下，這根據你的具體安裝路徑而設定。

2.配置“NODE_PATH”為： %NODE_HOME%\node_modules

這關係到使用npm的命令，如果配置錯了，安裝的node依賴的目錄就不正確。

3.配置Path，追加 ;%NODE_HOME%\;%NODE_PATH%\; 這兩項

4.檢測環境

在CMD中輸入 node -v 和 npm -v

如果出現版本號，則說明安裝成功

我這裡安裝的node.js版本是6.11.4，npm的版本是5.6

二、Vue環境

1.安裝cnpm淘寶映象

參照https://npm.taobao.org/

在CMD中執行

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

2.安裝Vue腳手架

cnpm install -g webpack

cnpm install -g vue-cli

這裡的“-g”是全域性安裝，其目的是為了構建vue專案

3.構建專案

假設我們要開發一個“後臺管理”的專案，專案名稱是“admin”

在CMD中執行命令：

vue init webpack admin

其中語法為： vue init webpack + 專案名

然後，一路回車：

這裡，我沒有開啟ESLint，單元測試也暫不啟用。

出現提示執行命令，就說明已經構建成功了。

npm install命令是：安裝所需要的依賴；

npm run dev命令是：以開發模式啟動專案；

npm run build命令是：以生產模式生成靜態頁面檔案。

然後，進入資料夾，安裝依賴：

cd admin
cnpm install

最後執行

npm run dev 命令來啟動專案

這時，提示開啟瀏覽器，訪問http://localhost:8080

ok，出現大大的“V”字就說明專案已經構建完畢了。

如果你覺得我的部落格對你有幫助，可以給我點兒打賞，左側微信，右側支付寶。

有可能就是你的一點打賞會讓我的部落格寫的更好:)

相關文章