Компоненты пакета vue, которые используют синтаксис класса - PullRequest
Новая
       8

Компоненты пакета vue, которые используют синтаксис класса

0 голосов
/ 14 февраля 2019

Мне сложно упаковать наши компоненты в пакет npm, чтобы мы могли использовать их в других проектах.У меня такое чувство, что я искал везде в интернете безрезультатно.Я подозреваю, что использование наших компонентов в стиле синтаксиса класса делает большинство, если не все, примеры неудачными для меня.Последним и наиболее успешным до сих пор был тот, что был в документации Vue Однако с этим я получаю ошибку: 

[!] (buble plugin) SyntaxError: Unexpected character '@'

Причина этого, очевидно, заключается в синтаксисе класса с @Componentнемедленно провалить сборку.Есть ли способ заставить это работать с синтаксисом класса?

Часть скрипта моего компонента выглядит следующим образом (ничего особенного в частях CSS и шаблона): 

<script>
import { Vue, Component, Prop } from 'vue-property-decorator';

@Component
export default class Checkbox extends Vue {
  @Prop({default: false}) checked;

};
</script>

1 Ответ

0 голосов
/ 14 февраля 2019

Я думаю, что проблема заключается в установке vue-loader и vue-template-compiler вместе.

Я Цитирую Vue-loader Vue Docs

Требуется плагин! Он отвечает за клонирование любых других правил, которые вы определили, и применение их к соответствующим языковым блокам в файлах .vue.Например, если у вас есть правило, соответствующее /\.js$/, оно будет применено к <script> блокам в .vue файлах.

После того, как вы npm install их, вам нужно изменить свой webpack.config.js файл вроде этого 

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... other rules
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // make sure to include the plugin!
    new VueLoaderPlugin()
  ]
}
...