How to configure the front-end environment from scratch and install the necessary software plug-ins

---

foreword

In today's fast-growing Internet age, front-end development has become a technical job that has attracted much attention and growing demand. As a front-end engineer, having a well-configured computer is the key to improving work efficiency and smooth project development. In this article, we'll show you how to configure a new computer from scratch so that you can build and run Vue projects smoothly. We will guide the reader step by step through the entire configuration process,包括安装必要的软件和工具，配置开发环境，以及创建和运行Vue项目。

---

一、VSCode（Visual Studio Code）

1.1 VSCode introduction and installation

• VSCode is a free and open source code editor developed by Microsoft. It has a rich ecosystem of features and plugins to meet the various needs of front-end development. VSCode supports multiple programming languages ​​and provides functions such as code completion, syntax highlighting, and debugging , so that developers can write and debug code more efficiently. In addition, VSCode also supports custom configuration and shortcut keys, as well as tools such as integrated terminals and Git ,方便开发者进行项目管理和团队协作。
• VSCode installation
  Visual Studio Code downloaded the installation package on the official website, no brains all the way to determine（安装路径需要自己更改）

1.2 VSCode common plug-in installation

plugin name	effect
Auto Rename Tag	Automatically rename tags, when you modify the start or end tag of an HTML or XML tag, it will automatically update the corresponding tag
ENV	Format and syntax highlight the env file (.env)
ESLint	Plugin for checking and fixing syntax and style errors in JavaScript code in real-time in the editor
Git Graph	Provides a visual graphical interface for Git commit history to better view and understand the project's version control history
GitLens	Provides rich Git features, such as comments, authors, timeline, etc.
JavaScript (ES6) code snippets	Provides a set of code snippets for JavaScript developers to quickly generate commonly used code templates
Live Server	Provides a live preview server in the local development environment for live viewing and debugging in the browser
One Dark Pro	A theme plugin for VS Code that provides a set of beautiful dark themes
open in browser	Shortcut to open the current file in the browser ( Alt + B)
Prettier - Code formatter	A plug-in for formatting code, supports multiple programming languages, and provides some formatting options and configurations
vscode-icons	Added nice file icons to VS Code's File Explorer for enhanced visualization and ease of use
Winter	Applicable to vue2 projects, syntax highlighting, code completion, code formatting, syntax checking
Vue Language Features (Volar)	Applicable to vue3 projects, syntax highlighting, code completion, code formatting, syntax checking

A plugin for two vue projects. When one is enabled, the other must be disabled to avoid conflicts

How to install the plug-in ⇒ Click the extension icon ( Ctrl + shift + x) ⇒ Search for the corresponding plug-in name ⇒ Install

1.3 VSCode code formatting

The effect of code formatting is affected by the used plugins, language extensions and formatting configurations. Therefore, you can choose the appropriate plug-in and configuration according to your own needs to achieve code formatting

After you install the prettier plugin, you can use these settings to Ctrl + Srealize automatic formatting when saving code

First open the settings

Tick ​​both buttons

You can also shift + Alt + Fformat the code in an optional way

2. Node.js

2.1 Introduction and installation of Node

• Node.js is a JavaScript runtime based on the Chrome V8 engine. It allows developers to use JavaScript to run code on the server side, not just in the browser environment. Node.js provides 丰富的内置模块和包管理器npm, enabling developers to easily build and manage applications. Node.js is widely used in front-end development 构建工具、服务器端渲染、API开发等方面, providing front-end engineers with more technical choices and flexibility.
• Node installation
  Node.js Chinese website , after entering the official website, select the long-term support version to install , the version that is too new is unstable
  The installation is very simple, except for choosing the installation path by yourself, the other steps are mindless. Next,
  安装完以后不用配置任何的环境
  
  check node and node in the console Whether the installation of npm is complete (node ​​installation comes with npm installation, no manual installation is required)

node -v

npm -v

If the version number can be displayed, the installation is complete!

2. Installation of yarn

Execute the command in the console

npm install --global yarn

Verify that the installation was successful

yarn --version

3. Webpcak

3.1 Introduction and installation of Webpcak

• Webpack: Webpack is a 模块打包工具tool that can package multiple front-end resources (such as JavaScript, CSS, images, etc.) into one or more static files. Webpack 模块化manages each module in the project through the method, and proceeds according to the configuration file 打包和优化. It provides a wealth of plug-ins and loaders that can handle various types of files and implement functions such as code splitting, compression, and lazy loading. Webpack also supports hot module replacement (HMR), which can preview the effect of modifications in real time during the development process. By using Webpack, front-end engineers can better organize and manage project code,提高开发效率和性能。
• Install webpck globally

npm install webpack -g

4. Vue CLI

4.1 Installation and introduction of Vue CLI

• Vue CLI is a tool for quickly building Vue.js projects 脚手架. It provides a complete set of project development tool chain, including 项目初始化, development server, packaging and building functions. Vue CLI is based on Webpack and integrates Vue.js-related plug-ins and configurations, enabling front-end engineers to quickly build and develop Vue projects. Vue CLI also provides a wealth of plug-ins and templates, which can be customized according to project requirements. By using Vue CLI, front-end engineers can 快速启动项目unify project structure and development specifications, and enjoy the development advantages of Vue.js.
• Install Vue CLI globally

npm install -g @vue/cli

Note here that if you are using yarn to install scaffolding, you need to configure the environment yourself. You
can use the environment configuration vue -Vto check whether the installation is successful
and install @vue/cli scaffolding globally.

5. Initialize the Vue project and run it

Create a new folder and enter in the console

vue create vue2_test

Select the default template installation of vue2 or vue3 (Enter key)
After installation, execute

cd vue2_test

npm run serve

就成功跑起一个vue2的初始化项目了

打开网址：

6. Necessary software for front-end engineers

6.1 Git

• Version Control: Git is a distributed version control system used to manage the version and change history of code. It helps development teams collaborate, track code changes, merge branches, and more.
• Branch management: Git allows the creation and management of multiple branches, facilitating parallel development and feature isolation.
• Team collaboration: Git provides the function of team collaboration, and developers can use Git to share, merge and resolve conflicts.
• Version rollback: Git allows you to go back to a specific code version as needed, which is convenient for code rollback and recovery.
  Git official website download address
  After the installation is complete, you need to configure the ssh public key将ssh文件夹中的公钥（ id_rsa.pub）添加到GitHub管理平台中

6.2 Sniping

• Screenshot: Snipaste is a powerful screenshot tool that can quickly capture any area on the screen, and mark, edit and save it.
• Pasteboard management: Snipaste provides a pasteboard management function, which can easily manage the historical content in the clipboard, and quickly paste and copy.
  Snipaste download address

6.3 Pxcook

• Design draft annotation: Pxcook is a design draft annotation tool, which is used to convert the designer's design draft into the annotation information required for front-end development, including size, color, font, etc.
• Export resources: Pxcook can export pictures, icons, etc. in the design draft as resource files required for front-end development, which is convenient for developers to use.
  Pxcook download address

7. VUE developer tools

Refer to this article: Introduction to Vue3

Vue Devtools (Vue Devtools) is a browser plug-in for assisting Vue.js application development. Its main role is to help developers 调试和分析implement Vue.js applications in the browser, providing a series of powerful development tools and functions, including:

• Component hierarchy view: Vue Devtools can display the Vue component hierarchy in the current page, which is convenient for developers to quickly understand the nesting relationship and hierarchy of components.

• Component state viewing and modification: Developers can view the state data of each component, including props, data, computed, etc., and modify these data in real time for testing and debugging.

• Event Tracking and Debugging: Vue Devtools can display component event listeners, including bound events and fired events. Developers can track the triggering and processing of events to facilitate debugging and analysis of problems.

• Performance monitoring and analysis: Vue Devtools provides performance monitoring and analysis tools, which can view indicators such as component rendering performance and memory usage to help developers optimize application performance.

• Vuex state management tool: Vue Devtools integrates Vuex's state management tool, which can view and modify the state tree of the application, which is convenient for debugging and testing Vuex-related functions.

• Time travel debugging: Vue Devtools supports time travel debugging, which can backtrack and view the state and data changes of components at different points in time, which is convenient for debugging complex data flow and state management.

In short, Vue Devtools is a very practical development tool, which can greatly improve the development efficiency and debugging ability of Vue.js applications, and help developers better understand and debug Vue components, states and events.

---

Summarize

Through the guidance of this article, you have learned to configure a new computer from scratch, and successfully build and run Vue projects. First, install the necessary software and tools. Then, create a new Vue project via the Vue CLI, and start the development server. Finally, configure the editor and plug-ins according to your personal preferences to improve development efficiency. I hope this article can help you configure your new computer smoothly and start a happy Vue project development.