[Web] Vue development environment setup tutorial (detailed)

Series of articles

C# underlying library – logging helper class
This article link: https://blog.csdn.net/youcheng_ge/article/details/124187709

---

Preface

This column is [H5], which mainly introduces front-end knowledge points.

1. Installation preparation

1.1 node.js

Link: https://nodejs.org/en/download

1.2 Domestic mirror stations

Link: https://developer.aliyun.com/mirror/?spm=a2c6h.25603864.0.0.60dd1a8cRsjAyM

1.3 Vue scaffolding

Link: https://cli.vuejs.org/zh/guide/installation.html

1.4 element ui

Eleme UI library
https://element.eleme.cn/#/zh-CN

1.5 Visual Studio Code

Link: https://code.visualstudio.com/Download

2. Installation steps

2.1 Download msi installation package

LTS stable version, Current development version
32-bit 32-bit operating system, 64-bit 64-bit operating system.

2.2 Double-click to open and continue until the installation is completed.

2.3 Check whether node.js is installed successfully

Ctrl+R opens the cmd command window and enter the following command:

node -v

2.4 Modify npm image

npm is located abroad, and our downloading will be very slow without a VPN, so we need to change it to a domestic mirror.

//查看当前镜像地址
npm config get registry

//修改镜像地址，为阿里镜像
npm config set registry https://registry.npmmirror.com

注意:原 http://registry.npm.taobao.org已下线，国内很多资料未及时更新，依旧教你使用旧的。

2.5 Install vue scaffolding

In the same cmd command window, enter the following command:

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.6 Check whether the vue scaffolding is installed successfully

vue -V

注意:此处的V是英文大写。

2.7 Create vue project

Create a project directory, anywhere.

In the red box, directly enter cmd, hit the Enter key, open the cmd command window, and enter the following command:

vue create ys-dms

At this point the project is created successfully.

2.8 Install vscode and install the plug-in

The red box recommends installing plug-ins

3. Notes and supplements

3.1 vscode terminal, prompts that running scripts is prohibited

Solution:
1. Uninstall node.js and reinstall it.
2. The computer is installed with encryption software. The json file is encrypted when downloading, which makes it impossible to verify the file.
3. Due to insufficient permissions, run as an administrator.
4. Execution_Policies (running policies) need to be removed. )limits.

set-ExecutionPolicy RemoteSigned //设置为RemoteSigned 远程签名的

3.2 npm download speed is slow

Solution:
1. Use yarn to download
2. Use cnpm to download
3. Modify the mirror address. It is best to check what the latest mirror address is first.