封装使用类语法的 vue 组件

Question

我很难将我们的组件打包为 npm 包，以便我们可以在其他项目中重用它们。 我感觉我在互联网上到处搜索都无济于事。我怀疑在类语法样式中使用我们的组件会使大多数（即使不是全部）示例对我来说都失败。 迄今为止最成功的最后一个是来自Vue documentation 然而，我得到一个错误：

[!] (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>

Answer 1

我认为问题在于同时安装 vue-loader 和 vue-template-compiler。

我在引用 Vue-loader Vue Docs

插件是必需的！它负责克隆任何其他规则 您已定义并将它们应用于相应的语言 .vue 文件中的块。例如，如果您有一个规则匹配 /\.js$/，它将应用于.vue文件中的<script>块。

在你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()
  ]
}