Vue官网提供了两种不同的版本，分别是完整版（vue.js）和非完整版（vue.runtime.js）

两个版本的区别

完整版（vue.js）

完整版包含了Vue的全部功能，包括编译器(compiler) 和 运行时(runtime)

• 得益于这两个功能，完整版的Vue可以可以把含有占位符或条件循环语句变成真实的DOM节点，从而将视图写在HTML或者template选项中。

但是完整版的缺点也是显而易见的：

• 比非完整版多出近40%的体积使得用户在使用时可能会受到影响

• webpack引入，默认使用非完整版，完整版需配置alias；

• @vue/li引入，默认使用非完整版，完整版需额外配置。

例：

new Vue({
  el: "#app",
  template: `
  <div>{{n}}
  <button @click="add">+1</button>
  </n>`,
  data: {
    n: 0,
  },
  methods: {
    add() {
      this.n += 1;
    },
  },
});

非完整版（vue.runtime.js）

非完整版缺少了编译器(compiler)这一重要功能，使得视图只能写在render函数中，用h函数来创建标签

• 因为少了一些功能，使得非完整版的Vue体积更小，并且在webpack和@vue/li引入时都默认使用非完整版

webpack提供了一个Vue.loader，可以在打包的时候翻译这些文件，用户下载的时候只需要不完整版就可以

• 这样需要写一个.vue文件来放这些内容，这个文件格式是这样的：
  • 首先里面有三个标签：template、script、style
  • template里面是视图，html标签都写在里面
  • script里面是除了视图外的其他选项，比如data（如果用vue loader的话，data必须是一个函数）
  • style是加样式的，css样式都在这里
• vue.loader可以把这个文件变成一个对象
  • main.js文件中用import引入，el到渲染的地方，然后render一下就可以

使用codesandbox.io 写 Vue 代码

如果想要使用在线工具写Vue代码的话，codesandbox.io是一个不错的选择

• 进入网站后，点击Vue即可在线编辑Vue（不要登录，因为登录后最大文件数上限会变成50个，不登录无限制）

• 写完后可以点击File————Export to ZIP下载文件