Element-ui的使用

今天跟大家分享一下Element-ui的使用

文章目录

一、基于命令行方式手动安装
二、基于图形化界面自动安装
- 1.运行vue ui命令，打开图形化界面
- 2.通过Vue项目管理器，进入具体的项目配置面板
- 3.点击插件，添加插件，进入插件查询面板
- 4.搜索vue-cli-plugin-element并安装
- 5.配置插件，实现按需导入，从而减少打包后项目的体积
总结

一、基于命令行方式手动安装

首先我们需要安装依赖包

在这里插入图片描述

接下来要打开我们的文件也就是我们项目里面的打包入口文件

在这里插入图片描述
导入ElementUI组件库，以及组件相关的样式，通过来配置Vue插件

到ElementUI的官方文档拿个案例的代码试一下，就拿select选择器的代码吧，加到项目里的的头部位置

在这里插入图片描述
执行npm run serve命令这里的话好像报了个错，查阅了一下资料好像是说脚手架创建项目的时候linter/Formatter，选择了eslint-config-standard？然后我把.里面的’@vue/standard’代码注释了重新跑一次就好了

成功

这样Elemen-ui的简易使用就完成了
在这里插入图片描述

二、基于图形化界面自动安装

1.运行vue ui命令，打开图形化界面

在这里插入图片描述

2.通过Vue项目管理器，进入具体的项目配置面板

点击vue项目管理器新建一个项目
在这里插入图片描述
选择好文件夹点击在此创建新项目

填写好相关信息

选择上次配置好的预设

在这里插入图片描述

3.点击插件，添加插件，进入插件查询面板

在这里插入图片描述

4.搜索vue-cli-plugin-element并安装

点击添加插件后找到对应的element-ui的插件，单击选中并安装
在这里插入图片描述

5.配置插件，实现按需导入，从而减少打包后项目的体积

安装完成后要对插件进行相应的配置，这里第一项导入Element有默认导入和按需导入，我们选择按需导入就好，默认导入就是只要是ElementUI中的提供的组件全部导入到项目中，会导致项目体积非常大，所以选择按需导入
在这里插入图片描述
选完后剩下两项，就选择默认的本地化设置就好了，然后点击完成安装

在这里插入图片描述
可以看到已安装的插件这里就有ElementUI相关的插件了

在项目中重新运行重新打包一下

接下来在vscode中打开我们这个ElementUI的项目看看有没有配置进去，看到入口文件第四行发现已经导入了plugins目录下的
在这里插入图片描述
到目录下去查看可以看到在element-ui中按需导入了button组件，然后把button注册为Vue的组件文件，这样在组件中就可以使用按钮

这里还是选择ElementUIbutton组件的使用

放到文件中然后serve启动项目很惊讶地报错了
在这里插入图片描述

经过好几番尝试最后竟然又是里面的’@vue/standard’删掉就行了

破案了可以不用删除里面的’@vue/standard’，应该是一些语法警告，ESlint检查出来的，由于在写代码的时候代码没有符合ESlint的语法规范就会报一些错，由于我们在格式化代码时有时候会出现自己变成双引号以及加分号的情况，解决方案就是在项目的根目录中增加一个配置文件.prettierrc来告诉编辑器格式化代码如何进行格式化就像下面这样
在这里插入图片描述
设置semi为false那么在格式化代码的时候就不会自动加分号了，设置singleQuote为true表示启用单引号的格式化