精华内容
下载资源
问答
  • 常用的vue组件库总结
    千次阅读
    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:34
    vue组件库
  • 主要介绍了教你搭建按需加载的Vue组件库(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • figma-plugin-ds-vue是与匹配的Vue v2.x组件库用于构建Figma插件。 它基于 。 :sparkles: 安装 安装软件包npm i figma-plugin-ds-vue 在您的应用程序中包含全局样式表(在组件级或通过将其导入到应用程序的入口...
  • Vue组件库 对于Vue 3 创建此项目框架是为了帮助人们开始使用以下方法创建自己的Vue组件库: (V3) 它具有以下特点: 可帮助您创建和展示组件 对您的Vue组件进行测试 发展 测验 npm run test 建造 npm run ...
  • vuecomponent 构建属于自己的 Vue 组件库
  • an UI framework based on Vue.js
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可...不知道现在读这篇博客的同学是否有看过Vue2.0子父组件之间通信,子父组件之间的
  • 基于 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

    001.png

    地址:https://github.com/matfish2/vue-tables-2

    Vue Tables 2旨在为开发者提供一个功能齐全的工具集,以便用 Vue 创建漂亮而实用的数据表格。数百个商业软件应用正在使用它。此外,Vue Tables 2正在不断成长、改进,同时也在获得新的功能。

    特点

    • 可选行及粘性头部
    • 虚拟分页
    • 下载客户组件数据的CSV
    • 有数据层支持的多级分组
    • Tailwind 主题

    Handsontable

    002.png

    地址:https://github.com/handsontable/handsontable/tree/master/wrappers/vue

    handsontable是一款页面端的表格交互插件,可以通过它加载显示表格内容,能够支持合并项、统计、行列拖动等。

    同时,支持对加载后的表格页面的处理:添加/删除行/列,合并单元格等操作。

    此外,它还适用于React、Angular和Vue。Handsontable 是一个JavaScript组件,它将数据网格功能与电子表格的用户体验相结合。此外,它还提供数据绑定、数据验证、过滤、排序和CRUD操作。

    特点

    • 多列排序
    • 非连续选择
    • 过滤数据和验证数据
    • 导出文件
    • 有条件的格式化
    • 合并单元格
    • 隐藏行/列
    • 上下文菜单和注释

    Ag Grid Vue

    003.png

    地址: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

    005.png

    地址:https://github.com/huangshuwei/vue-easytable

    vue-easytable是我遇到过的最强大的Vue表格组件之一。

    表格组件具有许多内置功能,比如说,单元格省略号、固定/灵活的列大小调整、自定义过滤等等。它有几个特点:

    • 国际化
    • 主题定制
    • 内置主题
    • 虚拟滚动
    • 列固定
    • 表头固定
    • 表头分组

    Vue Good Table

    006.png

    地址:https://github.com/xaksis/vue-good-table

    Vue-Good-Table是一个基于Vue.js的数据表组件,简单、干净,具有排序、列过滤、分页等更多基本功能。它有几个特性:

    • 表搜索和排序
    • 列过滤和分页
    • 复选框表格
    • 行分组
    • 行样式
    • 行多选

    Vue Toastification

    007.png

    地址: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

    008.png

    Vue Toasted是 Vue 最好的toast(提示)插件之一。它被Vue,Laravel,NuxtJS 等许多组织所信任,它响应性强,兼容性好,使用方便,吸引人,有丰富的功能、图标、动作等。

    Vue Notifications

    009.png

    地址:https://github.com/se-panfilov/vue-notifications

    Vue Notifications是一个与库无关的通知组件,非阻塞。

    VueNotiments将您的应用程序与通知UI库连接起来。支持miniToastr、VueToasted、VueEasyToast、toastr、iziToast、Noty、swal。

    Vue Awesome Notifications

    010.png

    地址:https://f3oall.github.io/awesome-notifications/

    Awesome Notifications是一个轻量级的,完全可自定义的JavaScrip Vue Awesome Notifications,它是Awesome Notifications库的Vue.js版本。

    Vue Wait

    011.png

    地址:https://github.com/f/vue-wait

    Vue Wait 这是一个用于VUE、Vuex和Nuxt应用的复杂装载器和进度管理组件。

    Vue Wait帮助管理页面上的多个加载状态,状态之间没有任何冲突。基于一个非常简单的想法:通过管理具有多个加载状态的数组(或者Vuex存储),让内置加载程序组件侦听注册的加载程序,并立即进入加载状态。

    Vue Content Loader

    地址:https://github.com/egoist/vue-content-loader

    012.png

    Vue Content Loader是一个基于Vue.js的SVG占位符加载,可自定义的SVG组件,用于创建占位符加载,例如Facebook加载卡。 Vue Content Loader是react-content-loader的Vue实现。

    1. 完全可定制:你可以改变颜色,速度和大小
    2. 创建自己的加载:使用在线工具轻松创建你的自定义加载
    3. 你现在就可以使用它:已经有很多预设了
    4. 性能

    Epic Spinners

    013.png

    地址:https://epic-spinners.epicmax.co/

    EpicSpinners是一组易于使用的纯css打造的网页Loading效果,并且同时整合了Vue组件可以方便的在Vue项目中进行使用,由于是纯css打造,你可以在任意网页项目中自行整合并使用!

    Vue Radial Progress

    014.png

    地址:https://github.com/wyzant-dev/vue-radial-progress

    Vue Radial Progress 这是一个径向进度条效果的加载器组件,使用svg和javascript绘制带有渐变径向进度条效果的加载器,可以用作加载、进度提示。

    ICONS

    Vue Feather Icons

    地址:https://github.com/egoist/vue-feather-icons

    015.png

    Feather 是一套面向设计师和开发者的开源图标库,是一个简单漂亮的开源图标库。 每个图标都设计在一个24×24的网格上,强调简单,一致性和易读性。很多大厂出品的前端框架都内置了这款可以免费商用的图标。

    特点

    • 每一枚图标都是按照统一标准进行设计,具有完美像素对齐;
    • 设计风格一致,完胜那些拼凑混搭的图标库;
    • 覆盖多种开发场景的支持,对开发者非常友好。

    Vue Awesome

    地址:https://github.com/Justineo/vue-awesome

    016.png

    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

    017.png

    Apexcharts是一个现代的JavaScript图表库/可通过简单的API构建交互式图表和可视化。Vue Apexcharts是ApexCharts的Vue.js组件。

    Vue Echarts

    地址:https://github.com/Justineo/vue-echarts

    018.png

    vue-echarts是基于echarts封装实现的一个组件库,直接按照正常的组件引用方式,安装引用即可,具体的安装和引用读者可以直接阅读vue-echarts技术文档。

    Vue Chartjs

    地址:https://github.com/apertureless/vue-chartjs

    019.png

    vue-chartjs 是一个 Vue 对于 Chart.js 的封装,让用户可以在Vue中轻松使用Chart.js,很简单的创建可复用的图表组件,非常适合需要简单的图表并尽可能快地运行的人。 vue-chartjs抽象了基本逻辑,同时也暴露了Chart.js对象,让用户获得最大的灵活性。

    V-Charts

    地址:https://github.com/ElemeFE/v-charts

    020.png

    V-Charts 是基于 Vue2.0 和 Echarts 封装的图标组件,只需要统一提供一种对前后端都友好的数据格式设置简单的配置项,就可以生成常见的图表。

    时间

    Vue Timer Hook

    地址:https://github.com/riderx/vue-timer-hook

    021.png

    Vue3 计时器模块的灵感来自 react-timer-hook。此外,它是一个自定义的钩子,用来处理vue 3 组件中的定时器、秒表和时间逻辑/状态。

    Vue Horizontal Timeline:

    地址:https://github.com/guastallaigor/vue-horizontal-timeline

    022.png

    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 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

    展开全文
  • 制作了一套自己的组件库,并发布到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

    1. doc 根目录下新建 docs(固定)
    2. docs 下新建 README.md(固定)
    3. docs 下新建 components 用于存放组件描述文件(固定)
    4. components 下新建 button.md(此处以 button 组件为例)

      README.md(内容格式固定)

    ---
    home: true
    actionText: 欢迎 →
    actionLink: /components/button  // 以button为例
    features:
    - title: okr组件库  // 名称
      details: okr组件库,用公共组件存放,新老项目过度组件存放 // 组件库描述
    ---
    

    button.md
    ## 按钮组件
    运行命令
    npm run docs:dev

    跑起来的内容是不是很熟悉???但是比较丑是不是?

    美化组件库文档界面

    1. 在 docs 下新建文件夹.vuepress
    2. 在.vuepress 中新增配置文件 config.js
    module.exports = {
    	title: 'okr-ui', // 网站标题
    	description: 'okr公共组件库', // 网站描述
    	dest: './build', // 设置输出目录
    	port: '8088', // 端口
    	themeConfig: {
    		// 主题配置
    		nav: [
    			{
    				text: '主页',
    				link: '/'
    			} // 导航条
    		],
    		sidebar: {
    			// 侧边栏配置
    			'/components/': [
    				{
    					collapsable: true, // 默认折叠
    					children: ['button']
    				}
    			]
    		}
    	}
    }
    
    1. 在.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;
    }
    
    1. .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 拉进来进行使用
      • 经过以上两步就能免发布使用了

    测试

    1. .vuepress 下新建 components,此文件加下皆为全局组件
    2. 新建 button 文件夹/button 文件夹/test.vue
    3. 在 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的仪表。 用法: 纱线: yarn add vue-speedometer NPM: npm install --save vue-speedometer // import the component import VueSpeedometer from...
  • Vue Zephyr 为Tailwind开发人员构建的主题化组件库。 有关更多信息和文档,请访问 。 您也可以在关注我们以获取更新。
  • 主要介绍了vue组件库的在线主题编辑器的实现思路,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
  • ${componentName}
  • 如果您对此感到担心,请在下面查看如何仅导入较小捆绑包所需的组件。 //无论您的Vue入口点在哪里。 从'vue-atlas'导入Va导入'vue-atlas / dist / vue-atlas.css'Vue.use(Va,'en')//或'es','fr','ru'导入一些...
  • npm发布vue组件库

    千次阅读 2022-04-27 09:49:24
    2.新增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
    
    展开全文
  • Element Plus-一个Vue.js 3.0 UI :flexed_biceps: Vue 3.0合成API :fire: 用TypeScript编写 状态:测试版 该项目仍在大力开发中。 欢迎加入我们,并提出您的第一个请求。 特别感谢以下机构的慷慨赞助: 文献...
  • 一款科技风格的ui组件库,适用于展示型页面(例如大屏),不适用业务繁杂的场景。 自己利用工作之余完成了文档等工作。文档模板使用了 element ui的docs,做了一些简化,本项目中有不少地方参考了 element ui的实现...
  • 基于Amaze UI封装的Vue2.x组件库
  • Ant 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组件库开发的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • Vue组件库入门 使用和创建自己的组件库。 迟早,您会发现创建组件库比将所有组件包含在应用程序项目中要好得多。 组件库迫使您从组件中删除特定于应用程序的逻辑,从而有可能在其他应用程序中重用它们。 一旦这些...
  • 语音地图 项目设置 yarn install 编译和热重装以进行开发 yarn serve 编译并最小化生产 yarn build 整理和修复文件 yarn lint 自定义配置 请参阅。
  • 本篇文章主要介绍了自定义vue组件发布到npm的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 88,163
精华内容 35,265
关键字:

vue的组件库是什么