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$/，它将应用于<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()
  ]
}

使用类语法打包Vue组件

1 个答案: