vue add element-plus,vue element plus

　　vue3出来一段时间了，元素也更新了版本去兼容vue3，下面这篇文章主要给大家介绍了关于vue3集成元素加实现按需自动引入组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下

　　 1、第一种方式，使用全局引入2、第二种方式，使用局部引入3、按需自动引入元素加推荐总结元素加正是元素-用户界面针对于vue3开发的一个用户界面组件库，它的使用方式和很多其他的组件库是一样的，其他类似于蚂蚁设计公司都是差不多的；安装元素加首先下载元素加

　　新公共管理安装元素-还有

1、第一种方式，使用全局引入

　　引入元素加的方式是全局引入，代表的含义是所有的组件和插件都会被自动注册，

　　优点：上手快

　　缺点：会增大包的体积

　　在主页面文件中

　　从“vue”导入{ createApp }

　　//全局引入

　　从“元素加”导入ElementPlus

　　导入 element-plus/dist/index.css

　　从导入应用程序 App.vue

　　从导入路由器。/路由器

　　从导入存储。/商店

　　const app=createApp(App)

　　app.use(路由器)

　　app.use(商店)

　　app.use(ElementPlus)

　　app。装载(应用数量)

2、第二种方式，使用局部引入

　　局部引入也就是在开发中用到某个组件对某个组件进行引入，

　　模板

　　div class="应用程序"

　　埃尔按钮默认/el按钮

　　埃尔按钮类型=primary 初级/el按钮

　　el按钮类型=成功成功/el-button

　　El按钮类型= info info/El按钮

　　埃尔按钮类型=警告警告/el按钮

　　el按钮类型=危险危险/el-button

　　埃尔按钮中文/el-button

　　/div

　　/模板

　　脚本语言

　　从“vue”导入{定义组件}

　　//局部引入

　　从“元素加”导入{ ElButton }

　　导入元素加/主题粉笔/El按钮。 CSS

　　导入元素加/主题粉笔/底座。 CSS

　　导出默认定义组件({

　　组件：{按钮}，

　　setup() {

　　返回{}

　　}

　　})

　　/脚本

　　style lang=less/style

　　但是这样我们在开发时每次使用都要手动在组件中引入对应的钢性铸铁样式，使用起来会比较麻烦

3、按需自动引入element-plus推荐

　　需要安装拔下组件插头和拔出-自动导入这两款插件

　　NPM安装-D插头-vue-组件拔掉-自动导入

　　安装完成之后在vue。配置。射流研究…文件中配置

　　//vue.config.js

　　const auto import=require(在自动导入/web pack中拔出)

　　const Components=require(拔下in-vue-Components/web pack )

　　const { ElementPlusResolver }=require( unplugin-vue-components/resolvers )

　　模块。导出={

　　输出目录：“”./build ，

　　//和webpapck属性完全一致，最后会进行合并

　　configureWebpack: {

　　解决：{

　　别名：{

　　组件："@/组件"

　　}

　　//配置工具自动按需引入元素加，

　　插件：[

　　自动导入({

　　解析器：[ElementPlusResolver()]

　　}),

　　组件({