[Complete project construction] Realize vue front-end construction test system based on vue-cli——①Create vue-cli to realize project construction

1. Open the vscode terminal, cd into the specified directory [note, it is the folder of the entire project, this folder will contain front-end and back-end projects in the future], and enter the following command in the specified directory to check whether it follows node and npm, if If installed, output the corresponding version:

① Check the node version

node -v

② Check the npm version

npm -v

The installation is successful, and the installation version is returned (as shown in the figure)

2. Install vue-cli scaffolding [If you use npm, it is recommended to use yarn to download because the npm image download speed is slow abroad; if you still want to use npm to download, it is recommended to configure Taobao image] This article uses yarn to download

Enter the following code to confirm whether yarn is installed on the system

yarn -v

If the version number can be output, it means that yarn has been installed successfully (as shown in the figure)

If it is not installed, enter the following command to install it

npm i -g yarn

3. Use yarn to install scaffolding, enter the following command

yarn global add @vue/cli

Start the installation, as shown in the figure after the installation is complete:

After the download is complete, enter cmd in the path of the current directory to enter the terminal

①Input cmd at the selected location

②Type Enter to open the terminal

③Enter the following command (note the capital V) to check the version number of vue-cli

vue -V

The terminal returns the version number, indicating that the installation is successful

Note that project errors are often due to version mismatch, so you need to download the corresponding version (if the version does not match, you need to uninstall and reinstall)

4. Create scaffolding on the terminal in step 3 (the created project folder is used to store the front-end content, usually named my-app), note that the name of the project creation here cannot be named with hump, otherwise an error will be reported, and only through Lowercase or dash-style naming

The command to create vue-cli is as follows (note that my-app can be any name for creating a project, and my-app is recommended)

vue create my-app

Click the Enter key to enter the version selection page (here, select the vue2 version as an example, as shown in the third item in the figure)

[Note: The first item shown in the figure below is the content saved after the author’s original customization. It may not exist after executing the vue create project name command. How to get it will not be described in detail in this article]