!!!参考
https://jp.vuejs.org/v2/cookbook/packaging-sfc-for-npm.html
https://docs.github.com/ja/enterprise-cloud@latest/actions/publishing-packages/publishing-nodejs-packages
https://docs.github.com/ja/packages/working-with-a-github-packages-registry/working-with-the-npm-registry
https://b1san-blog.com/post/nuxtjs/nuxt-component/
https://qiita.com/teramo3033/items/714211b6a080d8308f1b
https://rightcode.co.jp/blog/information-technology/vue-js-original-component-npm-cdn-release
https://dev.classmethod.jp/articles/introduction-to-github-packages/

!!!概要
vueのコンポーネントをgithub packagesでパッケージ化して複数プロジェクトで共有する。
一つのパッケージに複数のコンポーネントを共有化する。

!!!公開する
!!公開するコンポーネントを作成する
!TestMolecule.vue
  <template>
    <!-- HTML部分-->
    <div>
      share molecules
      <test />
      <test />
    </div>
  </template>
  
  <script>
    import Test from '../atoms/TestAtom.vue'
    export default {
      //JavaScript(Vue.js)部分
      components: {
        Test,
      }
    }
  </script>
  
  
  <style scoped>
    /* CSS部分 */
  </style>

!!メイン処理のラッパ作成
!library-main.js
  import TestMolecule from './components/molecules/TestMolecule.vue';
  import TestMolecule2 from './components/molecules/TestMolecule2.vue';
  
  export function install(Vue) {
      if (install.installed) return;
      install.installed = true;
      Vue.component('TestMolecule', TestMolecule); //コンポーネント登録
      Vue.component('TestMolecule2', TestMolecule2);
  }
  
  const plugin = {
      install,
  };
  
  let GlobalVue = null;
  if (typeof window !== 'undefined') {
      GlobalVue = window.Vue;
  } else if (typeof global !== 'undefined') {
      GlobalVue = global.Vue;
  }
  if (GlobalVue) {
      GlobalVue.use(plugin);
  }
  
  export {TestMolecule, TestMolecule2};
!!package.json修正
  {
    "name": "@funa-take/test_package",
    "version": "0.1.13",
    "private": false,
    "main": "dist/share_component.common.js",
    "unpkg": "dist/share_component.min.js",
    "scripts": {
      "build-bundle": "vue-cli-service build --target lib --name share_component ./src/library-main.js"
    },
    "repository": {
    以下省略

!!.npmrc作成
 //npm.pkg.github.com/:_authToken=トークン
 @funa-take:registry=https://npm.pkg.github.com

!!ビルド
 yarn build-bundle

!!公開
 yarn publish

!!サンプル
{{ref packages_test_share.zip}}

!!!公開したものを使用する
!!.npmrc作成
 //npm.pkg.github.com/:_authToken=トークン
 @funa-take:registry=https://npm.pkg.github.com

!!パッケージ追加
 yarn add @funa-take/test_package

!!コンポーネントをインポートして使用する
  <template>
    <div>
      pages
      <test-molecule />
      <test-molecule2 />
    </div>
  </template>
  <script>
  import {TestMolecule, TestMolecule2} from '@funa-take/test_package'
  export default {
    //JavaScript(Vue.js)部分
    components: {
      TestMolecule,
      TestMolecule2,
    }
  }
  </script>

!!サンプル
{{ref packages_test.zip}}

{{category2 プログラミング言語,JavaScript}}