How to create a Vue project in the 2020 version of idea

Here is the quote

1. Create a vuejs file after downloading the vuejs file in idea

Insert picture description here

Click next to enter the next step

2. After creating the file, select the location of the file and select the location of the vue scaffolding cli

$[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-4snRFLVE-1603336126817) (C:\Users\86186\AppData\Roaming\Typora\typora-user-images\ image-20201020212302652.png)]$

3. After successfully creating the project, click to enter the terminal command line

Insert picture description here

4. Enter the command vue init webpack to the command line

Enter the command vue init webpack into the terminal, and the effect is shown in the figure.
$[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-guMRAIyr-1603336126822)(C:\Users\86186\AppData\Roaming\Typora\typora-user-images\ image-20201020213014136.png)]$
Note y means yes, n means no

? Project name (my-project) hit y and press enter

? project description (A Vue.js project) Just hit enter

? Author (xxxxxx [email protected]) just hit enter

? Vue build (user arrow Keys) Just hit enter

? Install vue-router? (Y/n) Just hit Y and press Enter (whether to install routing, the key to single page)

? Use ESLint to lint your code? (Y/n) Just hit n and enter (whether to use strict mode)

? Set up unit tests (Y/n) Just hit n and press Enter (unit test, I don’t think it is installed and choose n)

? Setup e2e tests with Nighwatch? (Y/n) (e2e test, I personally think that I don’t want to install and choose n)

? Should we run npm installfor you after the project has been created? (recommended) (use arrow Keys)
should ask you whether the next dependency is installed through npm.
If you press Enter directly, then the next installation will be very slow

So directly Ctrl+C to cancel, or select No, I will handle that myself then

Enter cnpm install to install through Taobao mirror cnpm

Taobao mirror, you can refer to other blogs.
Note: cnpm must be used all the time, not mixed with npm

Enter the command cnpm install. At
this time, there may be a problem that cnpm does not respond. At this time, close the project
. Enter the following command in cmd

npm config set registry http://registry.cnpmjs.org

Then reopen the project, and enter cnpm install, the final effect is shown in the figure
Insert picture description here

Enter the command cnpm run dev
$[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-ZAazVg5w-1603336126824)(C:\Users\86186\AppData\Roaming\Typora\typora-user-images\ image-20201020214222174.png)]$

Click the link on the picture to enter

$[External link image transfer failed. The source site may have an anti-hotlinking mechanism. It is recommended to save the image and upload it directly (img-jCsHcLT0-1603336126825) (C:\Users\86186\AppData\Roaming\Typora\typora-user-images\ image-20201020214330725.png)]$

Indicates that the file was created successfully