前端搭建自己的组件库并发布npm(完整流程)

上传

第一步：用脚手架搭建一个新项目

vue create 项目名称

第二步：src同级目录下创建一个packages文件夹并在里面新建两个文件

1. Button.vue

<template>
  <button class="MyButton">
    我是一个按钮组件
  </button>
</template>

<script>
export default {
  name: 'MyButton',
  data () {
    return {}
  },
  methods: {},
  filters: {},
  created () {}
}
</script>

<style>
.MyButton {
  color: red;
}
</style>

3. index.js

import ZsButton from './Button.vue'


const components = [
  ZsButton
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
   // 遍历注册全局组件
  components.forEach(component => {
    Vue.component(component.name, component)
  })

  // 判断是否是直接引入文件,如果是，就不用调用 Vue.use()
  if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
  }
}

// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
export default {
  install
}

第三步：修改package.json

第四步：在src同级目录下创建.npmignore文件，类似git的.gitignore文件，用于忽略打包文件的

# 忽略目录
examples/
packages/
public/
 
# 忽略指定文件
vue.config.js
babel.config.js
*.map

第五步：项目下控制台敲命令 npm login 然后输入账号密码登录

第六步：在控制台执行 npm run lib 打包命令并生成dist文件

第八步：在控制台执行 npm publish 上传命令

注意：：在执行这一步之前一定要要确保以下两点

1. 保证你的npm仓库已经验证了邮箱，邮箱验证时注意只能在电脑上登录邮箱验证，无法在手机上验证。
2. 你的包名，也就是package.json里的name属性，没有重复，可以用npm i …下载一下看能否下载成功，如果没有再用。

附完整目录

--------到此就上传成功

使用

第一步：npm或者yarn下载包并引入

import Vue from 'Vue'
import MyComponent from 'zhaishuai-ui'

Vue.use(MyComponent)

第二步：项目里里正常使用

<template>
	<MyButton />
</template>