Intro:我用vue-cli〜4.2.0生成了两个项目:parent-app
和dummylib
目标:在DummyButton.vue
项目中创建dummylib
组件并将其导入parent-app
项目中。
我做了什么:
跟随此tutorial。
在dummylib的package.json中,我插入了:
"main": "./dist/dummylib.common.js",
和构建库脚本:
"build-lib": "vue-cli-service build --target lib --name dummylib src/main.js",
dummylib的main.js:
import DummyButton from './components/DummyButton.vue'
export default DummyButton
而且我已经创建了DummyButton.vue
,现在vue serve src/components/DummyButton.vue
成功渲染了DummyButton组件,并且npm run build-lib
使用dummylib.common.js
生成了dist文件夹
在parent-app
项目中,我制作了npm i ../dummylib
,它已添加到package.json
:
"dependencies": {
...
"dummylib": "file:../dummylib",
...
},
问题:
[当我尝试从parent-app
开始npm run serve
时,在../dummylib/dist/dummylib.common.js
中会出现许多掉毛错误。据我了解,ESlint甚至不应该尝试处理dummylib.common.js
,但确实可以处理,并且会导致〜2000错误。
我前一段时间尝试过相同的教程。要解决这个问题:在库的main.js中,我必须这样做:
const Components = {
DummyButton
};
Object.keys(Components).forEach(name => {
Vue.component(name, Components[name]);
});
export default Components;
而不是
export default DummyButton
您还记得将库导入到您的父母应用main.js中吗?>
import DummyLib from "DummyLib"; Vue.use(DummyLib);
您也可以像这样直接导入组件:
import DummyLib from "DummyLib";
export default {
components: {
...DummyLib
},
//... rest of vue file script ...
}