friendly reminder

First look at the article directory to get a general understanding of the structure of the knowledge points. You can directly click on the article directory to jump to the specified location of the article.

Chapter 1, Vue environment construction

1.1) What are node and npm

①Node: It is the runtime environment of JavaScript. In the browser, js cannot operate files, and node provides file operations. In the browser, js cannot write the service interface, and node provides the function of writing the back-end code (writing the background, operating the database). But we will not use node to write the backend. Node is more for configuring front-end projects, such as: cross-domain proxy.
②Npm: npm is a package management tool provided by node, similar to maven. To install dependent packages through npm, there is no need to use script tags on the page to import.

1.2) node download

Official website download address, click to jump
① Click to download and install, and then click all installation packages
insert image description here

②Select the parent directory
insert image description here

③Find the v16.18.0 version
insert image description here
④Choose the Windows installation-free version to download, and it can be directly decompressed. Note that the decompression path cannot contain Chinese

1.3) Configure the environment variables of node

①Copy the decompressed path
insert image description here
②win+E to open Manager –> This Computer –> Properties

③Select Advanced System Settings

④Select Environment Variables ⑤Click

path and edit

⑥Click New and enter the path you just decompressed:

⑦Enter node -v test in the cmd window, and the following page appears, indicating that the installation is successful
insert image description here

1.4) Common npm commands

Note: -g is for global installation

//安装脚手架
npm install -g @vue/cli 

//卸载vue脚手架
>:npm uninstall vue-cli -g

//强制清除npm缓存：
npm cache clean --force

//再执行安装npm：
npm install -g npm

//npm安装插件
npm install 组件名 -g

//npm卸载插件
npm uninstall 组件名 -g

//npm查看插件
npm list

//设置国内镜像
npm config set registry https://registry.npm.taobao.org

//查看镜像是否切换成功：
npm config get registry

1.5) npm set domestic mirror

①Open IDEA, File—"settings
insert image description here ②tools—>terminal—>modify shellpath—>restart IDEA

③After configuration, you can use the command line in IDEA

④Set up domestic mirroring

Chapter Two, Scaffolding Installation

2.1) Scaffold installation

①Install command

//安装脚手架
npm install -g @vue/cli

//卸载vue脚手架
npm uninstall vue-cli -g

②Install scaffolding in IDEA, if the installation fails, uninstall and reinstall
insert image description here

③The following prompt appears as success
insert image description here

2.2) Create a vue project with the command

①Enter the creation command in the terminal

vue create 项目名（名称不能有中文，必须全小写，可用下划线）

insert image description here

② Press the up and down arrows to select the grammar template
insert image description here
③ After the creation is successful, it will prompt successful