跳至主要內容

前端运行

fastbee2024年9月27日大约 2 分钟

一、打开前端项目

推荐使用 Visual Studio Code 开发工具，FastBee物联网平台的前后端在一个仓库，后端为 springboot 目录，前端为 vue 目录。开发工具中打开vue前端目录即可。

二、修改配置

修改根目录的 .env.development 文件,后端接口默认8080端口，mqtt消息服务器中 tcp协议端口默认8081，ws协议端口默认8083，wss协议通过nginx代理访问8083端口。

# 后端接口地址
VUE_APP_SERVER_API_URL = 'http://localhost:8080'

# Mqtt消息服务器连接地址
VUE_APP_MQTT_SERVER_URL = 'ws://localhost:8083/mqtt'

# 百度地图AK
VUE_APP_BAI_DU_AK = 'nAtaBg9FYzav6c8P9rF9qzsWZfT8O0PD'

提示

百度地图AK到 百度地图开放平台 申请。

三、安装依赖

配置修改完成后，开始安装依赖，可以通过重新指定 registry 来解决 npm 安装速度慢的问题。执行一下任一命令安装依赖：

npm install
npm install --registry=https://registry.npmmirror.com

提示

  • 强烈建议不要直接使用 cnpm 安装，会有各种诡异的 bug
  • NodeJs是V16以上版本运行后报错，可以执行以下命令，然后重新运行
    • windows系统：$env:NODE_OPTIONS="--openssl-legacy-provider"
    • mac系统/linux系统：export NODE_OPTIONS=--openssl-legacy-provider

四、运行

依赖安装成功后，执行以下命令本地启动项目

npm run dev

打开浏览器，输入：http://localhost:80 默认账户/密码 admin/admin123 。若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明环境搭建成功。

五、VSCode辅助插件

  1. i18n Ally：通过可视化操作的形式提高了开发者翻译多语言的效率
  2. JavaScript (ES6) code snippets：帮助开发者快速编写ES6（ECMAScript 2015）的代码片段
  3. Prettier - Code formatter：统一代码格式，确保代码的外观一致性，包括缩进、换行、引号等
  4. Vuter：为Vue单文件组件提供代码高亮和语法支持‌
  5. ESLint：监测JavaScript代码质量，帮助开发者提升编码能力
  6. vscode-icons：提供一套丰富且易于辨识的文件和文件夹图标，从而美化代码编辑环境，提高代码的可读性和视觉吸引力‌

注：根据开发习惯自行选择