Records : 376
Scenario : Use IntelliJ IDEA to build a datax-web-ui development environment. Use VSCode to build datax-web-ui development environment.
Version:
node-v14.17.3
npm-6.14.13
Datax-web-ui open source address : https://github.com/WeiYe-Jing/datax-web-ui
1. Use IntelliJ IDEA to build a datax-web-ui development environment
1. Install nodejs and npm
1.1 Download address
Official website address: https://nodejs.org/dist
This example version: https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
1.2 download package
Download link: https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
Resolution: Download the package name node-v14.17.3-x64.msi.
1.3 Installation
Follow the installation wizard to install.
Installation directory for this example: D:\Program Files\nodejs
In the installation directory, node and npm are already included.
1.4 Configure environment variables
Click and select: This Computer -> Properties -> Advanced System Settings -> Environment Variables -> System Variables
Variable name: Path
Add variable: D:\Program Files\nodejs\
2. Download the source code
Download release version datax-web-ui-v-2.1.2.
Source address: https://github.com/WeiYe-Jing/datax-web-ui/
2.1 Browser direct download
Address: https://github.com/WeiYe-Jing/datax-web-ui/archive/refs/tags/v-2.1.2.zip
Analysis: You can download directly by entering the address in the browser.
2.2 Download using Git
Command: git clone [email protected] :WeiYe-Jing/datax-web-ui.git
3. Unzip the package
Unzip the package to: D:\dev\ForDx\datax-web-ui
4. Use IntelliJ IDEA to open the source code project
The IntelliJ IDEA editor supports writing front-end code.
The IntelliJ IDEA editor can add plug-ins for front-end requirements.
The command-line terminal Terminal of the IntelliJ IDEA editor can execute front-end related commands.
5. Install the plugin
Click and select in turn: File->Settings->Plugins.
Related operations can be selected in the Plugins dialog box of the Settings dialog box.
5.1 Install the plug-in
For example: Install the Vue.js plugin.
(1) Search for Vue.js in the Marketplace in the Settings dialog box.
(2) Click Install to install.
(3) After the installation is complete, the plug-in becomes the Installed mode.
5.2 View installed plugins
View the list of installed plugins in Installed in the Settings dialog box.
6. Command line terminal Terminal
In the IntelliJ IDEA editor, use the command line terminal Terminal to execute npm commands such as installation, operation, and packaging.
6.1 The default location of the command line terminal Terminal
The command line terminal Terminal is in the lower left corner of IntelliJ IDEA by default.
6.2 Bring up the command line terminal Terminal from the menu
Click and select in turn: View->Tool Windows->Terminal.
7. Install project dependencies
7.1 Open the command line terminal Terminal
The command line terminal has entered the source code project directory by default.
Source directory: D:\dev\ForDx\datax-web-ui
7.2 Installation
Installation: npm install
Analysis: Executing npm install will download the dependency package loaded from the remote mirror warehouse to the local node_modules.
7.3 Error resolution
报错：npm ERR! /usr/bin/git ls-remote -h -t git://github.com/adobe-webplatform/eve.git
Solution : git config --global url."https://".insteadOf git://
7.4 Solve the problem of slow installation
Switch to Taobao mirror source to increase download speed. .
View the current mirror source: npm get registry
Set as Taobao source: npm config set registry https://registry.npm.taobao.org
Set as official source: npm config set registry http://www.npmjs.org
8. start
8.1 Modify port
Modify the file: vi vue.config.js
Modifications:
const port = 8080
const apiPort = 8081Analysis: 8080 is the front-end application port; 8081 is the back-end application port.
8.2 start
Command: npm run dev
Analysis: Use npm run to run the code.
9. Pack
9.1 Packaging
Command: npm run build:prod
9.2 Result output directory
Output directory: D:\dev\ForDx\datax-web-ui\dist
Analysis: The files in the dist directory are the results of front-end code compilation and can be used directly.
10 login
After successful startup, you can log in.
URL information: http://127.0.0.1:8080/
User/password: admin/123456
2. Use VSCode to build datax-web-ui development environment
1. Install nodejs and npm
1.1 Download address
Official website address: https://nodejs.org/dist
This example version: https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
1.2 download package
Download link: https://nodejs.org/dist/v14.17.3/node-v14.17.3-x64.msi
Resolution: Download the package name node-v14.17.3-x64.msi.
1.3 Installation
Follow the installation wizard to install.
Installation directory for this example: D:\Program Files\nodejs
In the installation directory, node and npm are already included.
1.4 Configure environment variables
Click and select: This Computer -> Properties -> Advanced System Settings -> Environment Variables -> System Variables
Variable name: Path
Add variable: D:\Program Files\nodejs\
2. Download the source code
Download release version datax-web-ui-v-2.1.2.
Source address: https://github.com/WeiYe-Jing/datax-web-ui/
2.1 Browser direct download
Address: https://github.com/WeiYe-Jing/datax-web-ui/archive/refs/tags/v-2.1.2.zip
Analysis: You can download directly by entering the address in the browser.
2.2 Download using Git
Command: git clone [email protected] :WeiYe-Jing/datax-web-ui.git
3. Unzip the package
Unzip the package to: D:\dev\ForDx\datax-web-ui
4. Use VSCode to open the source code project
The VSCode editor supports writing front-end code.
The VSCode IDEA editor can add plug-ins for front-end requirements.
The command-line terminal Terminal of the VSCode editor can execute front-end related commands.
5. Install the plugin
Click the gear icon in the lower left corner, select the Extensions menu, and enter the plug-in extension dialog box.
5.1 Install the plug-in
For example: Install the Vue.js plugin.
(1) Search for Vue.js in the edit box of Extensions.
(2) Click Install to install.
(3) After the installation is complete, the plug-in becomes INSTALLED mode.
5.2 View installed plugins
When viewing the list of installed plugins in the INSTALLED list of the Extensions dialog box
6. Command line terminal Terminal
In the VScode editor, use the command line terminal Terminal to execute npm commands such as installation, operation, and packaging.
6.1 The default location of the command line terminal Terminal
The command line terminal Terminal arranges the Terminal menu in the first-level menu navigation by default. Click New Terminal in the drop-down menu of Terminal to open the Terminal dialog box, which is at the bottom of the interface by default.
6.2 Bring up the command line terminal Terminal from the menu
Click and select in turn: View->Terminal.
7. Install project dependencies
7.1 Open the command line terminal Terminal
The command line terminal has entered the source code project directory by default.
Source directory: D:\dev\ForDx\datax-web-ui
7.2 Installation
Installation: npm install
Analysis: Executing npm install will download the dependency package loaded from the remote mirror warehouse to the local node_modules.
7.3 Error resolution
报错：npm ERR! /usr/bin/git ls-remote -h -t git://github.com/adobe-webplatform/eve.git
Solution : git config --global url."https://".insteadOf git://
7.4 Solve the problem of slow installation
Switch to Taobao mirror source to increase download speed. .
View the current mirror source: npm get registry
Set as Taobao source: npm config set registry https://registry.npm.taobao.org
Set as official source: npm config set registry http://www.npmjs.org
8. start
8.1 Modify port
Modify the file: vi vue.config.js
Modifications:
const port = 8080
const apiPort = 8081Analysis: 8080 is the front-end application port; 8081 is the back-end application port.
8.2 start
Command: npm run dev
Analysis: Use npm run to run the code.
9. Pack
9.1 Packaging
Command: npm run build:prod
9.2 Result output directory
Output directory: D:\dev\ForDx\datax-web-ui\dist
Analysis: The files in the dist directory are the results of front-end code compilation and can be used directly.
10. Login
After successful startup, you can log in.
URL information: http://127.0.0.1:8080/
User/password: admin/123456
Above, thanks.
February 13, 2023