Vscode builds a Vue environment

This article records the process of building a vue environment on vscode. Novice Xiaobai wants to learn and discuss with everyone~

1. Install nodejs

Official website link: nodejs official website
Download according to the display of the personal computer model, pay attention to specify the installation path during installation, and then keep selecting next.

2. Configure environment variables

1. Create two folders node_cache (nodejs cache) and node_global (global package storage) in the nodejs installation directory, as shown in the figure below.
insert image description here
2. Open the cmd command prompt, and the configuration file path is as follows:

3. Configure environment variables
System Properties -> Advanced -> Environment Variables -> New Environment Variables:

The results are as follows:

insert image description here

3. Build the Vue environment in vscode

1. Install plug-ins : ① ESLint, a tool for unifying JavaScript code style. ②

2. Enter the following command in the vscode terminal :

npm i -g @vue/cli

If the error is reported,
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程的名称...
you can close vscode, choose to open it again as an administrator, or check whether the environment variable is configured correctly.

Install webpack: js packaging tool

npm install -g webpack

Check the version of node, npm and vue

node -v
npm -v 
vue -V

Pay attention to vue -V , if an error is reported,
vue : 无法加载文件 D:\nodejs\node_global\vue.ps1，因为在此系统上禁止运行脚本...
first run vscode as an administrator, and enter the following command in the terminal:

get-ExecutionPolicy
set-ExecutionPolicy RemoteSigned
get-ExecutionPolicy
vue -V

3. Create a vue project :
demo is the name of the vue project, and enter the command in the terminal:

vue init webpack demo

If it appears:
insert image description here
follow the prompts to enter: neo4j_echarts>npm i -g @vue/cli-init
and then re-enter vue init webpack demo
the following options appear, just enter the enter key

The following prompt appears:
insert image description here

Enter the above two commands, the final result is insert image description here

Click the link to complete the project creation:
insert image description here

4. Handle error reporting

An error is reported when running the vue file

Virtual script not found, may missing <script lang="ts"> / "allowJs": true / jsconfig.json.
Solution: Create a jsconfig.json configuration file in the project directory, and set "allowJs": true:

{
  "compilerOptions": {
    "allowJs": true,
  }
}