记录：376
场景：使用IntelliJ IDEA搭建datax-web-ui开发环境。使用VSCode搭建datax-web-ui开发环境。
版本：
node-v14.17.3
npm-6.14.13
datax-web-ui开源地址：https://github.com/WeiYe-Jing/datax-web-ui
一、使用IntelliJ IDEA搭建datax-web-ui开发环境
1.安装nodejs和npm
1.1下载地址
本例版本：https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
1.2下载包
下载地址：https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
解析：下载包名称node-v14.17.3-x64.msi。
1.3安装
根据安装向导安装即可。
本例安装目录：D:\Program Files\nodejs
在安装目录下，已经包含了node和npm。
1.4配置环境变量
依次点击和选择：此电脑->属性->高级系统设置->环境变量->系统变量
变量名称：Path
添加变量：D:\Program Files\nodejs\
2.下载源码
下载发布版本datax-web-ui-v-2.1.2。
源码地址：https://github.com/WeiYe-Jing/datax-web-ui/
2.1浏览器直接下载
地址：https://github.com/WeiYe-Jing/datax-web-ui/archive/refs/tags/v-2.1.2.zip
解析：直接在浏览器中输入地址就能下载。
2.2使用Git下载
命令：git clone [email protected]:WeiYe-Jing/datax-web-ui.git
3.解压包
解压包到：D:\dev\ForDx\datax-web-ui
4.使用IntelliJ IDEA打开源码工程
IntelliJ IDEA编辑器支持编写前端代码。
IntelliJ IDEA编辑器可以添加前端需求的插件。
IntelliJ IDEA编辑器的命令行终端Terminal可以执行前端相关命令。
5.安装插件
依次点击和选择：File->Settings->Plugins。
相关操作就可以在Settings对话框的Plugins对话框选择。
5.1安装插件
例如：安装Vue.js插件。
(1)在Settings对话框的Marketplace中搜索Vue.js。
(2)点击Install进行安装。
(3)安装完成后插件变成Installed模式。
5.2查看已安装插件
在Settings对话框的Installed中查看已经安装插件列表。
6.命令行终端Terminal
在IntelliJ IDEA编辑器中，使用命令行终端Terminal执行安装、运行、打包等npm命令。
6.1命令行终端Terminal默认位置
命令行终端Terminal默认在IntelliJ IDEA的左下角。
6.2从菜单中调出命令行终端Terminal
依次点击和选择：View->Tool Windows->Terminal。
7.安装工程依赖包
7.1打开命令行终端Terminal
命令行终端默认已经进入源码工程目录。
源码目录：D:\dev\ForDx\datax-web-ui
7.2安装
安装：npm install
解析：执行npm install，会把从远程镜像仓库加载依赖包下载到本地的node_modules中。
7.3报错解决
报错：npm ERR! /usr/bin/git ls-remote -h -t git://github.com/adobe-webplatform/eve.git
解决：git config --global url."https://".insteadOf git://
7.4安装慢解决
切换为淘宝镜像源，提升下载速度。。
查看当前镜像源：npm get registry
设置为淘宝源：npm config set registry https://registry.npm.taobao.org
设置为官方源：npm config set registry http://www.npmjs.org
8.启动
8.1修改端口
修改文件：vi vue.config.js
修改内容：
const port = 8080
const apiPort = 8081解析：8080是前端应用端口；8081是后端应用端口。
8.2启动
命令：npm run dev
解析：使用npm run运行代码。
9.打包
9.1打包
命令：npm run build:prod
9.2结果输出目录
输出目录：D:\dev\ForDx\datax-web-ui\dist
解析：dist目录下的文件就是前端代码编译的结果，可以直接使用。
10登录
启动成功过后，可以登录。
用户/口令：admin/123456
二、使用VSCode搭建datax-web-ui开发环境
1.安装nodejs和npm
1.1下载地址
本例版本：https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
1.2下载包
下载地址：https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
解析：下载包名称node-v14.17.3-x64.msi。
1.3安装
根据安装向导安装即可。
本例安装目录：D:\Program Files\nodejs
在安装目录下，已经包含了node和npm。
1.4配置环境变量
依次点击和选择：此电脑->属性->高级系统设置->环境变量->系统变量
变量名称：Path
添加变量：D:\Program Files\nodejs\
2.下载源码
下载发布版本datax-web-ui-v-2.1.2。
源码地址：https://github.com/WeiYe-Jing/datax-web-ui/
2.1浏览器直接下载
地址：https://github.com/WeiYe-Jing/datax-web-ui/archive/refs/tags/v-2.1.2.zip
解析：直接在浏览器中输入地址就能下载。
2.2使用Git下载
命令：git clone [email protected]:WeiYe-Jing/datax-web-ui.git
3.解压包
解压包到：D:\dev\ForDx\datax-web-ui
4.使用VSCode打开源码工程
VSCode编辑器支持编写前端代码。
VSCodeIDEA编辑器可以添加前端需求的插件。
VSCode编辑器的命令行终端Terminal可以执行前端相关命令。
5.安装插件
点击左下角齿轮图标，选择Extensions菜单，进入插件拓展对话框。
5.1安装插件
例如：安装Vue.js插件。
(1)在Extensions的编辑框中搜索Vue.js。
(2)点击Install进行安装。
(3)安装完成后插件变成INSTALLED模式。
5.2查看已安装插件
当Extensions对话框的INSTALLED列表中查看已经安装插件列表
6.命令行终端Terminal
在VScode编辑器中，使用命令行终端Terminal执行安装、运行、打包等npm命令。
6.1命令行终端Terminal默认位置
命令行终端Terminal默认在一级菜单导航中就排列了Terminal菜单。点击Terminal的下拉菜单中的New Terminal，就会打开Terminal对话框，默认在界面下方。
6.2从菜单中调出命令行终端Terminal
依次点击和选择：View->Terminal。
7.安装工程依赖包
7.1打开命令行终端Terminal
命令行终端默认已经进入源码工程目录。
源码目录：D:\dev\ForDx\datax-web-ui
7.2安装
安装：npm install
解析：执行npm install，会把从远程镜像仓库加载依赖包下载到本地的node_modules中。
7.3报错解决
报错：npm ERR! /usr/bin/git ls-remote -h -t git://github.com/adobe-webplatform/eve.git
解决：git config --global url."https://".insteadOf git://
7.4安装慢解决
切换为淘宝镜像源，提升下载速度。。
查看当前镜像源：npm get registry
设置为淘宝源：npm config set registry https://registry.npm.taobao.org
设置为官方源：npm config set registry http://www.npmjs.org
8.启动
8.1修改端口
修改文件：vi vue.config.js
修改内容：
const port = 8080
const apiPort = 8081解析：8080是前端应用端口；8081是后端应用端口。
8.2启动
命令：npm run dev
解析：使用npm run运行代码。
9.打包
9.1打包
命令：npm run build:prod
9.2结果输出目录
输出目录：D:\dev\ForDx\datax-web-ui\dist
解析：dist目录下的文件就是前端代码编译的结果，可以直接使用。
10.登录
启动成功过后，可以登录。
用户/口令：admin/123456
以上，感谢。
2023年2月13日