使用IntelliJ IDEA和VSCode搭建datax-web-ui开发环境

记录：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

本例版本：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 git@github.com: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登录

启动成功过后，可以登录。

网址信息：http://127.0.0.1:8080/

用户/口令：admin/123456

二、使用VSCode搭建datax-web-ui开发环境

1.安装nodejs和npm

1.1下载地址

官网地址：https://nodejs.org/dist

本例版本：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 git@github.com: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.登录

启动成功过后，可以登录。

网址信息：http://127.0.0.1:8080/

用户/口令：admin/123456

以上，感谢。

2023年2月13日文章来源地址https://www.toymoban.com/news/detail-496086.html