How to run the vue project (super detailed diagram)

This super detailed case screenshot teaches how to run other people's Vue projects, click on the picture to zoom in and take a closer look
1. Check the node.js version

Vue environment configuration tutorial: https://blog.csdn.net/m0_57545353/article/details/124366678

After the configuration is complete, execute node -v in cmd to check whether the installation is successful. If the version number appears, the installation is successful.

Enter the cmd command line window,

Enter node -v to view the nodejs version

Enter npm -v to view the npm version

node -v
npm -v

1
2

As shown in the figure below, the installation is successful:

2. Prerequisites for running other people's projects

1. Delete the package-lock.json and node_modules files

package-lock.json records the tree structure of the entire node_moudles folder, and also records the download address of the module, but it is generated based on the npm version library of the project author. If this dependency file is not deleted, it is easy to have npm version differences resulting in an error.

2. Enter the terminal of the project

1. First, enter the directory where the vue project is located (as shown in the figure below)

2. Enter [cmd] in the current path box and press Enter

3. Clear npm cache

When npm has a cache, it often happens that the installation dependency fails. Once this problem occurs, the error message is very complete, but according to the error message to solve it one by one, it cannot be solved, and the reason cannot be found. Enter the following command in the console to clear the npm cache. When npm has a cache, it often fails to install dependencies

npm cache clean -force

4. Reinstall dependencies.

npm install

5. Finally run the project.

npm run serve

6. Success

7. Enter the address in the browser: http://localhost:8080, and the interface appears

3. Three ways to run vue

The first method: run under cmd

(Enter commands sequentially according to the project path)

1. First, enter the directory where the vue project is located (as shown in the figure below)

2. Enter [cmd] in the current path box and press Enter

3. Enter [npm run serve] in the started command line window and press Enter

4. Success

The second method: open the IDEA development tool

Open IDEA

File - open - select the folder under the source code folder (be sure to remember)

This successfully imports the source code.

Configure the vue plugin in IDEA
Click File–>Settings–>Plugins–>Search for the vue.js plugin to install it. I have already installed it in the picture below.

Method 1 (recommended):

1. Set the self-starting convenient method for the idea to start the project conveniently.
In the idea, click the place in the figure below and select Edit Configurations