一.术语解释
在文章开始之前，我们需要了解几个术语：
- 编译器：用来将模板字符串编译成为 JavaScript 渲染函数的代码。
- 运行时：用来创建 Vue 实例、渲染并处理虚拟 DOM 等的代码。基本上就是除去编译器的其它一切。
- SEO : 汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。
二.Vue的两个版本
Vue.js分为两个版本，一个是完整版 vue.js，一个是非完整版（只包含运行时版） vue.runtime.js。二者主要的区别如下：
1. 有无编译器
完整版vue.js：同时包含编译器和运行时。
vue.runtime.js：只包含运行时。
编译器会占据大量内存，所以，非完整版的体积要远小于完整版。引用一句官方说明：
2.视图书写位置不同
完整版: 有两种书写方法:
- 直接写在html文件里:(视图无需写在js里,可以直接写在页面里.支持从html里面获取视图.)
- 写在js文件里:因为没有编译器,所以需要 render() 函数
- 使用vue-loader,在src里新建一个Demo.vue文件,写在这个文件里
其他不同
优缺点
完整版
- 优点：
可以在 html 文件中直接写 Vue 语句，可读性强些
- 缺点：
1.体积比非完整版大 2.耦合性太大，在 html 文件中夹杂 vue 语法，导致各类型文件融合到一块，耦合性大
非完整版
- 优点： 体积小，非完整版的体积比完整版小了30%多 耦合性低，模块化强
- 缺点：SEO不友好
但是可以改进.把title,description,keyword,h1,a写好即可:
最佳实践
总是使用非完整版,然后配合vue-loader和vue文件.
三.如何用 codesandbox.io 写 Vue 代码
- 进入codesandbox.io/
- 点击创建沙盒
- 选择创建vue沙盒
- 等待一秒钟,就可以开始愉快的写代码啦! 视图会实时更新在屏幕右侧哟~
