vue3+vite使用element-plus问题
更新时间：2023年10月09日 09:28:37 作者：妍崽崽@
这篇文章主要介绍了vue3+vite使用element-plus问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
前言
vue3+vite的项目中使用 element-plus的教程。
官方地址：安装 | Element Plusa
1、安装
pnpm install element-plus -S
如果需要：cdn引入：index.html中加入下面的
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" rel="external nofollow" /> <script src="//unpkg.com/vue@3"></script> <script src="//unpkg.com/element-plus"></script>
2、引入
import 'element-plus/dist/index.css' const app = createApp(App) app.use(ElementPlus)
按需引入：需要安装额外的插件来支持
1）安装
npm install -D unplugin-vue-components unplugin-auto-import
2）vite.config.js
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()],
}),
],
})3、页面上使用
1）页面上直接用组件
<el-button>登录</el-button>
2）js中使用
import { ElMessage } from 'element-plus'
ElMessage('this is a message.')
ElMessage({
message: 'Congrats, this is a success message.',
type: 'success',
})总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
详解vue3.2新增的defineCustomElement底层原理
本文主要介绍了vue3.2新增的defineCustomElement底层原理，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
为了解决加载组件中出现的报错、超时、状态展示等问题,可以使用 Vue 3 提供的异步组件（Async Components）,它对于加载过程做了更细致的控制,这篇文章主要介绍了Vue 3 进阶用法之异步组件,需要的朋友可以参考下2024-04-04
elementui+vue+axios实现文件上传本地服务器
这篇文章主要为大家详细介绍了elementui+vue+axios实现文件上传本地服务器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
今天小编就为大家分享一篇vue-router之nuxt动态路由设置的两种方法小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vue父组件如何获取子组件中的变量，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
Vue.js是现在比较优秀的Web前端框架,非常推荐大家入门学习,这篇文章主要给大家介绍了关于如何一步步从零搭建一个Vue项目的相关资料,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2022-05-05
本文主要介绍了Vue中tab栏切换的简单实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了vue中控制mock在开发环境使用,在生产环境禁用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue+webpack dev本地调试全局样式引用失效的解决方案
今天小编就为大家分享一篇vue+webpack dev本地调试全局样式引用失效的解决方案，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要给大家介绍了关于vue权限路由实现方法的相关资料，文中通过示例代码介绍地方非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-07-07
最新评论