前言
项目中因为设计风格、项目模式有很多相似的组件模块，每次都要做抽离、复制、粘贴，作为项目负责人，总是想把相似模块抽离出来作为公共模块，所以就有了把这些模块都扔到npm上的想法，网上呢，也有好多文章讲解这个东西，但是都会有一些自己上手的过程中遇到卡壳的细节问题，所以我找了一个最清晰也最小白的教程，按照大佬教程一步步手操将每个环节自己的问题都写出来，以供大家参考，要是写的有些不是很到位的解释呢，还请多多见谅。大家也可直接移往大佬教程原出处！
1. 环境准备
因为我们封装的是Vue组件，所以我们直接在Vue脚手架项目里面直接进行封装即可。
（1）在终端初始化项目
vue create my-app
（2）运行项目
yarn serve
2. 组件封装
2.1 新建package文件夹
因为我们可能会封装多个组件，所以在src下面新建一个package文件夹来存放所有需要上传的组件。
这里我封装了一个hy-card组件
2.2 编写组件代码
这里以hy-card组件为例，编写代码，代码如下：
// package/hy-card/index.vue
<template>
<div class="hy-card">
这是测试卡片
</div>
</template>
<script>
export default {
name: 'hy-card'. // 组件名
}
</script>
<style scoped>
.hy-card{
width: 200px;
height: 200px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
background: #fff;
line-height: 200px;
text-align: center;
margin: 20px auto;
}
</style>
然后我们引入到 App.vue 组件验证一下，看组件是否能用，代码如下：
// App.vue
<template>
<div id="app">
<hyCard></hyCard>
</div>
</template>
<script>
import hyCard from './package/hy-card'
export default {
name: 'App',
components: {
hyCard
}
}
</script>
<style>
</style>
最后启动页面显示的效果如下：
2.3 使用Vue插件模式
这一步封装组件中的重点，用到了Vue提供的一个公开方法：install。这个方法会在你使用 Vue.use(plugin) 时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。
在package目录下新建index.js入口文件，代码如下：
// package/index.js
import hyCard from './hy-card/index.vue' // 引入封装好的组件
const coms = [hyCard] // 将来如果有其他组件，都可以写到这个数组里面去
// 批量组件注册
const install = function(Vue) {
coms.forEach((com) => {
Vue.component(com.name, com)
})
}
export default install // 这个方法以后再使用的时候可以被 use 调用
还有另外一种动态引入组件的方法
// 另一种方法 动态引入文件
const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {
if(install.installed) return
// requireComponent.keys() => 数组
requireComponent.keys().forEach(fileName => {
// 每一个组件
const config = requireComponent(fileName)
// 组件名
const componentName = config.default.name
Vue.component(componentName, config.default || config)
})
// 全局自定义指令
Vue.directive('focus', {
inserted: function(el) {
el.focus()
}
})
}
// 环境检测
if(typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install
}
上传代码主要的一项工作就是将我们封装好的组件组册为全局组件，用到了Vue.component()方法，当使用Vue.use()时，我们的install方法便会执行。
3. 组件打包
到这里为止，我们的组件封装基本就玩成了，如果后续有复杂的需求封装，都可以继续修改。
修改我们项目的package.json文件，配置打包命令：
"package": "vue-cli-service build --target lib ./src/package/index.js --name hy-ui --dest hy-ui"
打包命令解释：
- --target lib 关键字 指定打包的目录
- --name 打包后的文件名字
- -- dest 打包后的文件夹的名称
然后执行打包命令：
yarn package
打包执行完成后我们项目目录下就会多出来一个hy-ui文件夹，存放的是打包后的文件。
4. 发布到npm
4.1 初始化 package.json
想要发布到npm仓库，我们还得在hy-ui文件夹下初始化一个package.json文件，进入hy-ui目录，执行命令：
npm init -y
注意：这儿会导致后续发布失败报错
402 Payment Required - PUT https://registry.npmjs.org/xxx - You must sign up for private packages
这个意思是说明我们要发布的是私有包，因为init之后没有private这个属性，但是我们想要发布公开的，所以这个属性改为false就行，或者增加publishConfig这个属性，也是我们的包更改为公开属性的意思。
由于我们这儿只是测试，所以我不需要更改package.json文件，如果是生产的话，最好加上版本描述和版本号等等，其中name字段便是我们上传到npm仓库后的名称。
4.2 发布到 npm 仓库
（1）注册账号
想要发布到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名，密码和邮箱，发布的时候可能会用得到。
（2）设置npm源
有些小伙伴可能本地的npm镜像源采用的是淘宝镜像源或者其他的，如果想要发布npm包，我们得把npm源切换为官方的，命令如下：
// 查看当前镜像源
npm config get registry
// 切换镜像源
npm config set registry https://registry.npmjs.org
（3）添加npm用户
如果是新用户，则进入hy-ui目录，添加npm用户，执行命令：
npm adduser // 这里会让你填写用户名等等，如果之前设置过即可跳过此步。
如果之前发布过，则执行登录命令
npm login // 也是会让你填写用户名、密码、邮箱、邮箱一次性密码
（4） 发布npm
在hy-ui目录下执行命令：
// 如果是mac电脑发布失败有可能是权限问题 使用 sudo npm publish
npm publish
如果发布失败可能是名字重复了，改了名字即可，发布成功后，我们即可到npm官网上查看自己发布的npm包：
5. 从npm安装使用
直接执行安装命令：
yarn add @zzxhy/hy-ui // 为了防止重复，使用npm账号+到处文件夹名称作为包名，对应的是上面package.json里面的name
然后在main.js 引用注册，代码如下：
import HyUi from '@zzxhy/hy-ui'
import "@zzxhy/hy-ui/hy-ui.css"
Vue.use(HyUi)
这里单独引用了css，就和element-ui一样需要单独引用样式文件
因为是全局注册，所以在App.vue里面可以直接使用：
如果全局注册页面效果不显示，原因很可能是把引用的时候标签名和变量名混淆了，全局注册和局部注册的区别是全局注册时的name就是组件的标签名
而局部祖册是使用变量名作为标签名
所以应该是全局注册的名字和你使用的标签名不一致导致的
到这里我们的组件简易封装并且发布到npm上去了，后续要是持续更新，记得更改版本号，要是自己只是做的测试包，等待流程测试成功以后记得72小时内删除测试包，否则之后无法删除。
npm unpublish 命令只能删除 72 小时以内发布的包
npm unpublish 删除的包，在 24 小时内不允许重复发布
发布包的时候要慎重，尽量不要往 npm 上发布没有意义的包！
