Veu CLI 3 を使い、以下の設定でプロジェクトを2つ (a, b) 作成しました。
project b で作成した component を npm package として project a に取り込んで表示させることが狙いです。
その前段階として npm link を使って local で表示させることにしました。
まず project b の vue component B.vue を以下のように作成。
project b の package.json を以下のように設定。
yarn build により dist/B.umd.js ④ を生成し、package.json の main にその path を設定 (②)。
一方、project b の component を取り込む側の project a に vue component A.vue を以下のように作成。
- ⑤ … project
bから component B を取り込み - ⑥ … components に B を設定
- ⑦ … template 内に <B> を挿入
project a の package.json は vue cli 3 による生成後から変更していません。
次に、project b 内で npm link を実行。
$ pwd
C:\…\b$ npm link
C:\Users\8cf022\AppData\Roaming\npm\node_modules\b
-> C:\…\b
続いて、component <B> を使う側の project a 内で npm link b を実行。
$ pwd
C:\…\a$ npm link b
C:\…\a\node_modules\b
-> C:\Users\8cf022\AppData\Roaming\npm\node_modules\b
-> C:\…\b
以上を終わらせ、project a 側で yarn serve とすると、以下の warning が出ます。
export ‘default’ (imported as ‘B’) was not found in ‘b’
