An overview of

Full version vs. incomplete version specific analysis

If you need to compile a template on the client side (such as passing a string to the template option, or mounting it to an element and using HTML inside its DOM as the template), you will need to add a compiler, the full version:

New Vue({template: '<div>{{hi}}</div>'}) new Vue({render (h) {return h('div', this.hi)}})Copy the code

When combined with single-file components, the incomplete version is written as:

//.js file import Demo from './ demo.vue //vue-loader console.log(Demo) new vue ({el:'#app', Render (h) {return h(Demo)}}) //.vue <template> <div class="red"> {{n}} <button @click="add">+1</button> </div> </template> <script> export default { data(){ return{ n:0 } }, methods:{ add() { this.n+=1 } } } </script> <style scoped> .red{ color: red; } </style>Copy the code

When using vue-loader or Vueify, templates inside the *. Vue file are precompiled to JavaScript at build time. You don’t really need a compiler in the final package, so just use the incomplete version.

Because the partial version is about 30% smaller than the full version, you should use this version whenever possible. If you still want to use the full version, special configuration is required.

@vue.cli knowledge