Как правильно добавить приложение vue в плагин WordPress? - PullRequest
Новая
       60

Как правильно добавить приложение vue в плагин WordPress?

0 голосов
/ 16 марта 2020

Я разрабатываю плагин для Wordpress и хочу добавить свое приложение VueJS в мой Wordpress. Вот что я делаю:

MyPlugin. php

class MyPlugin
{
      register() {
           add_action('woocommerce_before_main_content', array($this, 'enqueue'));
      }
      enqueue() {
           wp_enqueue_script('jquery');
           wp_enqueue_script('vue', 'https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js', [], '2.5.16');
           wp_enqueue_script('script', plugin_dir_url(__FILE__) . 'js/index.js', [], '0.1', true);
           wp_enqueue_style('style', plugin_dir_url(__FILE__) . 'css/style.css');
      }
}

index. js

const $ = jQuery;
$('document').ready(function () {
    function addButton() {
        var button = $(
            '<span id="my_app"></span>'
        );
        $('.single_add_to_cart_button').after(button);
        return button;
    }
    addButton();
    var elements = document.querySelectorAll('#my_app');
    elements.forEach(function (element) {
        var vm = new Vue({
            el: element,
            template: '<div>test</div>'
        });
    });
});

Это работает так хорошо. Но когда я изменяю свой index. js на что-то вроде этого: 

import './src/App' from App
...
var vm = new Vue({
    el: '#app',
    router,
    components: {
        App
    },
    template: '<App/>'
})

Я получаю эту ошибку в консоли браузера syntaxerror: cannot use import statement outside a module, я хочу, чтобы мои компоненты были отдельными . vue файлов. Что я делаю неправильно? Или это возможно для VueJS приложения, как это в плагине Wordpress?

1 Ответ

0 голосов
/ 16 марта 2020

Вы используете простой сценарий без предварительной обработки.

import - это функция ES6, которую можно расширить в части предварительной обработки, как при использовании веб-пакета, но в браузере она имеет ограниченную функциональность: https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7

Существует 2 варианта:

  1. Создание js файлов с помощью веб-пакета (или аналогичных) и импорт таким же образом, как и вы.
  2. Создать Vue проект без использования модулей / import: компонент (ы) в дополнительном файле (ах) и объявление в качестве глобальных компонентов, используя Vue.component('mycomponent', ...) или все в одном файле:

Один файл: 

var App = {
  template: '<div>{{msg}}</div>',
  data() {
    return {msg:'TEST'}
  }
}
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})
new Vue({
    el: '#app',
    router,
    components: {
        App
    },
    template: '<App></App>'
})

Несколько файлов: 

// conponnents.js
var App = {
  template: '<div>{{msg}}</div>',
  data() {
    return {msg:'TEST'}
  }
}
var Foo = {
  template: '<div>foo</div>'
}
var Bar = {
  template: '<div>bar</div>'
}
Vue.component('app', App)
Vue.component('foo', Foo)
Vue.component('bar', Bar)

// index.js
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Vue.component('foo') },
    { path: '/bar', component: Vue.component('bar') }
  ]
})
new Vue({
    el: '#app',
    router,
    template: '<app></app>'
})
...