Create and run vue-cli based on vue2, how to run the vue.js official website sample on vscode (three solutions for how to deal with error reporting)

This article is based on the environment: nodejs 16.15.1 and vue 5.0.7

1. Create and run vue-cli based on vue2

 1. Create a new folder, right-click to open and select Open by Code

 2. Select Terminal in the navigation bar --> New Terminal

3. Enter the vue create project name, and press Enter (wait, do not press the Enter key, otherwise it will automatically choose to create vue3)

 4. Use the keyboard direction down operator, select vue2, and press Enter

 It is being generated, please wait (if you get stuck, you can continue to press the Enter key)

 5. When the following command pops up, the creation is complete

 6. Type cd message1+enter to the terminal to enter the specified folder message1

Type npm run serve+enter to the terminal to start running (the picture below is running)

 7. Press and hold ctrl while clicking the blue-green address [ open internally http://localhost:8080/    or externally open http://192.168.43.89:8080/] to run 

8. The interface pops up and the operation is successful

2. The operation process of vue.js official website sample running on vscode

 1. Select the created project and register the component TestT.vue in components

 2. Open the vue.js official website, select the document, interactive tutorial

[vue.js official website URL: Vue.js - Progressive JavaScript framework | Vue.js (vuejs.org) ]

 3. First click on the lower left corner to see the answer, and then copy the complete code to the newly created Vue project

Found that the copied code reported an error

 4. Add the <div> component to the <template> component

Found that it is still reporting an error

 5. Go to the configuration file package.json in the message1 folder, find "eslintConfig", and change "root": false to "root": false [ ESLint allows you to specify the JavaScript language  options you want to support. Avoid some overly strict grammar checks ] and found that errors are still being reported.

 6. Enter the configuration file package.json under the message1 folder, find "eslintConfig", and add "requireConfigFile": false to "parserOptions"

 At this point the error disappears

 

 7. Register the newly added component in APP.vue [To make the effect more obvious, comment out the original component]

 8. Similarly, cd into the specified file, enter npm run serve, ctrl+click http://localhost:8080/

 The vue.js official website sample runs successfully

Guess you like

Origin blog.csdn.net/m0_56905968/article/details/127820945