如何发布一个基于Vue开发UI组件的npm包

创建项目

我们这次先开发一个toast试试水。

vue create armouy-ui-test
// 项目中使用了less 记得创建项目的时候选择less

在src文件夹下新建package文件夹，在package文件夹下新建index.js文件和Toast文件夹，Toast文件夹下新建index.js和index.vue。

| src
|  | package
|      | armouy-toast
|      |  | index.js
|      |  | index.vue
|      | index.js

编写简易toast组件

// armouy-toast/index.vue
<template>
  <div class="armouy-toast-wrapper">
    <transition name="fade">
      <div class="container" v-if="isShow">
        <span>{{msg}}</span>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      msg: '',
    };
  },
  mounted() {
    this.isShow = true;
    setTimeout(() => {
      this.isShow = false;
    }, 1500);
  },
};
</script>
<style scoped lang="less">
.armouy-toast-wrapper{
  position: fixed;
  left: 0;
  right: 0;
  top:0;
  bottom: 0;
  z-index:300;
  display: flex;
  align-items: center;
  justify-content: center;
  .container{
    padding: 16px;
    color:#fff;
    text-align: center;
    border-radius: 5px;
    background-color: #5E5E5E;
  }
}

.fade-enter-active, .fade-leave-active{
  transition: all 0.5s;
}

.fade-enter,.fade-leave-to{
  opacity: 0;
}

.fade-enter-to, .fade-leave{
  opacity: 1;
}

</style>

注册toast组件

// armouy-toast/index.js
import Vue from 'vue';
import ArmouyToast from './index.vue';

const Toast = Vue.extend(ArmouyToast);

let instance;
const toast = (options = {}) => {
  instance = new Toast({
    data: options,
  });
  instance.vm = instance.$mount();
  document.body.appendChild(instance.vm.$el);
  return instance.vm;
};

export default toast;

在项目中测试一下是否可以使用：

// main.js
import Vue from 'vue';
import toast from '@/package/armouy-toast';
import App from './App.vue';

Vue.config.productionTip = false;
Vue.prototype.$toast = toast;

new Vue({
  render: (h) => h(App),
}).$mount('#app');

修改App.vue:

<template>
  <div id="app">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  mounted() {
    this.$toast({
      msg: 'Hello',
    });
  },
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行之后,界面出现toast提示框。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qZKJHpkn-1584189432399)(E:\code\note\img\npm打包1.png)]

打包组件

我们需要自动注册一下我们的组件。由于我们希望的是项目可以直接this.$toast()来使用toast，所以我们直接挂载toast组件。

// package/index.js
import toast from '@/package/armouy-toast';

const Components = {
  // 这里是后续补充的组件
};

const install = (Vue) => {
  if (install.installed) return;
  Object.keys(Components).forEach((key) => {
    Vue.component(key, Components[key]);
  });

  // eslint-disable-next-line no-param-reassign
  Vue.prototype.$toast = toast;
};

// auto install
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue); // 通过use方式全部引入
}

const API = {
  install,
  ...Components,
};

export default API; // 通过插件单独引入

修改package.json文件，在scripts中新加入：

"build-bundle": "vue-cli-service build --target lib --name armouy-ui-test ./src/package/index.js"

其中--name后面跟随着的是你要发布的包的名字。

运行npm run build-bundle生成dist文件夹 。

发布

注册npm

到https://www.npmjs.com/网站注册一个账号。

修改package.json

{
    "name": "armouy-ui-test",
      "version": "0.1.0",
      "description": "ui package for test",
      "keyword": "test",
      "author": "armouy",
      "private": false,   // 一定要改成false
      "license": "MIT",
      "main": "./dist/armouy-ui-test.common.js", // 这个是你打包后的文件的地址
      "files": [
        "dist/*",
        "src/*",
        "public/*",
        "*.json",
        "*.js"
      ],
    ...
}

执行npm run publish

如果出现**[email protected]**就是成功了。

可能出现的报错

• 如果报错403，是因为刚注册的npm账户需要邮件链接点击激活账户才能使用，或者版本号重复；
• 如果报错4048，原因是没有登录，使用npm login登录。

测试是否发布成功

可以登录npm的网站查看profile看看是否发包成功。

使用自己的包

另外新建一个vue项目，安装

npm i armouy-ui-test --save

// 修改main.js
import ArmouyUI from 'armouy-ui-test';
import 'armouy-ui-test/dist/armouy-ui-test.css';
Vue.use(ArmouyUI);

在App.vue测试一下：

mounted() {
    this.$toast({
      msg: 'Hello',
    });
  },

运行，显示出hello则成功。

更新包

接下来我们来写一个纯UI组件，新建armouy-button文件夹。

| src
|  | package
|      | armouy-button
|      |  | index.js
|      |  | index.vue
|      | armouy-toast
|      |  | index.js
|      |  | index.vue
|      | index.js

// armouy-button/index.vue
<template>
  <div class="armouy-button">
    <button class="red">{{value}}</button>
  </div>
</template>

<script>
export default {
  name: 'armouyButton', // 这个名字不要与HTML的标签重名！！
  props: {
    value: {
      type: String,
      default: '',
    },
  },
};
</script>
<style lang="less" scoped>
.red{
  background-color: red;
  color:#fff;
}
</style>>
</style>

// armouy-button/index.js
// 这次的安装不太一样
import Button from './index.vue';

Button.install = (Vue) => {
  Vue.component(Button.name, Button);
};

export default Button;

修改package.json中的版本号，然后重新运行：

npm run build-bundle
npm publish

打开测试的那个项目，卸载原先的包（最新的包已经到0.1.14了）：

npm uninstall armouy-ui-test --save
npm i [email protected] --save

修改App.vue:

<armouy-button value="hello" />

如果运行之后出现按钮，则成功~~（记得看看控制台会不会出现什么隐形Bug）。

补充:

如何生成代码目录

npm install -g tree-node-cli
// window系统用 treee
tree -L 4 -I node_modules > tree.md