Steps to build a project using vue-cli scaffolding

1. Install node

Download URL: Download | Node.js

After the download is complete, open it and click next

2. Verify the installation

Open the terminal, check the version of node and npm, and verify whether the installation is successful

(1). Click the search box in the navigation bar at the bottom of the computer

(2). Enter cmd and press Enter

(3). The command to view the node version: node space -v

   View the command of the npm version: npm space -v

If you opened the terminal before installation, you need to close the terminal after installation and reopen it 

3. Configure the source address

By default, when npm installs a package, it will download it from a foreign address. The speed is very slow, and it is easy to cause installation failure. Therefore, you need to configure the source address of npm first.

(1). Use the following command to change the source address of npm to Taobao source

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

(2). After changing, check whether the source address has been changed correctly

npm config get registry

 4. Install vue-cli

(1) Use the following command to install the vue-cli tool

npm install -g @vue/cli

(2) After installation, check whether vue-cli is installed successfully

vue --version

5. Use of vue-cli

(1) Enter a directory in the terminal

Choose a directory where your project folder will be placed

Go to that directory in terminal

(2) Construction project

Use the commands provided by vue-cli to build the project

(1) vue create project name

 Note: The project name can only be lowercase, and only English, numbers and dashes can appear

(2)

(3) Things that need to be installed, currently only need to use babel to handle compatibility

 

 (4) Do some other configuration files except vue need to be integrated into one file or use a separate file, here choose json to integrate into one file

 (5) Whether to keep the same configuration for future projects, select No here and press Enter

 

 (6) Wait for the project to be built

(7) After the construction is completed, a project folder is generated in the directory

 (8) Import this project folder called bili-app in vscode

 (9) Enter the terminal in the project directory

 (10) Use the npm run serve command to start our project

 

 (11) Enter the local server address in the Google browser address bar to enter the initial page of the project

6. Analyze the structure of the vue project

 

 The above is a more detailed vue-cli scaffolding construction project steps

Guess you like

Origin blog.csdn.net/weixin_46501763/article/details/127806044