区别其实 Vue 的官方文档中都有，这篇文章只是个人的学习笔记。

vue.js 和 vue.runtime.js，

Vue 的两个版本分别是完整版和运行时版本，文件名分别是 vue.js 和 vue.runtime.js，vue.js 包含 vue.runtime.js 中的内容，它多了一个编译器。如果只说这两个版本的区别，其实文章到这里应该结束了，但是我们可以通过这两个版本分别引出了 Vue 实例的几种使用方法。

使用 JS 构建视图

运行时版本使用来 JS 创建 Vue 实例、渲染虚拟 DOM，简单来说就是使用 render 函数：

new Vue({
    data(){
        return {
            msg:'hello'
        }
    }
    render(h){
        return h('div',this.msg)
    }
})

当然，完整版也可以使用这个方法构建视图，因为完整版本包含了运行时版本

使用 HTML 构建视图

因为完整版多了一个编译器，这个编译器的作用就是用了将 HTML 字符转换成运行时版本中的 render 函数，所以可以直接使用 HTML 标签构建视图，也可以传入一个字符串给template选项来构建：

• HTML

<div id='app'>
    {{msg}}
</div>

new Vue({
    el:'#app',
    data(){
        return {
            msg:'hi'
        }
    }
})

• template

<div id='app'></div>

new Vue({
    el:'#app',
    template:'<div>{{msg}}</div>',
    data(){
        return {
            msg: 'hi'
        }
    }
})

使用 vue-loader 配合 .vue 文件（目前的最佳实践）

由于上述的两种方法都有各自的缺点，完整版本虽然让开发人员体验更好，但是增加了用户下载 JS 文件的大小，运行时版本虽然体积更小，但是 render 函数写起来比较繁琐，开发体验较差。所以 vue-loader 它让开发者在开发的时候使用完整版本，在构建项目的时候 vue-loader 将 .vue 文件中的 HTML 转换成 render 函数的写法，并且只将运行时版本构建到项目中，解决了这个问题（牛!~)

如果各位想要是用 vue-loader，目前 Vue-loader 的官方文档中详细介绍了使用方式。