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组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了keep-alive组件的作用与原理,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器
本篇文章主要介绍了Vuejs入门教程之Vue生命周期，数据，手动挂载，指令，过滤器的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
这篇文章主要为大家详细介绍了vue实现pc端拍照上传功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
在Vue项目中集成CryptoJS进行数据加密,首先需要通过npm安装CryptoJS安装包,然后在项目文件中引入CryptoJS,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-11-11
自适应布局是一种根据不同的设备屏幕分辨率进行布局的方式,它为不同的屏幕分辨率定义了不同的布局,下面这篇文章主要给大家介绍了关于vue前端自适应布局实现的相关资料,需要的朋友可以参考下2024-08-08
最近因为公司的新项目决定使用Vue.js来做，但在使用的过程中发现了一个有趣的事情，因为发现的这个事情展开了一些对于getter和setter的思考，具体是什么下面通过这篇文章来一起看看吧，有需要的朋友们可以参考学习。2016-12-12
平时写vue的时候知道 props 有很多种用法，今天我们来看看vue内部是怎么处理 props 中那么多的用法的。非常具有实用价值，需要的朋友可以参考下2019-01-01
本篇文章主要介绍了vue 里面使用axios 和封装的示例代码，非常具有实用价值，需要的朋友可以参考下2017-09-09
在一些网站经常可以看到切换语言包,将网站转化成多种语言版本的情况,下面这篇文章主要给大家介绍了关于vue中i18n的安装与几种使用方式的相关资料,需要的朋友可以参考下2022-09-09
这篇文章主要介绍了vue项目实现通过ip地址访问和localhost访问方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论