一、打開前端項(xiàng)目
推薦使用 Visual Studio Code 開發(fā)工具，F(xiàn)astBee物聯(lián)網(wǎng)平臺(tái)的前后端在一個(gè)倉庫，后端為 springboot 目錄，前端為 vue 目錄。開發(fā)工具中打開vue前端目錄即可。
二、修改配置
修改根目錄的 .env.development 文件,后端接口默認(rèn)8080端口，mqtt消息服務(wù)器中 tcp協(xié)議端口默認(rèn)8081，ws協(xié)議端口默認(rèn)8083，wss協(xié)議通過nginx代理訪問8083端口。
# 后端接口地址
VUE_APP_SERVER_API_URL = 'http://localhost:8080'
# Mqtt消息服務(wù)器連接地址
VUE_APP_MQTT_SERVER_URL = 'ws://localhost:8083/mqtt'
# 百度地圖AK
VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD'提示
百度地圖AK到 百度地圖開放平臺(tái) 申請(qǐng)。
三、安裝依賴
配置修改完成后，開始安裝依賴，可以通過重新指定 registry 來解決 npm 安裝速度慢的問題。執(zhí)行一下任一命令安裝依賴：
npm install
npm install --registry=https://registry.npmmirror.com提示
- 強(qiáng)烈建議不要直接使用 cnpm 安裝，會(huì)有各種詭異的 bug
- NodeJs是V16以上版本運(yùn)行后報(bào)錯(cuò)，可以執(zhí)行以下命令，然后重新運(yùn)行
- windows系統(tǒng)：
$env:NODE_OPTIONS="--openssl-legacy-provider" - mac系統(tǒng)/linux系統(tǒng)：
export NODE_OPTIONS=--openssl-legacy-provider
- windows系統(tǒng)：
四、運(yùn)行
依賴安裝成功后，執(zhí)行以下命令本地啟動(dòng)項(xiàng)目
npm run dev打開瀏覽器，輸入：http://localhost:80 默認(rèn)賬戶/密碼 admin/admin123 。若能正確展示登錄頁面，并能成功登錄，菜單及頁面展示正常，則表明環(huán)境搭建成功。
五、VSCode輔助插件
- i18n Ally：通過可視化操作的形式提高了開發(fā)者翻譯多語言的效率
- JavaScript (ES6) code snippets：幫助開發(fā)者快速編寫ES6（ECMAScript 2015）的代碼片段
- Prettier - Code formatter：統(tǒng)一代碼格式，確保代碼的外觀一致性，包括縮進(jìn)、換行、引號(hào)等
- Vuter：為Vue單文件組件提供代碼高亮和語法支持?
- ESLint：監(jiān)測(cè)JavaScript代碼質(zhì)量，幫助開發(fā)者提升編碼能力
- vscode-icons：提供一套豐富且易于辨識(shí)的文件和文件夾圖標(biāo)，從而美化代碼編輯環(huán)境，提高代碼的可讀性和視覺吸引力?
注：根據(jù)開發(fā)習(xí)慣自行選擇