作者：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实现。

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

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

公司现役组件库项目，公共资源或者新老项目切换仓库

调整 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']
				}
			]
		}
	}
}

3. 在.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;
}

4. .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项目

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