我想编写用于教育教学目的的vue演示,为了只关注vue部分,我不想介绍npm,像webpack这样的bundler或browserify等。
所以我使用babel-standalone
编写代码。我也想使用vue-class-component
。但是现在我不能使用esm
和vue
的vue-class-component
构建,简而言之,我想在main.js中支持这样的代码]
import Vue from '../vender/vue.esm.browser';
import Component from '../vender/vue-class-component.esm';
@Component
class App extends Vue {
//......
}
如果我像上面那样编写代码,则会出现Uncaught ReferenceError: require is not defined
错误。
[现在,我可以使用以下样式使它起作用,但是使用Component
的vue-class-component
很丑。
<!-- the html contain these scripts -->
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-class-component.js"></script>
<script src="vender/babel.min.js"></script>
<!-- fix regenerator not defined -->
<script src="vender/regenerator-runtime.js"></script>
<script src="js/main.js"
data-plugins="transform-runtime,transform-class-properties,transform-decorators-legacy,transform-regenerator"
data-presets="es2015,stage-1" type="text/babel">
</script>
// js/main.js
const Component = VueClassComponent.default;
@Component
class App extends Vue {
//......
}
更多详细信息,请参见https://github.com/liudonghua123/todos/tree/master/todos-vue-class-component
您需要添加到数据插件:“ transform-es2015-modules-umd”