---

preamble

In today’s fast-moving Internet era, front-end development has become a highly sought-after and in-demand technology job. 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 will show you how toConfiguring a new computer from scratchto be able to get a Vue project up and running smoothly. We’ll walk the reader through the entire configuration process, step-by-stepThis includes installing the necessary software and tools, configuring the development environment, and creating and running Vue projects.

---

I. VSCode (Visual Studio Code)

1.1 Introduction and Installation of VSCode

• VSCode is a free and open source code editor developed by Microsoft. It has a rich ecosystem of features and plug-ins to meet the various needs of front-end development.VSCode supports a wide range of programming languages , providesCode Completion, Syntax Highlighting, Debugging, etc., allowing developers to write and debug code more efficiently. In addition, VSCode supportsCustomized configurations and shortcuts, as well as integration with tools such as Terminal and Git，Facilitates project management and teamwork for developers.
• VSCode Installation
  Visual Studio CodeDownload the installer from the official website and make sure it’s a no-brainer all the way through(Installation path needs to be changed by yourself)

1.2 VSCode Common Plugin Installation

plug-in name	corresponds English -ity, -ism, -ization
Auto Rename Tag	Automatic tag renaming, when you change the start or end tag of an HTML or XML tag, it will automatically update the corresponding tag.
ENV	Highlight the format and syntax of the env file (.env)
ESLint	Plugin for real-time checking and fixing of syntax and style errors in JavaScript code in the editor
Git Graph	Provides a visual Git commit history GUI to better view and understand a project’s version control history
GitLens	Provides rich Git features such as comments, authors, timelines, etc.
JavaScript (ES6) code snippets	Provides JavaScript developers with a set of code snippets to quickly generate commonly used code templates
Live Server	Provide a live preview server in the local development environment for real-time viewing and debugging in the browser
One Dark Pro	VS Code Theme Plugin that provides a nice set of dark themes
open in browser	A shortcut to open the current file in the browser (Alt + B）
Prettier – Code formatter	Plug-in for formatting code, supports multiple programming languages and provides a number of formatting options and configurations
vscode-icons	Added nice file icons to VS Code’s file explorer to enhance visualization and ease of use
Vetur	For vue2 projects, syntax highlighting, code completion, code formatting, syntax checking
Vue Language Features (Volar)	For vue3 projects, syntax highlighting, code completion, code formatting, syntax checking

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

How to install the plugin ⇒ 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 plug-ins, language extensions and formatting configurations used. Therefore, you can choose the appropriate plug-in and configuration for code formatting according to your needs

When you have the prettier plugin installed, you can achieve this with these settingsCtrl + S method for automatic formatting when saving code

First open the settings

Check two buttons

Also available shift + Alt + FThe way the code is formatted in the

Two, 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 server-side, not just limited to the browser environment.Node.js providesRich built-in modules and package manager npm, enabling developers to easily build and manage applications.Node.js is widely used in front-end development in theBuild tools, server-side rendering, and API development, providing front-end engineers with more technical options and flexibility.
• Node Installation
  Node.js Chinese Enter the official website and selectLong-term support version installationToo new to be stable.
  Installation is very simple, except for their own choice of installation path, the other all the way to the next no brainer!
  No need to configure any environment after installation
  
  Verify in the console that node and npm are installed (node installs itself with npm, no need to install it manually)

node -v

npm -v

The installation is complete when the version number is displayed!

2. yarn installation

Execute the command on 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 aModule Packaging ToolIt can package multiple front-end resources (e.g., JavaScript, CSS, images, etc.) into one or more static files.Webpack does this through themodularizationway to manage the modules in the project and according to the configuration filePackaging and optimization. It provides a rich set of plug-ins and loaders that can handle various types of files and realize code splitting, compression, lazy loading, etc. Webpack also supports Hot Module Replacement (HMR), which allows you to preview the effect of modifications in real time during the development process. Through the use of Webpack , front-end engineers can better organize and manage the project code .Improve development efficiency and performance.
• Install webpck globally

npm install webpack -g

Fourth, Vue CLI

4.1 Vue CLI Installation and Introduction

• The Vue CLI is a Vue.js project builder for rapid building ofleggings and paddlesTools. It provides a complete tool chain for project development, includingProject InitializationVue CLI is based on Webpack and integrates Vue.js-related plug-ins and configurations , allowing 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 and configured according to the project requirements. By using Vue CLI, front-end engineers canQuick Start Program, unify project structure and development specifications, and enjoy the benefits of Vue.js development.
• Install the Vue CLI globally

npm install -g @vue/cli

Note here that if you installed the scaffolding with yarn, you need to configure the environment yourself
It is possible to usevue -VVerify successful installation
Environment configuration for global installation of @vue/cli scaffolding

V. Initialize the Vue project and run

Create a new folder and type in the console

vue create vue2_test

Select the default template installation for vue2 or vue3 (enter)
Once installed, perform

cd vue2_test

npm run serve

You've successfully run a vue2 initialization project.

Open the URL:

Six, front-end engineers must have software

6.1 Git

• Version Control: Git is a distributed version control system for managing code versions and change history. It helps development teams collaborate, track changes to code, merge branches, and more.
• Branch Management: Git allows you to create and manage multiple branches for parallel development and feature isolation.
• Team Collaboration: Git provides team collaboration features that allow developers to share, merge, and resolve conflicts.
• Version fallback: Git allows you to go back to a specific version of code if you need to, making it easy to fall back and restore code.
  git official website download address
  You also need to configure the ssh public key after the installation is completeAdd the public key (id_rsa.pub) from the ssh folder to the GitHub management platform

6.2 Snipaste

• Screenshot: Snipaste is a powerful screenshot tool to quickly capture any area of the screen, label, edit and save it.
• Pasteboard Management: Snipaste provides a pasteboard management feature to easily manage the history content in the clipboard for quick pasting and copying.
  Snipaste download address

6.3 Pxcook

• Design Draft Annotation: Pxcook is a design draft annotation tool for converting designers’ drafts into annotation information required for front-end development, including size, color, font, etc.
• Export resources: Pxcook can export images, icons, etc. from the design to resource files required for front-end development, which is convenient for developers to use.
  Pxcook Download Address

VII. VUE Developer Tools

Refer to this article: Introduction to Vue3

Vue Devtools is a browser plugin used to aid in the development of Vue.js applications. Its main purpose is to help developers in the browser toDebugging and Analysis Vue.js apps, which provide a range of powerful development tools and features, including:

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

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

• Event Tracing and Debugging: Vue Devtools can display the event listeners of a component, including bound events and triggered events. Developers can trace the triggering and processing of events to facilitate debugging and analyzing problems.

• Performance monitoring and analysis: Vue Devtools provides performance monitoring and analysis tools to view component rendering performance, memory usage and other metrics to help developers optimize application performance.

• Vuex state management tool: Vue Devtools integrates the state management tool of Vuex, which allows you to view and modify the state tree of your application, and facilitate debugging and testing of Vuex-related features.

• Time Travel Debugging: Vue Devtools supports time travel debugging, which allows you to backtrack and view the state of components and data changes at different points in time, making it easy to debug complex data flow and state management.

In short, Vue Devtools is a very useful development tool that can greatly improve the development efficiency and debugging capabilities of Vue.js applications, helping developers better understand and debug Vue components, states and events.

---

summarize

With the guidance in this article, you have learned to configure a new computer from scratch and get a Vue project up and running smoothly. First, install the necessary software and tools. Then, create a new Vue project via the Vue CLI and start the development server. Finally, configure editors and plugins according to your personal preferences to improve development efficiency. I hope this article can help you smoothly configure your new computer and carry out an enjoyable Vue project development work.