Vue Element front-end application development preparation for the development environment

Overview

Previously, VS has been used for various front-end and back-end development. As the project needs, we are gradually integrating the pure front-end development model. We have begun to mainly select Vue + Element for BS front-end development. In the future, we will further integrate the Vue + AntDesign interface kit as a way to display two different interface frameworks. The front-end development using Vue + Element requires a major shift from the previous development model, and requires exposure to more relevant knowledge. This series of essays is based on a step-by-step learning and research approach. It gives a complete introduction to all aspects of front-end development using Vue + Element, and combines the existing framework functions of the BS front-end to integrate the two. This essay mainly introduces the preparation of the development environment, including the need to prepare relevant development tools, plug-in assistance, etc., as well as automatic correction processing for development saves, debugging configuration content, etc.

1. Develop the required software environment

Different from the previous Asp.net development, pure front-end development generally no longer uses the bulky VS for front-end development, but instead uses lightweight development tools such as VS Code or WebStorm to develop and maintain front-end code. Although it is a lightweight development tool, its functions are also very powerful, and the development environment can be on Windows system or Mac system, etc., to achieve a multi-platform development environment.

1) Installation of VS code

VS Code (Visual Studio Code) is a free, open source, cross-platform text (code) editor developed by Microsoft. An almost perfect editor.

Official website: https://code.visualstudio.com

Documentation: https://code.visualstudio.com/docs

Source code: https://github.com/Microsoft/vscode

The interface of VS Code is roughly as shown below. Generally, after installation, if the interface is English, you can install its Chinese package.

After installing VS Code, we generally need to search and install some required plug-ins to assist in development. Installing the plug-in is very simple. After finding it in the search panel, you can install it directly.

Generally we need to install these vs code plugins:

Vetur

Vue multi-functional integrated plug-in, including: syntax highlighting, smart prompts, emmet, error prompts, formatting, auto-completion, debugger. The official Vue plugin for vscode, a must-have for Vue developers.

ESLint

ESLint is a grammar rule and code style checking tool that can be used to ensure that grammatically correct and style-consistent code is written.

The ESLint plug-in in VSCode directly integrates the functions of ESLint and can be used after installation. The details of the code format and specifications can also be customized, and a team can share the same configuration file, so that the code written by everyone in the team can use the same code specification, and everyone can complete their own code specification check before checking in the code.

VS Code - Debugger for Chrome A plug-in for debugging with Chrome

This tool is absolutely essential for front-end development and will greatly change your development and debugging modes.

In the past, front-end debugging was mainly JavaScript debugging. You needed to find the corresponding code part in the Chrome console, add breakpoints, and then step through the Chrome console to view the changes in values.

After using Debugger for Chrome, when the code is running in Chrome, you can add breakpoints directly in VSCode. After clicking Run, the page in Chrome continues to run. When it reaches the breakpoint you added in VSCode, you can perform single-step debugging directly in VSCode.

Beautify

The Beautify plug-in can quickly format your code, making your messy code structure instantly become very regular when you are writing code. It is a must-have for people with code obsessive-compulsive disorder. A better code format will be very convenient in later maintenance and when others read it.

2) Install the node development environment

When developing with VS Code, we often need to use the command line npm to install related modules. These require the support of the node environment. After installing node, npm is also installed together.

Node Download: https://nodejs.org/en/

After installation, we can check the version numbers of node and npm through the command line or Shell in VS Code

node -v

npm -v

3) Installation of Vue scaffolding

Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces.

Install globally:

npm install vue-cli -g

Global uninstall:

npm uninstall vue-cli -g

4) Installation of Vue DevTool Chrome plugin

This plug-in is also a necessary Chrome plug-in for developing Vue. Generally, there is no external network, so it cannot be installed directly on the official Chrome plug-in website. Downloading and compiling through GitHub is too troublesome for installation. Later, it was successfully downloaded and installed on a website.

https://chrome.zzzmh.cn/info?token=nhdogjmejiglipccpnnnanhbledajbpd

2. Configuration and use of the development environment

For automatic code correction processing such as Vetur, we need to set it up in VS Code, in [File] [Preferences] [Settings], and then click Settings.json to edit it.

Here I mainly set up the general processing of indenting and typesetting the code after saving it

To debug the VScode with Chrome, we need to install the Debugger for Chrome plugin and then set up the Vue project code.

Open the Vue.Config.js file in the project root directory and add productionSourceMap:true and devtool:'source-map' to the appropriate locations as shown below

Then in the run panel, set the debugging parameters as shown below

After specifying these settings, we can debug the code in VS Code in debug mode. The code only needs to set the corresponding breakpoints to track the data of the object.

Before debugging, remember to use npm run dev to start the project. After the project is fully started, the project address will be opened in the Chrome browser, and then use F5 to debug the project code.

Vue DevTools is also used to track Vue project routing, status and other information, which can track and process information very well.

In order to light up the Vue DevTools icon on the Chrome browser, we can add a line of code to the main.js of the Vue project.

Vue.config.devtools=process.env.NODE_ENV==='development' as shown in the following interface

This essay is a simple introduction. It mainly introduces the installation of the VS Code environment, the configuration of the corresponding plug-in, and how to debug the project code in conjunction with Chrome.

The above is the detailed content of the preparation work for the development environment of Vue Element front-end application development. For more information about the preparation work for the development environment of Vue Element front-end application development, please pay attention to other related articles on 123WORDPRESS.COM!