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-06-06
这篇文章主要介绍了vue项目设置scrollTop不起作用(总结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
这篇文章主要介绍了ant-design表单处理和常用方法及自定义验证操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最近有个项目需求就是在客户端的右上角要实时展示提醒消息,下面这篇文章主要给大家介绍了关于Vue通知提醒框(Notification)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了解决.vue文件url引用文件的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了基于vue配置axios的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了将Vue组件库更换为按需加载的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-05-05
这篇文章主要为大家介绍了vue-next-admin项目使用cdn加速的详细配置，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
Vue中内置了很多的指令,但有时候这些指令并不能满足我们,或者说我们想为元素附加一些特别的功能,这时候我们就需要用到vue中一个很强大的功能了—自定义指令,这篇文章主要给大家介绍了关于vue中自定义指令（directive）的基本使用方法,需要的朋友可以参考下2021-09-09
今天我们来说一说vue1.0和vue2.0的主要变化有哪些？对vue相关知识感兴趣的朋友一起学习吧2017-05-05
最新评论