教程1 Vue3环境搭建（非常详细，有过程截图）

一、VS code 下载安装

1、下载网址：https://code.visualstudio.com/Download

2、下载后安装

3、运行VS Code

4、安装中文插件

键盘按快捷键Ctrl+Shift+P,界面上就会出现一个命令行输入框，输入Configure Display Language(配置显示语言）

完成后重启vscode, vscode 汉化完成

二、Node.js 下载安装

1、下载网址：https://nodejs.org/en/

下载推荐的版本18.14.0 LTS

2、下载后安装

3、编辑环境变量path

（1）在node安装目录创建node_global和node_cache文件夹

（2）“环境变量” -> “系统变量”：编辑系统变量里的Path，将相应的路径新增如下：C:\vue\node-v16.18.0-win-x64\node_global（这是我电脑上的，请使用自己的安装目录）

（3）系统变量设置：添加变量 NODE_PATH 值为：D:\Program Files\nodejs\node_modules

node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。

（4）查看node版本

node -v

三、开发第一个Vue项目

1、创建项目

npm config set registry https://registry.npm.taobao.org/
npm init vue@latest

生成如下项目文件结构

2、安装依赖

 cd .\vue-project-1\
 npm install

3、运行项目

npm run dev

4、浏览器中查看

四、安装插件

1、volar

用于为.vue单文件组件提供代码高亮以及语法支持。

2、Vite

是一种新型前端构建工具，能够显著提升前端开发体验。

3、Vue VSCode Snippets

Vue VSCode Snippets 插件旨在为开发者提供最简单快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段。简直是 Vue3 开发必备神器。

（1）输入vfor快速生成 v-for指令模版

4、 Auto Close Tag

Auto Close Tag 插件是一个很好用的 VS Code 扩展，它对生产率有很大影响。顾名思义，当我们在结束标记中键入结束括号时，它将添加结束标记。它支持HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX等。

5、Vue Peek

Vue Peek 插件用来拓展 Vue 代码编辑的体验，可以让我们快速跳转到组件、模块定义的文件。
右键组件标签，跳转到组件定义的文件

6、Vue Theme

Vue Theme 插件提供了不错的 Vue 主题，还支持配置不同颜色。