著者：マイル

新たなプロジェクト

vueプロジェクトを初期化する

src、index.jsファイルの下にプラグインフォルダを作成します。このファイルはコンポーネントのエクスポートファイルです。

npm install @/vue-cli -g

npm create vue-components

cd vue-components

npm run serve

コンポーネントライブラリを作成する

srcの下に新しいプラグインフォルダを作成します

次に、トーストコンポーネントtoast/index.vueを作成します

ここでは、テンプレートを表示するために、divタグの後ろの>が削除されています。

<template>
  <div class="hello"
    <div class="toast" :class="{active: toastStatus}"
        <div class="toast-wrapper"{{text}}</div
    </div
  </div
</template>
 
<script>
export default {
  name: 'vue-toast',
  data() {
    return {
      toastStatus: false,
      text:''
    }
  },
  methods: {
    handlerToast(toastInfo,time) {
      this.text = toastInfo;
      this.toastStatus = true;
      time = time || 2000
      setTimeout(() => {
        this.toastStatus = false;
      }, time)
    }
  },
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped >
    .toast {
        position: absolute;
        left: 50%;
        top: 30%;
        transform: translate(-50%, 50%);
        min-width: 0px;
        min-height: 0;
        table-layout: center;
        background: rgba(0,0,0,0.5);
        display: none
 
    }
    .active {
        display: block
    }
 
</style>

別のボタンコンポーネントbutton/index.vueを作成します

<template>
  <div class="hello"
    <button这里是button组件</button
  </div
</template>
 
<script>
export default {
  name: 'vue-button',
  props: {
    msg: String
  },
  data() {
    return {
  
    }
  },
  methods: {
   
  },
}
</script>

2つのコンポーネントは非常に単純なコンポーネントです。コンポーネントの内容についてはここでは詳しく説明しません。以下のvueのエントリファイルmain.jsのように、この効果を実現したいと考えています。プラグインをインポートするだけで、Vue.use（）はトーストコンポーネントとボタンコンポーネントをグローバルに使用できます。

したがって、これら2つのコンポーネントはグローバルに登録する必要があり、登録プロセスはVue.use（）呼び出しのプロセスにあります。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './registerServiceWorker'
import plugins from './plugins'
 
Vue.config.productionTip = false
Vue.mixin({
  mounted() {
    console.log('组件加载完成')
  }
})
Vue.use(plugins)
 
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

上記の効果を実現するには、プラグインでindex.jsファイルを作成する必要があります。このファイルはオブジェクトを公開する必要があり、オブジェクトにはインストールメソッドがあります。

import Toast from './toast'
import Button from './button'
 
const install = (Vue) => {
    console.log(Vue, Toast, Button)
}
 
export default {
    install
};

このメソッドでは、パラメータを受け取るのはVueであり、このメソッドに必要なすべてのコンポーネントを登録できます。

import Toast from './toast'
import Button from './button'
 
const install = (Vue) => {
    console.log(Vue, Toast, Button);
    Vue.component(Toast.name, Toast);
    Vue.component(Button.name, Toast);
}
 
export default {
    install
};

このようにして、任意のコンポーネントで作成したコンポーネントを使用できます。

試してみるには、HelloWorldコンポーネント。

コンポーネントが正常に表示されていることがわかります。どこでも使用できます。

プラグインに多くのコンポーネントがある場合は、インポートしたコードをたくさん記述してから、それらを1つずつ登録する必要があります。これを書くのは簡単です。

ここでは、requireAPIを使用して導入を自動化できます。

plugins / index.js

 
const requireComponent = require.context('./', true, /\.vue$/);
console.log(requireComponent.keys())
const install = (Vue) => {
    if(install.installed) return;
    install.installed = true;
    requireComponent.keys().map(path => {
        const config = requireComponent(path);
        console.log(config)
        const componnetName = config.default.name;
        Vue.component(componnetName, config.default || config)
    })
}
 
export default {
    install
};

このように見ると、自分が何をしているのかわからない場合があります。次の2つの値を見ると、上記のコードが何をしているのかがわかります。

requireComponent.keys（）はたまたまファイルへのパスです

 console.log(requireComponent.keys())

requireComponent（path）の戻り値には、コンポーネントのインスタンス情報のみが含まれます

console.log(config)

パッケージの展開

次に、プロジェクトをパッケージ化してリリースします。

package.jsonファイルスクリプトを調整します

"lib": "vue-cli-service build --target lib --name vue-toast --dest lib src/plugins/index.js"

npm run lib

プロダクションパッケージディレクトリ

package.jsonファイルのこれらのプロパティは不可欠です

npmにログインします

npm公開

使用する

npm i vue-toast-maile

import plugins from 'vue-toast-maile'
import "../node_modules/vue-toast-maile/lib/vue-toast.css"
 
Vue.use(plugins)

プロジェクトで使用できます。

npmに公開するvueコンポーネントライブラリを実装する

新たなプロジェクト

コンポーネントライブラリを作成する

パッケージの展開

使用する

おすすめ