Vue3项目中引入ElementUI并使用的示例详解
Vue3项目中引入 ElementUI
ElementUI是一个强大的PC端UI组件框架，它不依赖于vue，但是却是当前和vue配合做项目开发的一个比较好的ui框架，其包含了布局（layout)，容器（container）等各类组件，基本上能满足日常网站的搭建开发。针对vue2和vue3都有对应的组件版本，本文主要介绍在vue3中如何引入使用ElementUI（vue3中升级为Element Plus）。
1.安装
vue3中使用如下命令通过 npm 安装 ECharts（本人项目使用的安装方式）
$ npm install element-plus --save
也可以使用其他的包管理起进行安装：
# Yarn $ yarn add element-plus # pnpm $ pnpm install element-plus
2.引入
element-plus分为全局引入和按需引入两种方式，一般在工程项目中，由于全局引入会导致不必要的资源加载，为提升项目性能，建议进行按需引入。以下我们对两种引入方式进行介绍。
2.1 全局引入
全局引入就是在项目入口（main.ts）文件直接引入组件以及组件全部的样式文件；代码如下所示：
// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus' //全局引入
import 'element-plus/dist/index.css'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')2.2 按需引入
在vue3中按需引入ElementUI，需要使用其他的插件辅助，需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件；安装方法如下：
npm install -D unplugin-vue-components unplugin-auto-import
然后再vite或者webpack配置中添加相应的配置，如下所示：
vite
// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
})Webpack
// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = {
// ...
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}若篇日志再vue.config.js中，导入方法相同：
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
],
}
})3.使用
引入完毕之后，我们可进行按需引入需要使用的组件，使用方法如下，引入input组件和button组件
<template>
<div>
<el-input class="input" v-model="input" type="file" placeholder="Please input" />
<el-button class="button" type="primary">文件处理</el-button>
</div>
</template>
<script>
import { ElButton, ElInput } from 'element-plus'
import { ref } from 'vue'
export default {
components: { ElButton,ElInput },
}
</script>
<style scoped>
.input {
display: inline;
margin: 20px 30px;
}
.button {
width: 90px;
}
</style>效果如下：
此外ElementUI中还有其他组件，基本能满足开发需求，提升开发效率，详情请见官网：ElementUI
注：在vue3中，由于vite打包拥有良好的性能，本文使用的示例为vite打包方式，同时建议使用其他包最新的支持版本进行开发。
以上就是Vue3项目中引入ElementUI并使用的示例详解的详细内容，更多关于Vue3 ElementUI的资料请关注脚本之家其它相关文章！
相关文章
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
这篇文章主要介绍了Vue2.0+Vux搭建一个完整的移动webApp项目的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要介绍了vue 自动生成swagger接口请求文件的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了解决vue-pdf查看pdf文件及打印乱码的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue获取DOM元素并修改属性或者样式，文中通过两种方法给大家介绍了vue 如何获取并操作DOM元素,需要的朋友可以参考下2022-10-10
在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋,下面这篇文章主要给大家介绍了vue项目如何去掉URL中#符号的相关资料,文中通过实例代码的非常详细,需要的朋友可以参考下2022-07-07
Bootstrap+Vue滑动监听Scrollspy实现餐厅餐品展示
本文主要介绍了Bootstrap+Vue滑动监听Scrollspy实现餐厅餐品展示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
axios是一个基于Promise的，发送http请求的一个工具库，并不是vue中的第三方插件，使用时不能通过“Vue.use()”安装插件，需要在原型上进行绑定2023-04-04
这篇文章主要介绍了VUE注册全局组件和局部组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
vue-types 在 Vue 3 中的使用主要适用于希望进行更细致的 prop 验证的场景,尤其是在 JavaScript 项目中,这篇文章给大家介绍vue3中如何使用vue-types,感兴趣的朋友跟随小编一起看看吧2024-04-04
最新评论