1. Common Programming Software & Official Download Links
Editors / IDEs
VS Code (Lightweight Code Editor)
Official Website: https://code.visualstudio.com/
WebStorm (Frontend Development IDE)
Official Website: https://www.jetbrains.com/webstorm/
Trae (AI Code Editor)
Official Website: https://www.trae.cn/
PyCharm (Python IDE)
Official Website: https://www.jetbrains.com/pycharm/
IntelliJ IDEA (Java IDE)
Official Website: https://www.jetbrains.com/idea/
PhpStorm (PHP IDE)
Official Website: https://www.jetbrains.com/phpstorm/
GoLand (Go Language IDE)
Official Website: https://www.jetbrains.com/go/
2. Programming Development Environments
Node.js Environment
Official Website: https://nodejs.org/en/download
NVM (Node.js Version Manager)
Official Website: https://nvm.uihtm.com/
Description:
NVM is a Node.js version management tool that allows you to switch freely between different Node.js versions.
If you plan to install Node.js, using NVM is highly recommended for easier version management.
Python Environment
Official Website: https://www.python.org/
Miniconda (Python Environment Manager)
Official Website: https://docs.conda.io/projects/miniconda/en/latest/
Description:
Miniconda is a Python environment management tool that allows you to manage dependencies and switch between different Python versions easily.
If you plan to install Python, Miniconda is strongly recommended.
Java Environment
Oracle JDK
Official Website: https://www.oracle.com/java/
OpenJDK
Official Website: https://openjdk.org/install/
3. Database Tools
MySQL Database
Official Website: https://www.mysql.com/
Navicat (Database Management Tool)
Official Website: https://www.navicat.com/en/
Description:
Navicat can manage MySQL databases, and newer versions also support Redis and other databases.
4. Complete Overview of Frontend Technologies
4.1 HTML, CSS, and JavaScript — The Three Core Web Technologies
No matter which frontend framework you learn, such as Vue or React, everything ultimately relies on HTML, CSS, and JavaScript.
HTML (Content Structure)
HTML is used to create the structure of web pages, including:
- Headings
- Paragraphs
- Images
- Buttons
It determines: What content appears on the page.
CSS (Visual Styling)
CSS is used to control the appearance of web pages, including:
- Colors
- Fonts
- Layouts
- Animations
It determines: How the page looks.
JavaScript (Logic & Interaction)
JavaScript adds dynamic functionality and interactivity to web pages, such as:
- Button click events
- Form validation
- API requests
- Dynamic page updates
It determines: How the page behaves and interacts.
✔ All frontend frameworks are ultimately compiled into HTML + CSS + JavaScript and executed in the browser.
✔ These technologies are the foundation of Web development and essential for every frontend developer.
4.2 Node.js — JavaScript Runtime Environment
Node.js is not a frontend framework.
It is a JavaScript runtime environment that allows JavaScript to run outside the browser, especially on servers.
Main Uses of Node.js
- Setting up frontend development environments
- Installing project dependencies
- Running development servers
- Building and packaging projects
- Developing backend services and APIs
✔ Modern frontend frameworks like Vue and React depend heavily on Node.js for development and build processes.
✔ Node.js itself can also be used to develop full backend web applications.
4.3 React — A Mainstream Frontend Framework
React is one of the most popular frontend frameworks today.
The main goal of frontend frameworks is:
To help developers build Web applications in a more efficient, modular, and component-based way.
Its essence can be understood as:
JavaScript + Template Syntax + Component-Based Architecture + Rendering Mechanism.
Features of React
- Component-based development
- Data-driven UI
- High-performance rendering
- Rich ecosystem
- Suitable for large-scale projects
4.4 The Relationship Between Vue2, Vue3, and React
Vue2 / Vue3
Vue is a progressive frontend framework.
- Vue2: Traditional mainstream version
- Vue3: Next-generation version with better performance and improved features
Suitable for:
- Admin dashboards
- Corporate websites
- Medium and small Web projects
React
React is more suitable for:
- Large-scale projects
- Enterprise management systems
- Complex Web applications
React has a huge ecosystem and is one of the most in-demand frontend technologies in the job market.
4.5 What is a UI Component Library?
A UI component library is essentially:
A collection of pre-built interface components created by developers.
Examples include:
- Buttons
- Forms
- Dialogs
- Tables
- Navigation bars
Developers can use these components directly to improve development efficiency.
Common UI Component Libraries
Vue Ecosystem
- Element Plus
- Ant Design Vue
- Vant
React Ecosystem
- Ant Design
- Material UI
- Chakra UI
✔ UI component libraries help developers quickly build enterprise systems and management platforms.
