Question

Vue.js添加到了我的head标签：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

我正在ShopWare 6 website中构建一些自定义Vue逻辑（尚未在Vue店面中使用）。

在我的自定义ShopWare 6 javascript plugin文件vue-input-number/vue-input-number.plugin.js中，我有：

import Plugin from 'src/plugin-system/plugin.class';

export default class VueInputNumber extends Plugin {
    init() {

        window.Vue = Vue;

        const App = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
            },
            delimiters: ['[[',']]'],
        })
    }
}

当我编译此.js文件./psh.phar storefront:build时出现错误：

error  'Vue' is not defined                      no-undef
error  'App' is assigned a value but never used  no-unused-vars
error  'Vue' is not defined                      no-undef

该怎么办，以便可以在Javascript文件中创建新的Vue实例？

Answer 1

我认为您在那里遇到了一些ESLint错误，因为店面中的Shopware 6 Webpack配置不知道Vue。您可以尝试将Vue添加到.eslintrc：

// platform/src/Storefront/Resources/app/storefront/.eslintrc.js
module.exports = {
    // ...

    'globals': {
        'gtag': true,
        'Vue': true <-- Add Vue here
    },

    // ...
};

或者您可以为使用Vue的行禁用ESLint：

// eslint-disable-next-line
const App = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!',
    },
    delimiters: ['[[',']]'],
})

我的自定义ShopWare 6 Javascript插件中未定义“ Vue”

1 个答案: