VUE学习

开发环境

Node.js环境

1、下载安装包
官网：https://nodejs.org/en/

推荐选择LTS版本，因为长期维护

2、下载后傻瓜式安装，直接下一步
3、键盘【win+R】键，输入cmd，然后回车，打开命令行界面，输入 node -v 验证安装

VS Code 安装

1、官网下载安装最新版本
官网：https://code.visualstudio.com/

2、安装成功后，打开VS Code 安装 中文简体 插件

安装完成重启 VS Code

主题、代码高亮什么的插件，去网上百度吧

到此为止，VUE开发的基本环境就配置完成了

创建VUE3.0 项目

创建的项目文件夹

打开项目文件夹

打开终端

创建项目

1、输入命令 vue create 项目名称 回车
注意：项目名称不能大写
回车后会让你选择VUE 版本，选VUE3 回车 就好，然后就等吧，它会装一大堆东西

2、安装完成后进入项目，2种方式
（1）VS Code 重新打开项目
（2）终端 输入 cd 项目名，直接进入

3、进入项目后，终端输入 npm run serve 运行项目

运行后使用本地地址，谷歌浏览器打开即可

解决飘红问题

原因：代码飘红，提示The template root requires exactly one element.eslint-plugin-vue。vue2中，每个组件的标签只能有一个根节点，插入第二个根节点报错。vue3中，每个组件的标签可以有多个根节点。这是因为我们安装的Vetur扩展插件导致的，它有验证规则，提示开发者注意规范，但这个规范只适用于vue2。

解决：
点击vscode左下角的设置，输入template，找到如下截图的验证规则，去掉勾 重启

引入Element-plus

注意：VUE3.0 使用的是element-plus 不是 element组件库

全局引用

1、打开控制台到到你所在的根目录 输入命令 npm install element-plus --save

2、安装完成后，打开package.json检查 安装是否成功；

3、main.js文件之中，导入element-plus