-
2021-10-15 09:57:00
常用的vue组件库总结
1、element-ui
此组件框算是vue的标配
用途:适用于PC端开发
地址:点击查看2、Vant
Vant 对内承载了有赞所有核心业务,对外服务十多万开发者,是业界主流的移动端组件库之一。
**用途:**适用于移动端app开发
地址:点击查看3、Mint UI
Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要。通过它,可以快速构建出风格统一的页面,提升开发效率。
用途:适用于移动端app开发
地址:点击查看4、uView
uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码, 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。
用途:适用于小程序、公众号、移动端app
地址:点击查看更多相关内容 -
vue组件库
2019-08-10 08:30:34vue组件库 -
教你搭建按需加载的Vue组件库(小结)
2020-10-16 15:32:16主要介绍了教你搭建按需加载的Vue组件库(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
figma-plugin-ds-vue:ue与Figma设计系统相匹配的Vue组件库,用于构建Figma插件
2021-04-11 21:54:47figma-plugin-ds-vue是与匹配的Vue v2.x组件库用于构建Figma插件。 它基于 。 :sparkles: 安装 安装软件包npm i figma-plugin-ds-vue 在您的应用程序中包含全局样式表(在组件级或通过将其导入到应用程序的入口... -
vue-component-library:使用Rollup,Typescript + Vue建立并运行您自己的Vue组件库的项目框架
2021-05-01 19:25:34Vue组件库 对于Vue 3 创建此项目框架是为了帮助人们开始使用以下方法创建自己的Vue组件库: (V3) 它具有以下特点: 可帮助您创建和展示组件 对您的Vue组件进行测试 发展 测验 npm run test 建造 npm run ... -
vuecomponent构建属于自己的Vue组件库
2019-08-09 18:42:44vuecomponent 构建属于自己的 Vue 组件库 -
少女风vue组件库的制作全过程
2020-10-17 00:08:13an UI framework based on Vue.js -
详解vue组件化开发-vuex状态管理库
2020-11-26 23:48:24Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可...不知道现在读这篇博客的同学是否有看过Vue2.0子父组件之间通信,子父组件之间的 -
Vue cli3 库模式搭建组件库并发布到 npm的流程
2020-10-17 21:11:13基于 Vue 的颜色选择器 -
20多个好用的 Vue 组件库
2022-03-30 08:00:02作者:lindelof 译者:前端小智 来源:medium ...在本文中,我们将探讨一些最常见的vue js组件。你可以收藏一波。 Table 类 Vue Tables-2 地址:https://github.com/matfish2/vue-tables-2 Vue Tab.作者:lindelof
译者:前端小智
来源:medium有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
在本文中,我们将探讨一些最常见的vue js组件。你可以收藏一波。
Table 类
Vue Tables-2
地址:https://github.com/matfish2/vue-tables-2
Vue Tables 2旨在为开发者提供一个功能齐全的工具集,以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。此外,Vue Tables 2正在不断成长、改进,同时也在获得新的功能。
特点
- 可选行及粘性头部
- 虚拟分页
- 下载客户组件数据的CSV
- 有数据层支持的多级分组
- Tailwind 主题
Handsontable
地址:https://github.com/handsontable/handsontable/tree/master/wrappers/vue
handsontable是一款页面端的表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。
同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作。
此外,它还适用于React、Angular和Vue。Handsontable 是一个JavaScript组件,它将数据网格功能与电子表格的用户体验相结合。此外,它还提供数据绑定、数据验证、过滤、排序和CRUD操作。
特点
- 多列排序
- 非连续选择
- 过滤数据和验证数据
- 导出文件
- 有条件的格式化
- 合并单元格
- 隐藏行/列
- 上下文菜单和注释
Ag Grid Vue
地址:https://github.com/ag-grid/ag-grid
Ag-Grid 是一个基于Vue.js的数据表格组件。其中,“ag” 表示 “agnostic”。内部 ag-Grid引擎是在TypeScript中实现的,零依赖关系。
ag-Grid通过包装器组件支持Vue,你可以在应用程序中,就像其他任何Vue组件一样使用ag-Grid。它支持通过属性绑定传递配置,通过事件绑定来处理事件。你甚至可以使用Vue组件来自定义网格UI和单元格内容/行为。
Vue Easytable
地址:https://github.com/huangshuwei/vue-easytable
vue-easytable是我遇到过的最强大的Vue表格组件之一。
表格组件具有许多内置功能,比如说,单元格省略号、固定/灵活的列大小调整、自定义过滤等等。它有几个特点:
- 国际化
- 主题定制
- 内置主题
- 虚拟滚动
- 列固定
- 表头固定
- 表头分组
Vue Good Table
地址:https://github.com/xaksis/vue-good-table
Vue-Good-Table是一个基于Vue.js的数据表组件,简单、干净,具有排序、列过滤、分页等更多基本功能。它有几个特性:
- 表搜索和排序
- 列过滤和分页
- 复选框表格
- 行分组
- 行样式
- 行多选
Vue Toastification
地址:https://github.com/Maronato/vue-toastification
它提供轻巧、简单和漂亮的吐司提示。它有内置的Nuxt支持。而且,它还支持新的Composition API和Vue 3。我们还可以J使用SX来开发自定义组件,提供更加灵活的功能。另外,通用注册允许它在任何应用程序内使用,甚至是React。它有几点特性:
- 完全用Typescript编写,支持所有类型
- 支持RTL
- 定制一切
- 滑动关闭
- 使用onClose、onClick和onMounted钩子创建自定义体验
- 以编程方式删除和更新吐司
Vue Toasted
地址:https://github.com/shakee93/vue-toasted
Vue Toasted是 Vue 最好的toast(提示)插件之一。它被Vue,Laravel,NuxtJS 等许多组织所信任,它响应性强,兼容性好,使用方便,吸引人,有丰富的功能、图标、动作等。
Vue Notifications
地址:https://github.com/se-panfilov/vue-notifications
Vue Notifications是一个与库无关的通知组件,非阻塞。
VueNotiments将您的应用程序与通知UI库连接起来。支持miniToastr、VueToasted、VueEasyToast、toastr、iziToast、Noty、swal。
Vue Awesome Notifications
地址:https://f3oall.github.io/awesome-notifications/
Awesome Notifications是一个轻量级的,完全可自定义的JavaScrip Vue Awesome Notifications,它是Awesome Notifications库的Vue.js版本。
Vue Wait
地址:https://github.com/f/vue-wait
Vue Wait 这是一个用于VUE、Vuex和Nuxt应用的复杂装载器和进度管理组件。
Vue Wait帮助管理页面上的多个加载状态,状态之间没有任何冲突。基于一个非常简单的想法:通过管理具有多个加载状态的数组(或者Vuex存储),让内置加载程序组件侦听注册的加载程序,并立即进入加载状态。
Vue Content Loader
地址:https://github.com/egoist/vue-content-loader
Vue Content Loader是一个基于Vue.js的SVG占位符加载,可自定义的SVG组件,用于创建占位符加载,例如Facebook加载卡。 Vue Content Loader是react-content-loader的Vue实现。
- 完全可定制:你可以改变颜色,速度和大小
- 创建自己的加载:使用在线工具轻松创建你的自定义加载
- 你现在就可以使用它:已经有很多预设了
- 性能
Epic Spinners
地址:https://epic-spinners.epicmax.co/
EpicSpinners是一组易于使用的纯css打造的网页Loading效果,并且同时整合了Vue组件可以方便的在Vue项目中进行使用,由于是纯css打造,你可以在任意网页项目中自行整合并使用!
Vue Radial Progress
地址:https://github.com/wyzant-dev/vue-radial-progress
Vue Radial Progress 这是一个径向进度条效果的加载器组件,使用svg和javascript绘制带有渐变径向进度条效果的加载器,可以用作加载、进度提示。
ICONS
Vue Feather Icons
地址:https://github.com/egoist/vue-feather-icons
Feather 是一套面向设计师和开发者的开源图标库,是一个简单漂亮的开源图标库。 每个图标都设计在一个24×24的网格上,强调简单,一致性和易读性。很多大厂出品的前端框架都内置了这款可以免费商用的图标。
特点
- 每一枚图标都是按照统一标准进行设计,具有完美像素对齐;
- 设计风格一致,完胜那些拼凑混搭的图标库;
- 覆盖多种开发场景的支持,对开发者非常友好。
Vue Awesome
地址:https://github.com/Justineo/vue-awesome
Font Awesome是一套流行的图标字体库,我们在实际开发的过程中会经常遇到需要使用图标的场景,对于一些常用的图标,不用设计师,我们可以直接在Font Awesome中找到并且使用。个人感觉Font Awesome的图标还是很齐全的,绝大多数的图标它都包含了,而且支持各种框架。
Vue Material Design Icons
地址:https://github.com/robcresswell/vue-material-design-icons
一个作为单文件组件的SVG Material Design图标集合。此外,这个库是一个Vue单文件组件的集合,用于渲染Material Design图标。此外,它还包括一些CSS,有助于使图标的缩放更容易一些。
Charts
Vue Apexcharts
地址:https://github.com/apexcharts/vue-apexcharts
Apexcharts是一个现代的JavaScript图表库/可通过简单的API构建交互式图表和可视化。Vue Apexcharts是ApexCharts的Vue.js组件。
Vue Echarts
地址:https://github.com/Justineo/vue-echarts
vue-echarts是基于echarts封装实现的一个组件库,直接按照正常的组件引用方式,安装引用即可,具体的安装和引用读者可以直接阅读vue-echarts技术文档。
Vue Chartjs
地址:https://github.com/apertureless/vue-chartjs
vue-chartjs 是一个 Vue 对于 Chart.js 的封装,让用户可以在Vue中轻松使用Chart.js,很简单的创建可复用的图表组件,非常适合需要简单的图表并尽可能快地运行的人。 vue-chartjs抽象了基本逻辑,同时也暴露了Chart.js对象,让用户获得最大的灵活性。
V-Charts
地址:https://github.com/ElemeFE/v-charts
V-Charts 是基于 Vue2.0 和 Echarts 封装的图标组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,就可以生成常见的图表。
时间
Vue Timer Hook
地址:https://github.com/riderx/vue-timer-hook
Vue3 计时器模块的灵感来自 react-timer-hook。此外,它是一个自定义的钩子,用来处理vue 3 组件中的定时器、秒表和时间逻辑/状态。
Vue Horizontal Timeline:
地址:https://github.com/guastallaigor/vue-horizontal-timeline
Vue Horizontal Timeline 是一个用Vue.js制作的简单的水平时间线组件。
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://medium.com/js-dojo/20-usefulue-js-components-2022-3bf9fbe5b556
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
-
Vue组件库发布到npm详解
2020-11-26 13:01:08制作了一套自己的组件库,并发布到npm上,项目代码见https://github.com/hamger/hg-vcomponents 前期准备 有一个npm账号 安装了vue-cli 搭建项目 vue init webpack hg-vcomponents cd hg-vcomponents cnpm ... -
vue组件库和组件文档生成
2021-03-09 20:50:12公司现役组件库项目,公共资源或者新老项目切换仓库 调整 src 目录结构 |--src |-- App.vue |-- main.js |-- packages // 新建此文件夹用来存放组件 |-- index.js // 组件入口 |-- button.vue // 新增一个button...公司现役组件库项目,公共资源或者新老项目切换仓库
调整 src 目录结构
|--src |-- App.vue |-- main.js |-- packages // 新建此文件夹用来存放组件 |-- index.js // 组件入口 |-- button.vue // 新增一个button组件,记得带上name |-- icon // 新增一个icon组件,记得带上name
packages/index.js
// 所有组件的入口 import Button from './button.vue' import Icon from './icon.vue' // 全局注册 const install = Vue => { Vue.component(Button.name, Button) Vue.component(Icon.name, Icon) } // 防止使用者直接以<script></script>方式引入 if (typeof window.Vue !== 'undefined') { install(Vue) // 直接通过script方式引入组件 } export default { install }
测试组件
import okrUi from './packages/index' Vue.use(okrUi)
app.vue 直接使用
<okr-icon></okr-icon> <okt-btn></okt-btn>
接下来就简单了,只要在 packages 中新增组件就可以,在 index.js 中注册即可
关于发布
okr-ui 目录下新建.npmignore
src // 源码不发 public // 公用资源不发 test // 测试代码不发
package.json
"private": false, // 私有的改成false "version": "0.1.0", // 版本必须每次不一样
测试组件
https://vue-test-utils.vuejs.org/zh/installation/testing-single-file-components-with-karma.html
Karma 是一个启动浏览器运行测试并生成报告的测试运行器。 Mocha 框架撰写测试,同时用 chai 作为断言库。
- 安装依赖
npm install --save-dev @vue/test-utils karma karma-chrome-launcher karma-mocha karma-sourcemap-loader karma-spec-reporter karma-webpack mocha
- 安装 chai
npm install --save-dev karma-chai
官方的配置案例
var webpackConfig = require('./webpack.config.js') module.exports = function(config) { config.set({ frameworks: ['mocha'], files: ['test/**/*.spec.js'], // 匹配所有的spec文件 preprocessors: { '**/*.spec.js': ['webpack', 'sourcemap'] }, webpack: webpackConfig, reporters: ['spec'], browsers: ['ChromeHeadless'] // 打开一个无头的浏览器, 单纯用Chrome会闪动 }) }
组件打包
package.json 新增命令
"lib":"vue-cli-service build --target lib -name okr-ui ./src/packages/index.js"
添加引用入口 package.json 根- 打包后所有的组件都在 umd.min.js 中
"main":"./dist/okr-ui.umd.min.js"
生成组件文档
使用 vuepress
- 根目录下新建 doc 文件夹
初始化
npm init -y
安装 vuepress
npm i vuepress -D
配置 packages.json 新增 script
"docs:dev":"vuepress dev docs", "docs:build":"vuepress build docs"
安装依赖工具
cnpm install element-ui highlight.js node-sass sass-loader --save
配置 vue-press
- doc 根目录下新建 docs(固定)
- docs 下新建 README.md(固定)
- docs 下新建 components 用于存放组件描述文件(固定)
- components 下新建 button.md(此处以 button 组件为例)
README.md(内容格式固定)
--- home: true actionText: 欢迎 → actionLink: /components/button // 以button为例 features: - title: okr组件库 // 名称 details: okr组件库,用公共组件存放,新老项目过度组件存放 // 组件库描述 ---
button.md
## 按钮组件
运行命令
npm run docs:dev
跑起来的内容是不是很熟悉???但是比较丑是不是?
美化组件库文档界面
- 在 docs 下新建文件夹.vuepress
- 在.vuepress 中新增配置文件 config.js
module.exports = { title: 'okr-ui', // 网站标题 description: 'okr公共组件库', // 网站描述 dest: './build', // 设置输出目录 port: '8088', // 端口 themeConfig: { // 主题配置 nav: [ { text: '主页', link: '/' } // 导航条 ], sidebar: { // 侧边栏配置 '/components/': [ { collapsable: true, // 默认折叠 children: ['button'] } ] } } }
- 在.vuepress 文件里新建 styles 文件夹,并在 styles 中新建文件 palette.styl(固定)
$codeBgColor = #fafafa $accentColor=#3eaf7c $textColor=#2c3e50 $borderColor=#eaecef $arrowBgColor=#ccc $badgeTipColor=#42b983 $badgeWarningColor=darken(#ffe564,35%) $badgeErrorColor=#da5961 .content pre { margin: 0 !important; } .theme-default-content:not(.custom) { max-width: 1000px !important; }
- .vuepress 目录下新建 enhanceApp.js(固定)入口定义文件
enhanceApp.js
import Vue from 'vue' import Element from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import hljs from 'highlight.js' import 'highlight.js/styles/googlecode.css' // 自定义指令 Vue.directive('highlight', function (el) { let blocks = el.querySelectorAll('pre code') blocks.forEach(block => { hljs.highlightBlock(block) }) }) export default ({ Vue, options, router, siteData }) => { Vue.use(Element) // 变更20210310,解决build异常问题提 Vue.mixin({ mounted() { import('okr-ui') .then(function (m) { Vue.use(m.default) }) .then(() => { import('okr-ui/dist/okr-ui.css') // 组件库样式 }) } }) }
- okr-ui 没有安装怎么引用?
- 去 okr-ui 根目录执行
npm link
此命令是将该项目链接到全局 - 然后在 docs 的文件中
npm link okr-ui
此命令是将全局注册的 okr-ui 拉进来进行使用 - 经过以上两步就能免发布使用了
- 去 okr-ui 根目录执行
测试
- .vuepress 下新建 components,此文件加下皆为全局组件
- 新建 button 文件夹/button 文件夹/test.vue
- 在 docs 根目录下的 conponents 的 button.md 进行测试
button.md
<button-test></button-test>
这样就会去.vuepress 组件中找到 button/test.vue 组件(固定写法)
运行命令 npm run docs:dev
- corejs 丢失 npm i core-js@2
- okr-ui 找不到???注意你的组件库中 package.json 中 main 属性有没有指定文件?
测试真实组件库中的组件
- 还记得刚才在 doc 文档库中已经引入了 okr-ui 了对吧,已经引用了吧?直接测试组件吧
- 比如我们在 okr-ui 中写了 okr-btn 这个按钮组件吧?
docs/.vuepress/components/button/test.vue
<okt-btn></okt-btn>
看页面是不是有了?
<template> <div> <okt-btn></okt-btn> </div> </template>
实现类似于 element-ui 组件库的文档体验
在 .vuepress 下 components 中新建组件文档展示模板 demo-block.vue
<template> <div class="demo-block" :class="[blockClass, { hover: hovering }]" @mouseenter="hovering = true" @mouseleave="hovering = false" ref="demoBlockContainer" > <div style="padding:24px"> <slot name="source"></slot> </div> <div class="meta" ref="meta"> <div class="description" v-if="$slots.default"> <slot></slot> </div> <div class="highlight"> <slot name="highlight"></slot> </div> </div> <div class="demo-block-control" ref="control" @click="isExpanded = !isExpanded"> <transition name="arrow-slide"> <i :class="[iconClass, { hovering: hovering }]"></i> </transition> <transition name="text-slide"> <span v-show="hovering">{{ controlText }}</span> </transition> </div> </div> </template> <style lang="scss"> .demo-block { border: solid 1px dashed; border-radius: 3px; transition: 0.2s; &.hover { box-shadow: 0 0 8px 0 rgba(232, 237, 250, 0.6), 0 2px 4px 0 rgba(232, 237, 250, 0.5); } code { font-family: Menlo, Monaco, Consolas, Courier, monospace; } .demo-button { float: right; } .source { padding: 24px; } .meta { background-color: #fafafa; border-top: solid 1px #eaeefb; overflow: hidden; height: 0; transition: height 0.2s; } .description { padding: 20px; box-sizing: border-box; border: solid 1px #ebebeb; border-radius: 3px; font-size: 14px; line-height: 22px; color: #666; word-break: break-word; margin: 10px; background-color: #fff; } p { margin: 0; line-height: 26px; } ::v-deep code { color: #5e6d82; background-color: #e6effb; margin: 0 4px; display: inline-block; padding: 1px 5px; font-size: 12px; border-radius: 3px; height: 18px; line-height: 18px; } } .highlight { pre { margin: 0; code { color: black !important; } } code.hljs { margin: 0; border: none; max-height: none; border-radius: 0; line-height: 1.8; color: black; &::before { content: none; } } } .demo-block-control { border-top: solid 1px #eaeefb; height: 44px; box-sizing: border-box; background-color: #fff; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; text-align: center; margin-top: -1px; color: #d3dce6; cursor: pointer; &.is-fixed { position: fixed; bottom: 0; width: 868px; } i { font-size: 16px; line-height: 44px; transition: 0.3s; &.hovering { transform: translate(-40px); } } > span { position: absolute; transform: translate(-30px); font-size: 14px; line-height: 44px; transition: 0.3s; display: inline-block; } &:hover { color: #409eff; background-color: #f9fafc; } & .text-slide-enter, & .text-slide-leave-active { opacity: 0; transform: translate(10px); } .control-button { line-height: 26px; position: absolute; top: 0; right: 0; font-size: 14px; padding-left: 5px; padding-right: 25px; } } </style> <script type="text/babel"> export default { name: 'DemoBlock', data() { return { hovering: false, isExpanded: false, fixedControl: false, scrollParent: null, langConfig: { 'hide-text': '隐藏代码', 'show-text': '显示代码', 'button-text': '在线运行', 'tooltip-text': '前往jsfiddle.net 运行此示例' } } }, props: { jsfiddle: Object, default() { return {} } }, methods: { scrollHandler() { const { top, bottom, left } = this.$refs.meta.getBoundingClientRect() this.fixedControl = bottom > document.documentElement.clientHeight && top + 44 <= document.documentElement.clientHeight }, removeScrollHandler() { this.scrollParent && this.scrollParent.removeEventListener('scroll', this.scrollHandler) } }, computed: { lang() { return this.$route.path.split('/')[1] }, blockClass() { return `demo-${this.lang} demo-${this.$router.currentRoute.path.split('/').pop()}` }, iconClass() { return this.isExpanded ? 'el-icon-caret-top' : 'el-icon-caret-bottom' }, controlText() { return this.isExpanded ? this.langConfig['hide-text'] : this.langConfig['show-text'] }, codeArea() { return this.$refs['demoBlockContainer'].getElementsByClassName('meta')[0] }, codeAreaHeight() { if (this.$refs['demoBlockContainer'].getElementsByClassName('description').length > 0) { return ( this.$refs['demoBlockContainer'].getElementsByClassName('description')[0].clientHeight + this.$refs['demoBlockContainer'].getElementsByClassName('highlight')[0].clientHeight + 20 ) } return this.$refs['demoBlockContainer'].getElementsByClassName('highlight')[0].clientHeight } }, watch: { isExpanded(val) { this.codeArea.style.height = val ? `${this.codeAreaHeight + 1}px` : '0' if (!val) { this.fixedControl = false this.$refs.control.style.left = '0' this.removeScrollHandler() return } setTimeout(() => { this.scrollParent = document.querySelector('.page-component__scroll > .el-scrollbar__warp') this.scrollParent && this.scrollParent.addEventListener('scroll', this.scrollHandler) this.scrollHandler() }, 200) } }, mounted() { console.log(this.$refs.demoBlockContainer) this.$nextTick(() => { console.log(this.$refs['demoBlockContainer']) let highlight = this.$refs['demoBlockContainer'].getElementsByClassName('highlight')[0] if (this.$refs['demoBlockContainer'].getElementsByClassName('description').lenght === 0) { highlight.style.width = '100%' highlight.borderRight = 'none' } }) }, beforeDestroy() { this.removeScrollHandler() } } </script>
在 docs/components 下
使用模板/插槽
重新运行代码,是不是体验很棒??
代码地址
git@github.com:sunhailiang/publish-ui.git
- 安装依赖
-
vue-speedometer:Vue组件库,用于显示使用D3的类似仪表的车速表
2021-05-02 09:25:01vue-speedometer是一个Vue组件库,用于显示速度表,例如使用d3的仪表。 用法: 纱线: yarn add vue-speedometer NPM: npm install --save vue-speedometer // import the component import VueSpeedometer from... -
vue-zephyr:为Tailwind开发人员构建的主题化组件库
2021-02-13 08:06:42Vue Zephyr 为Tailwind开发人员构建的主题化组件库。 有关更多信息和文档,请访问 。 您也可以在关注我们以获取更新。 -
vue组件库的在线主题编辑器的实现思路
2020-10-15 11:47:36主要介绍了vue组件库的在线主题编辑器的实现思路,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 -
Vue多组件仓库开发与发布详解
2020-10-17 08:32:29${componentName} -
vue-atlas-美丽的Vue组件库。-Vue.js开发
2021-05-27 21:53:59如果您对此感到担心,请在下面查看如何仅导入较小捆绑包所需的组件。 //无论您的Vue入口点在哪里。 从'vue-atlas'导入Va导入'vue-atlas / dist / vue-atlas.css'Vue.use(Va,'en')//或'es','fr','ru'导入一些... -
npm发布vue组件库
2022-04-27 09:49:242.新增packages文件夹,用于存放编写好的组件 三、调整目录后会遇到的问题以及怎么解决(如果没有更改重命名src文件的话,这里部分可以忽略不写) 1.将src改为examples会导致项目无法运行 2.新增的packages文件目录...一、创建vue项目
vue create 项目名称
二、调整目录
1.将vue项目中的src目录重命名为examples/tests(示例展示)(可根据自己需要重命名,如果不需要,这一部分可忽略)
2.新增packages文件夹,用于存放编写好的组件
三、调整目录后会遇到的问题以及怎么解决(如果没有更改重命名src文件的话,这里部分可以忽略不写)
1.将src改为examples会导致项目无法运行
2.新增的packages文件目录未加入到webpack编译
创建vue.config.js文件,添加一些配置保证可以正常运行和使用,如下:const path = require('path') module.exports = { pages: { index: { entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } }, // 将packages加入编译 chainWebpack: config => { config.module .rule('js') .include.add(path.resolve(__dirname, 'packages')).end() .use('babel') .loader('babel-loader') .tap(options => { return options }) } }
四、在packages目录下放入编写好的组件,并创建index.js文件对外提供对组件的引用
import MmButton from './MmButton' import MmDialog from './MmDialog' const components = [ MmButton, MmDialog ] const install = function (Vue) { components.forEach(item => { console.log(item) Vue.component(item.name, item) }) } export default { install }
五、在示例examples查看效果,在main.js中全局注册该组件
import HmmUI from '../packages' Vue.use(HmmUI)
在页面中直接使用标签就可以看到效果
<template> <div id="app"> <MmButton type="primary">按钮</MmButton> </div> </template>
六、发布npm包前需要的一些配置
package.json中添加一条编译为库的命令"scripts": { "lib": "vue-cli-service build --target lib packages/index.js" }, --target lib 指定打包的目录 --name 打包后的文件名字 --dest 打包后的文件夹的名称
注意:一定要将package.json中的"private"赋值为false,否则发布不了!
执行
npm run lib
命令,会生成一个打包好的dist文件在package.json中添加"main":
"main": "dist/xxx.umd.min.js"
添加.npmignore文件,设置npm忽略文件(可根据自己的情况去设置忽略文件),以下:
#忽略目录 examples/ packages/ public/ #忽略指定文件 vue.config.js babel.config.js *.map
七、发布npm包
注意:必须时npm,并且npm不能是淘宝镜像,如果是淘宝镜像,则需要改成npm(https://registry.npmjs.org/)。*这里推荐使用nrm去查看和更改npm源哦! *
安装nrm(npm源管理)
npm install -g nrm
查看现有的npm源nrm ls
使用nrm use name(name是需要切换源的名字)切换代码仓库,比如nrm use taobao
- 首先需要注册npm账号,或者已经有的
- 登录npm(
npm login
)
输入用户名,
输入密码(密码是隐藏的,输入完直接回车),
邮箱(输入邮箱,回车后输入邮箱里的验证码)
回车即可登录 - 最后通过
npm publish
发布
八、页面中如何使用
1、下载npm install 包名 --save
2、main.js中引入import TestUI from 'xxx' import 'xxx/dist/xxx.css' Vue.use(TestUI)
3、直接在页面中使用即可
<MmButton type="success">按钮</MmButton>
问题:
1.在发布包的时候如果出现失败,可能是需要更改一次版本号(更新仓库)
2.发布的包名不能是已经存在的名字
在发布包或者登录的时候会遇到这种提示,并且会报错。这是因为“从2021年10月4日开始,所有与npm网站和npm注册表的连接(包括软件包安装)必须使用TLS 1.2或更高版本。”
解决办法是:
首先将npm地址设置为https的地址:npm config set registry https://registry.npmjs.org
如果这样还不行的话,可以运行以下命令支持TLS 1.2:
npm install -g https://tls-test.npmjs.com/tls-test-1.0.0.tgz
-
vue3-components:vue3 ts组件库
2021-02-16 17:02:07Element Plus-一个Vue.js 3.0 UI库 :flexed_biceps: Vue 3.0合成API :fire: 用TypeScript编写 状态:测试版 该项目仍在大力开发中。 欢迎加入我们,并提出您的第一个请求。 特别感谢以下机构的慷慨赞助: 文献... -
vue-technology-ui:一款科技风格的ui组件库
2021-05-19 14:57:54一款科技风格的ui组件库,适用于展示型页面(例如大屏),不适用业务繁杂的场景。 自己利用工作之余完成了文档等工作。文档模板使用了 element ui的docs,做了一些简化,本项目中有不少地方参考了 element ui的实现... -
基于AmazeUI封装的Vue2x组件库
2019-08-10 09:36:58基于Amaze UI封装的Vue2.x组件库 -
AntDesignVue一个基于AntDesign和Vue的企业级UI组件库
2019-08-14 04:35:08Ant Design Vue:一个基于Ant Design和Vue的企业级UI组件库 -
VUE常用组件库
2021-11-19 10:54:45移动端常用组件库 1.Vant https://youzan.github.io/vant 2.Cube UI https://didi.github.io/cube-ui 3.Mint UI https://mint-ui.github.io pc端常用组件库 1.Element UI https://element.eleme.cn 2.IView UI ... -
关于Vue组件库开发详析
2020-08-27 06:49:42主要给大家介绍了关于Vue组件库开发的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 -
vue-component-lib-starter:创建自己的Vue组件库的简单示例
2021-05-12 00:44:06Vue组件库入门 使用和创建自己的组件库。 迟早,您会发现创建组件库比将所有组件包含在应用程序项目中要好得多。 组件库迫使您从组件中删除特定于应用程序的逻辑,从而有可能在其他应用程序中重用它们。 一旦这些... -
Vue-map:基于vue封装的openlayers组件库
2021-04-14 10:18:41语音地图 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。 -
自定义vue组件发布到npm的方法
2020-08-27 13:32:01本篇文章主要介绍了自定义vue组件发布到npm的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧