Question

不确定如何在标题中描述该问题。

我创建了一个可以通过npm（Github，npm）安装的组件

我的组件依赖于vue-touch。

在开发组件时，一切都很好，v-touch组件使用tag="li"解析，因此它呈现为li。当它被捆绑但是组件没有被解析，因此它呈现为<v-touch tag="li"。

在TagPicker.vue中，我使用

加载依赖项

import Vue from 'vue';
import VueTouch from 'vue-touch';
Vue.use(VueTouch, { name: 'v-touch' })
//... the rest of the component

在包含组件安装方法的index.js中，我有以下内容：

module.exports = {
    TagPicker: require('./components/TagPicker.vue'),
    install(Vue) {
        Vue.component('tag-picker', module.exports.TagPicker)
    }
}

显然我已经错误地解决了这个问题，我如何正确地将依赖包含在捆绑包中？

webpack.build.config.js

module.exports = [
    {
        entry: "./src/index.js",
        output: {
            path: path.resolve(__dirname, './dist'),
            filename: "vuetagpicker.js",
            library: "VueTagPicker",
            libraryTarget: "umd"
        },

        plugins: [
            new webpack.DefinePlugin({
                "process.env" : {
                    NODE_ENV : JSON.stringify("production")
                }
            }),
            new webpack.optimize.UglifyJsPlugin({
                compress: {
                    warnings: false,
                },
                comments: false
            }),
            new ExtractTextPlugin({filename:"vuetagpicker.min.css",  allChunks: true, fallback:"style-loader" }),
        ],

        module: {
            rules:loaders
        },

    }
];

修改

我暂时还原了提交。值得注意的是，我试图使用v-touch@2.0.0-beta.4将基于指令的方法更新包到基于组件。它让我处于困境，被迫使用Vue.use(VueTouch...，因为我的捆绑会在vue上创建依赖

删除了JSFiddle，因为我已经还原了，示例基于HEAD。

我的问题仍然存在，我们如何在外部组件中使用外部插件以备包装？

Answer 1

来自VueJS论坛的X-Post我最初问过这个问题。

来自LinusBorg：

全球添加

您不能在组件内使用Vue.use，必须先添加它   你启动主Vue实例（新的Vue（）...）

在本地添加

在本地添加它不能像你那样工作，因为VueTouch不是   只是组件，它是包含组件的插件。

但你可以这样做：
import  { component as vTouch } from 'vue-touch'

...

components: {
  vTouch
}

将外部库与自定义组件

修改

1 个答案: