foreword
The content of this chapter is the use and related discussion of the VUE development environment.
Previous article address:
Vue 3: Play with web front-end technology (3) - Lion King's Blog - CSDN Blog
Next article address:
(none)
1. Use of development environment
1. Sinicization of VScode
Will Sinicization lead to incompatibility? There are risks, but the benefits are higher. You can choose plug-ins according to your personal preferences. The following is the way to install plug-ins. Each plug-in will have related instructions and usage.
2. Run the project
Create a new terminal and use the command line to run the project.
3. Front-end debugging
After accessing the service, debug through the inspect element function of the browser. This is not only physical work, but also meticulous work. Generally speaking, it is very simple to implement a page, but it takes a lot of effort to beautify a page:
4. Change the project content
(1) Modify the text
Refresh the browser at this time, the content will not change.
(2) Be sure to save
Use the shortcut key Ctrl+S to update the modification to the front end.
(3) Ctrl+S is only for the current file
The following situations will not update the content of VUE to the web page
(4) Set automatic save
5. Running and debugging
The premise is that the front-end service has been running, otherwise the interface cannot be opened during debugging.
(1) Set a breakpoint
Just put a breakpoint in front of the code.
(2) Select the plug-in for debugging
Select Debug and Run, and enter Debug to select the debug plugin
2. Discussion on related usage
1. How to make good use of VScode development tools?
(1) Install plugins: VScode has many plugins to enhance its functionality. For example, installing a code formatting plugin can help you maintain a uniform style of code; installing a code snippet plugin can provide auto-completion and code blocks; installing a version control plugin can integrate with version control systems such as Git. Browse the plugins in the marketplace and choose the one that suits your needs.
(2) Custom preferences: VScode allows you to make various customizations according to your preferences. For example, you can change the theme, font, indentation style, and adjust the behavior of the editor. Open the settings page and browse the available options to set them to your liking.
(3) Use shortcut keys: VScode provides a wealth of shortcut keys, which can help you quickly complete common operations. Some commonly used shortcuts include Ctrl+S to save the file, Ctrl+X to cut, Ctrl+C to copy, Ctrl+V to paste, Ctrl+Z to undo, etc. Knowing and using these shortcuts can increase your productivity.
(4) Utilize the built-in terminal: VScode has a built-in terminal function, which can run commands in the editor. You can use the terminal to run debugging commands, build and run projects, and more. Open the Terminal panel, choose the appropriate terminal, and execute the command you need.
(5) Use code snippets: VScode supports custom code snippets, which can help you quickly enter commonly used code blocks. You can define your own snippets, or install snippets provided by third-party plugins. Use code snippets to reduce repetitive typing and increase coding speed.
(6) Use the debugging function : VScode has a powerful debugging function that can help you find and fix errors during the development process. You can set breakpoints, view the values of variables, step through code, and more. Learning and using the debugging function proficiently can quickly locate and solve problems.
(7) Master the extension function: The extension function of VScode is very powerful. You can install various extensions to support different programming languages, frameworks and tools. Knowing and using the appropriate extensions can increase your development productivity.
2. What should I do if the debugging panel is always open after the configuration is debugged and run once?
Just get used to it, or find the corresponding option in the settings to set it.