如何發佈一個基於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