Vue中正确使用Element-UI组件的方法实例
更新时间：2020年10月13日 11:08:37 作者：LoveSongi
这篇文章主要给大家介绍了关于Vue中正确使用Element-UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
一、CDN
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script>
二、npm安装
1、打开终端（开发工具中打开或（win+r）后输入cmd进入）
2、进入到对应的项目中
例：
3、输入vue add element后回车，等待一小会
4、它会提示你是全局引入（Fully import）还是按需引入（Import on demand）,选择 Fully import 回车即可
5、然后会提示（输入 N 回车即可）
6、然后会提示你选择语言，选择 zh-CN 回车即可
7、引入完成（在src目录下会新增一个plugins文件夹和element.js文件）
三、测试是否成功引入
1、在main.js文件中引入element.js
import './plugins/element.js'
在.vue文件中输入<el-button>el-button</el-button>最后 npm run serve 运行项目，若结果显示出下图的按钮效果则表示引入成功！
四、最后附上Element-UI组件库的使用文档地址
https://element.eleme.cn/#/zh-CN/component/installation
总结
到此这篇关于Vue中正确使用Element-UI组件的文章就介绍到这了,更多相关Vue使用Element-UI组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue监听页面滚动到某个高度触发事件流程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
回到顶部在很多网页中都可以见到，本文主要介绍了Vue3 封装回到顶部组件的实现示例，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
今天小编就为大家分享一篇关于vue-router实现嵌套路由的讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
更好的了解项目的目录结构,能更好的去开发项目,下面这篇文章主要给大家介绍了关于vue3项目目录结构的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要为大家详细介绍了vue项目实现按钮可随意移动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Vue中的scoped实现原理及穿透方法,本文通过实例文字相结合的形式给大家介绍的非常详细，需要的朋友可以参考下2018-05-05
这篇文章主要介绍了vue使用Split封装通用拖拽滑动分隔面板组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要介绍了vue中使用require动态获取图片地址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
Vue2 this 能够直接获取到 data 和 methods 的原理分析
这篇文章主要介绍了Vue2 this能够直接获取到data和methods的原理分析，因为methods里的方法通过bind指定了this为new Vue的实例2022-06-06
vue3中update:modelValue的使用与不生效问题解决
现在vue3的使用越来越普遍了,vue3这方面的学习我们要赶上,下面这篇文章主要给大家介绍了关于vue3中update:modelValue的使用与不生效问题的解决方法,需要的朋友可以参考下2022-03-03
最新评论