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”字就說明項目已經構建完畢了。

 

 

返回目錄

 

git代碼地址：https://github.com/carter659/spring-boot-vue-element.git

 

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

有可能就是你的一點打賞會讓我的博客寫的更好:)