Super detailed tutorial on building a Vue development environment on VS Code

This ultra-detailed tutorial on building a vue development environment on Visual Studio Code will teach you step by step!

First, there are several steps to build a vue development environment on Visual Studio Code:

1. Download and install node.js

2. Install npm

3. Install cnpm

4. Install vue/cli scaffolding

5. Create a vue project

 6. Run the vue project

 1. Download and install node.js

Address: node.js official website download

Open Visual Studio Code and open the terminal as shown below:

Enter the following command line in the terminal

Check whether node.js is installed successfully

node -v

2. Install npm

Check if npm is installed successfully

npm -v

 

Note: Because the npm package is available on node.js, there is no need to download it here.

3. Install cnpm

Install cnpm using the command line

npm install -g cnpm --registry=https://registry.npmmirror.com

 Note: There may be problems here. PowerShell is used to control the conditions for loading configuration files and running scripts. In order to prevent the execution of malicious scripts, you may encounter problems that cannot run scripts;

Solution: It can be solved by modifying the PowerShell execution policy;

Steps: press the win key to search for Power Shell and run it as an administrator, enter the following code Enter in the input box, and type Y to modify the execution strategy;

detailed steps:

(1) Right-click Start and select Windows PowerShell Administrator.

(2) Enter the following code and type Y to modify the execution strategy;

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope LocalMachine

 Check whether the modification is successful

 Get-ExecutionPolicy -List

 If the following words appear, the modification of the execution strategy is successful

 

 

 ~~~ Install cnpm using the command line ~~~

npm install -g cnpm --registry=https://registry.npmmirror.com

Check whether cnpm is installed successfully

cnpm -v

 4. Install vue/cli scaffolding

Enter the following statement on the terminal panel to execute

cnpm install -g @vue/cli

Effect: 

 

 

Then enter the following statement to check whether the scaffolding is installed successfully;

vue -V

5. Create a vue project

vue create vue-01

 Press Enter continuously to create a project, and you can also press the up and down keys on the keyboard to configure the project.

 Note: vue-01 is the project name.

6. Run the vue project

 enter project

cd vue-01

 run project

npm run serve

 When the style shown in the figure appears on the terminal, it means that the project runs successfully;

 

 At this time, press and hold the keyboard Ctrl key together with the left mouse button to open the project in the browser;