【可视化大屏开发】1.基础开发环境准备

1.开发工具介绍：

1.1 IDEA2023.2

1.2 node-v18.12.1-x64.msi

网盘地址：

链接：百度网盘 请输入提取码

提取码：u57r

2.安装、配置node.js

2.1 双击node-v18.12.1-x64.msi进行安装（要设置安装路径，尽量别安在C盘）

2.2 快捷键：win+R 然后输入cmd进入cmd窗口检测是否安装成功

node -v
npm -v

2.3 配置NPM

2.3.1 缓存目录和全局目录

npm config set prefix "D:\JavaProjects\nodejs\node_globals" //配置全局模块存放路径

npm config set cache "D:\JavaProjects\nodejs\node_cache"   //cache路径

npm config get prefix //查看全局模块路径

npm config get cache  //查看cache路径

2.3.2 在cmd窗口安装cnpm

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

2.3.3 升级npm到9.4.2

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

3.实现less文件保存后自动生成css文件

新开cmd进入node全局路径后执行以下命令

cnpm i less -g

4.在IDEA中创建新项目

这里我采用的方案是直接新建SpringBoot+Maven项目，一步到位，不再新建Module模块

Module的SpringBoot版本和依赖选择

配置maven

5.安装插件

5.1 安装px2rem插件

5.2 安装File Wathchers插件

5.3 重启IDEA

5.4 配置less文件自动生成css文件

将less的作用域修改为全局

5.5 在application.properties 文件中【view模块中resources中】，加入数据库连接，备用

spring.datasource.driver-class-name= com.mysql.jdbc.Driver

spring.datasource.url= jdbc:mysql://"你的MySQL所在服务器IP":3306/bigdata_db?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8

spring.datasource.username = 用户名
spring.datasource.password = 密码

添加MySQL依赖

至此，基础环境准备OK。