概览

完整版 vs. 非完整版具体分析

如果你需要在客户端编译模板 (比如传入一个字符串给 template 选项，或挂载到一个元素上并以其 DOM 内部的 HTML 作为模板)，就将需要加上编译器，即完整版：

// 需要编译器
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 不需要编译器
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

结合单文件组件时，非完整版写法为：

//.js文件
import Demo from './Demo.vue //vue-loader
console.log(Demo)
new Vue({
  el:'#app',
  render(h) {
    return h(Demo)
  }
  })

//.vue文件（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>

当使用 vue-loader 或 vueify 的时候，*.vue 文件内部的模板会在构建时预编译成 JavaScript。你在最终打好的包里实际上是不需要编译器的，所以只用非完整版即可。

因为非完整版相比完整版体积要小大约 30%，所以应该尽可能使用这个版本。如果你仍然希望使用完整版，则需要特殊配置。

@vue.cli相关知识