'Vue'未在我的自定义 ShopWare 6 Javascript 插件中定义

Question

Vue.js添加在我的head标签中：

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

我正在我的ShopWare 6网站中构建一些自定义的Vue逻辑(还没有Vue店面(。

在我的自定义ShopWare 6 javascript插件文件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错误，因为Vue对Storefront中的Shopware 6 webpack配置是未知的。您可以尝试将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: ['[[',']]'],
})