文章目录

  • 组件库
    • 1. 什么是 vue 组件库
    • 2. 最常用的 vue 组件库
    • 3. Element UI
      • 3.1 在 vue2 的项目中安装 element-ui
      • 3.2 引入 element-ui
    • 4. 把组件的导入和注册封装为独立的模块

组件库

1. 什么是 vue 组件库

在实际开发中,前端开发者可以把自己封装的 .vue 组件整理、打包、并发布为 npm 的包,从而供其他人下载和使用。

这种可以直接下载并在项目中使用的现成组件,就叫做 vue 组件库。

2. 最常用的 vue 组件库

  1. PC 端
    Element UI
    View UI
  2. 移动端
    Mint UI
    Vant

(以 Element UI 为例)

3. Element UI

Element UI 是饿了么前端团队开源的一套 PC 端 vue 组件库。支持在 vue2 和 vue3 的项目中使用:
vue2 的项目使用旧版的 Element UI
vue3 的项目使用新版的 Element Plus

3.1 在 vue2 的项目中安装 element-ui

npm i element-ui -S

3.2 引入 element-ui

开发者可以一次性完整引入所有的 element-ui 组件,或是根据需求,只按需引入用到的 element-ui 组件:

完整引入:操作简单,但是会额外引入一些用不到的组件,导致项目体积过大
按需引入:操作相对复杂一些,但是只会引入用到的组件,能起到优化项目体积的目的

(Vue3 网页进不去,以Vue2为例)
引入 element-ui

4. 把组件的导入和注册封装为独立的模块

在 src 目录下新建 element-ui/index.js 模块。

import Vue from 'vue'
// 按需导入element-ui组件
import { Button, Input } from 'element-ui'// 注册需要的组件
Vue.use(Button)
Vue.use(Input)

在main.js中导入

import './element/index.js'

Vue----组件库相关推荐

  1. 使用vue加svg实现流程图代码_京东风格的移动端Vue组件库NutUI2.0来啦

    移动端 Vue 组件库 NutUI 自发布以来受到了广泛的关注.据不完全统计,目前至少有30多个京东的 web 项目正在使用 NutUI . 经过一段时间紧锣密鼓的开发,近期,京东正式发布了 NutU ...

  2. 京东Vue组件库NutUI 2.0发布:将支持跨平台!

    NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布.据不完全统计,目前在京东至少有30多个 web 项目正在使用 Nut ...

  3. 不厌其烦,又一个Vue组件库

    Github仓库地址: github.com/ms-design/m- 文档和Demo网站: ms-design.github.io MS Design 基于微软 Fluent Design 设计的 ...

  4. vue 组件库发布_如何创建和发布Vue组件库

    vue 组件库发布 Component libraries are all the rage these days. They make it easy to maintain a consisten ...

  5. Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库

    Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...

  6. Antd Vue 组件库之Table表单

    Antd Vue 组件库之Table表单 Table 表格 展示行列数据. 何时使用 当有大量结构化的数据需要展现时: 当需要对数据进行排序.搜索.分页.自定义操作等复杂行为时. 如何使用 指定表格的 ...

  7. 十多款优秀的Vue组件库介绍

    十多款优秀的Vue组件库介绍 1. iView UI组件库 iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.iView的组件还是比较齐全的,更新也很快, ...

  8. GitChat · 前端 | Vue 组件库实践和设计

    来自 GitChat 作者:周志祥 更多IT技术分享,尽在微信公众号:GitChat技术杂谈 前言 现在前端的快速发展,已经让组件这个模式变的格外重要.对于市面上的组件库,虽然能满足大部分的项目,但是 ...

  9. Vant - 高效的 Vue 组件库,再造一个有赞移动商城也不在话下

    Vant ( \ˈvænt\ ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant,可以快速搭建出风格统一的页面,提升开发效率.目前已有近 ...

  10. vue组件库大全(忘了的时候可以进来找一下~)

    基于Vue的组件库 https://github.com/ElemeFE/element" element 饿了么出品的Vue2的web UI工具套件 https://github.com/ ...

最新文章

  1. pd.dataframe.append
  2. 识别网络应用所使用的协议Amap
  3. 图解MySQL删除再安装教程
  4. php中id如何与删除关联,ThinkPHP查询语句与关联查询用法实例
  5. 联想集团委任杨澜为独立董事:任期三年年薪235万元
  6. 如果编程语言是女孩,你最喜欢哪一个?
  7. 关于asp.net C# 导出Excel文件 打开Excel文件格式与扩展名指定格式不一致的解决办法...
  8. python 主线程_Python 主线程捕获子线程异常
  9. [转帖]达梦数据库(DM6)和ORACLE 10g的异同点
  10. img 图片加载出错时 显示默认图片
  11. copy和strong的区别
  12. 为什么定积分可以求面积?
  13. 使用MapReduce实现k-means算法
  14. 费马小定理(详细证明)
  15. 为什么程序员喜欢在半夜写代码?
  16. leetcode系列】【面试题】【中等】数组中数字出现的次数(位运算、二分)
  17. TensorFlow2 手把手教你实现自定义层
  18. 使用Python处理百万数据量的Excel文件:删除列、切分换行、替换去重
  19. Kepware读取研华ADAM4017总结
  20. ZipArchive打开文件时的错误代码

热门文章

  1. 自动布局神器 -- ZXPAutoLayout框架的使用
  2. 将一般算术表达式转化为逆波兰表达式,并求逆波兰表达式的值。
  3. wifi无线破解之跑pin最详细教程 2017
  4. 用云服务器储存文件空间,用云服务器储存文件空间
  5. java工作流程引擎比较,技术架构选型。你喜欢用那种?
  6. 矩阵的转置与求导运算
  7. 给老年人“种草”,是不是一门好生意?
  8. mina框架详解-小白收藏
  9. T-SNE可视化实现
  10. tomcat访问html文件