vue组件库(Element UI)
目录
1. 什么是 vue 组件库
2. vue 组件库和 bootstrap 的区别
3. 最常用的 vue 组件库
4. Element UI
4.1 在 vue2 的项目中安装 element-ui
4.2 引入 element-ui
4.3 完整引入
4.4 按需引入
步骤1，安装babel-plugin-component：编辑
步骤2，修改根目录下的babel.config.js 配置文件，新增plugins 节点如下：编辑
步骤3，如果你只希望引入部分组件，比如Button，那么需要在 main.js 中写入以下内容：编辑
4.5 把组件的导入和注册封装为独立的模块
1. 什么是 vue 组件库
在实际开发中，前端开发者可以把自己封装的.vue 组件整理、打包、并发布为npm 的包，从而供其他人下载 和使用。这种可以直接下载并在项目中使用的现成组件，就叫做vue 组件库。
2. vue 组件库和 bootstrap 的区别
二者之间存在本质的区别：
3. 最常用的 vue 组件库
① PC 端
② 移动端
4. Element UI
Element UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在vue2 和 vue3 的项目中使用：
4.1 在 vue2 的项目中安装 element-ui
运行如下的终端命令：
4.2 引入 element-ui
开发者可以一次性完整引入所有的element-ui 组件，或是根据需求，只按需引入用到的element-ui 组件：
4.3 完整引入
在 main.js 中写入以下内容：
4.4 按需引入
借助babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。
步骤1，安装babel-plugin-component：
步骤2，修改根目录下的babel.config.js 配置文件，新增plugins 节点如下：
步骤3，如果你只希望引入部分组件，比如Button，那么需要在 main.js 中写入以下内容：
4.5 把组件的导入和注册封装为独立的模块
在 src 目录下新建element-ui/index.js 模块，并声明如下的代码：
vue组件库(Element UI)相关推荐
- vue组件库介绍以及组件库Element UI 的使用
组件库 前言 这篇文章介绍vue组件库! 介绍什么是组件库以及Element UI组件库的使用! 看完不会你打我.哈哈哈,开玩笑的,不多说,上刺刀!! 1. 什么是 vue 组件库 在实际开发中,前端 ...
- Vue UI组件库(Element UI库)
1 移动端常用 UI 组件库 1. Vant Vant 4 - 轻量.可定制的移动端组件库 (vant-ui.github.io) 2. Cube UI cube-ui Document (didi ...
- 前端组件库(Element UI)的实现原理：教你如何实现自定义组件库，并打包发布至npm
前端组件库实现原理 前言 Demo地址 一. 组件库开发流程 1)新建vue项目: 2)编写自定义组件,封装成插件: 3)修改配置项 webpack.config.js: pakage.json: 4 ...
- Vue组件库 View UI 来看看这80种奇奇怪怪的按钮
80种奇奇怪怪的按钮,先睹为快! 本文详细讲解 View UI 中,Button 组件的样式配置和单击事件响应. 目录 一.按钮样式 1.1 颜色 1.2 大小 1.3 按钮形状 1.4 背景透明 1 ...
- 2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
- vue统计组件库和ui框架
element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 ...
- UI组件库Kendo UI for Vue中文入门指南（四）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 7. ...
- vant官网-vant ui 首页-移动端Vue组件库
Vant 是有赞前端团队开源的移动端vue组件库,适用于手机端h5页面. 鉴于百度搜索不到vant官方网址,分享一下vant组件库官网地址,方便新手使用 vant官网地址https://vant-co ...
- UI组件库Kendo UI for Vue中文入门指南（二）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 5. ...
- UI组件库Kendo UI for Vue中文入门指南（一）
在本文中,您将通过构建一个包含 Grid.DropDownList.Window 和设计主题的小应用程序来学习如何使用Kendo UI for Vue组件. Kendo UI最新官方正式版下载 1. ...
最新文章
- Android 多媒体综述
- CVPR 2018论文解读 | 基于域适应弱监督学习的目标检测
- php 移植 arm 精简,arm linux 移植 PHP
- 现代C++模板元编程基础
- SCPPO（三）:禅道的使用—项目管理员、开发等人员
- 解决Win7系统没有声音 麦克无声等问题
- 昨天我上午下单买的电池，已经到了长沙
- SkeyePlayer rtsp、rtmp低延迟播放器源码解析之64位编译方案
- 怎样快速打出初中常用的化学反应方程式
- 用python做youtube自动化下载器！附完整代码！
- 最优传输理论与计算 ——雷娜 顾险峰 【新书发布】
- linux驱动之输入子系统
- dd 命令用来测试硬盘及网络带宽读写速度
- 爸爸给女儿存了一份养老险，女儿50多岁时可以领取30多万
- 使用Python计算身份证号码最后检验位
- js前端base64转码解码
- Cesium:加载GeoServer-WMS服务
- DPC创始人Bard：DPC公链基于dpos算法开发的一条支付公链
- [小白/详细]AC2100刷机教程开启telnet失败刷Breed----各类问题解决方案
- PHP之旅——出发（php+apache+MySQL）