Vue安装

Vue的使用可以直接使用<script>引用,或者使用npm或yarn全局安装。 在使用script引用时，会发现有不同的构建版本以及生产环境。在这里简单的解释一下他们之间的区别。

名字

开发环境（包含完整的警告和调试模式）：

• 完整版：vue.js

• 运行时版本：vue.runtime.js 生产环境（删除了警告）：

• 完整版：vue.min.js

• 运行时版本：vue.runtime.min.js

视图

使用完整版时，此时是包含有编译器的。可以直接通过template来编辑。

new Vue({ 
  template: '<div>{{ hi }}</div>'
})

使用运行时版本时，不包含编译器，此时需要用render来使内部html作为模板挂载到元素上。

new Vue({ 
  render (h) {
    return h('div', this.hi)
    } 
  })

运行时版本体积相比完整版大约小30%。经验告诉我们：

应该总是使用非完整版，配合vue-loader和vue文件。这样既保证了用户下载的js文件体积更小，也保证了开发者可以更方便的直接在vue文件中写html标签。

codesandbox 在线创建vue

condesandbox可以让开发者在线直接创建一个vue项目。 在搜索引擎中直接搜索codesandbox，点击首页的vue图标就可以直接创建一个在线项目啦～默认使用运行时版本，可以在component中的HelloWorld.vue文件中直接编辑html，当然也可以自己创建新文件。