使用@vue/cli在npm上创建，发布Vue.js组件库

首先，从安装vue-cli开始

npm i -g @vue/cli  或  yarn global add @vue/cli

vue create my-vue-lib

npm install  或  yarn install

npm run serve

然后，开始创建一个简单的组件

<template>
  <div class="banner" :style="bannerStyles" :class="`banner__${position}`">
    <slot></slot>
  </div>
</template>

<script>
const defaultStyles = {
  left: 0,
  right: 0,
};
export default {
  props: {
    position: {
      type: String,
      default: 'top',
      validator(position) {
        return ['top', 'bottom'].indexOf(position) > -1;
      },
    },
    styles: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      bannerStyles: {
        ...defaultStyles,
        ...this.styles,
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.banner {
  padding: 12px;
  
  color: #f6a623;
  text-align: left;
  position: fixed;
  z-index: 2;
}
.banner__top {
  top: 0;
}
.banner__bottom {
  bottom: 0;
}
</style>

现在，通过npm使用这个组件

第1步 - 设置库构建

在package.json中添加编辑脚本:

scripts: {
  "build-bundle": "vue-cli-service build --target lib --name zchart ./src/index.js"
},

"peerDependencies": {
  "vue": "^2.6.11"
},

npm run build-bundle 将在 dist目录下输出：

dist/zchart.umd.min.js
dist/zchart.umd.js　　　　// 一个直接给浏览器或AMD loader使用的UMD包
dist/zchart.common.js  　// 一个给打包器用的CommonJS包
dist/zchart.css  　　　　 // 提取出来的CSS文件，可以通过在vue.config.js中设置 css: { extract: false } 强制内联

./src/index.js 入口文件

import ZchartBanner from '../packages/banner/index'

const components = [ ZchartBanner ]

const install = function (Vue, opts = {}) {
  components.forEach((component) => {
    Vue.component(component.name, component)
  })

  Vue.prototype.$ZCHART = {
    requestUrl: opts.requestUrl || '', // 请求接口 url
    headers: opts.headers || {}, // 请求头
    colors: opts.colors || ['#F26A6A', '#365EEE', '#F5C358', '#4EBF7A'] // 图表色系
  }
}

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

// 通过插件单独引入
export default {
  install,
  ZchartBanner
}

第2步 - 指定package.json中的输出文件

"main": "./dist/zchart.common.js",

第3步 - 以用户身份在npm上添加/登陆

确保在npm上注册，npm adduser 注册一个新用户和 npm login 作为一个现有用户登陆

第4步 - 验证npm用户凭证

输入npm whoami 来验证你的用户名

第5步 - 命名你的组件库

为你的包选择一个名字，你必须确保它尚未被使用。确保把它放在你的package.json中

"name": "zchart",  // 或 "name": "@eric/zchart"

第6步 - 构建

npm run build-bundle

第7步 - 在npm上发布组件库

运行 npm publish -access public 来发布该库，以供公众访问

第8步 - 如何使用你新发布的库

从npm安装组件库，并将组件导入代码中

npm install --save zchart

现在，可以开始使用你的组件了

import Zchart from 'zchart'

Vue.use(Zchart, {
  requestUrl: window.VUE_APP_BASE_API + '/api/test/graph'
})

<zchart-banner :position="top" />