Vue那么多种构建文件到底怎么选择?

#vue

有的新手在一进入vue的文档,开始浏览文档的时候。第一节安装。可能在这就无法继续看下去了,因为在这一节vue就说了所有的构建情况。第一次接触的朋友可能马上就慌了。

其实这里的重点就是编译器运行时

如果你是没有使用构建工具(Webpack等)的开发模式,比如你仅仅是直接在页面里引入vue的cdn,然后直接开始你的项目。那你就应该选择带有编译器的版本。

<script type="text/x-template" id="tpl">
  <h1>{{title}}</h1>
</script>
new Vue({
    el: '#app',
    template: '#tpl',
})

也就是说,编译器可以让我们使用template属性来编译html模板。如上。

相反的,运行时。其实可以理解为使用Webpack来预编译我们的模板。这里的模板就是.vue文件,在Webpack编译的过程中,会将我们.vue文件中的template,style,script编译成单纯的js(vdom)。编译后的代码则会作为Vue的render函数使用

new Vue({
    el: '#app',
    render(h) {
        //... 编译后的代码
    }
})

明白了这两个概念后,大致就可以根据你是需要编译器还是无需编译器,确定一个选择的方向了。

紧接着我们再来看下这个表格就很清晰了。

vue

UMD,CommonJS,ESM分别是三种规范,不了解的自行谷歌。

带有runtime的就是运行时构建,只可以使用render函数。别的则带有编译器可以使用template属性。

UMD:可以适用于我们传统的直接script引入的开发方式。 (不推荐) CommonJS:适用于Webpack1和Browserify。 (不推荐) ES Module:适用于Webpack2。 (推荐)

由于我们大部分都是使用Webpack2+.vue来进行开发。所以我们只需要使用运行时的版本。

alias: {
  'vue': 'vue/dist/vue.runtime.esm.js',
},