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使用vueup/vue-quill富文本、并限制输入字数的方法处理
这篇文章主要介绍了vue3使用vueup/vue-quill富文本、并限制输入字数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-03-03vue-vuex中使用commit提交mutation来修改state的方法详解
今天小编就为大家分享一篇vue-vuex中使用commit提交mutation来修改state的方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论