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’