安装：

用@vue/cli

  1. npm install -g @vue/cli
  2. # 或
  3. yarn global add @vue/cli
  4. # 完成后检查版本
  5. vue --version
  6. # 创建一个名为hello-world的目录
  7. vue create hello-world
  8. #根据需要完成相应配置
  9. # 进入目录
  10. cd hello-world
  11. # 开启webpack-dev-serve
  12. yarn serve

版本区别

vue 完整版 vue 非完整版（runtime） 评价
特点 有编译器（compiler） 没有编译器 compiler占约40%的体积
视图 写在HTML里或template里 写在render函数里，用h来创建 使用h来完成渲染
cdn引入 vue.js vue.runtime.js 生产环境后缀名为.min.js
webpack引入 需要额外配置alias 默认使用此版 配置详情官方文档
@vue/cli引入 需要额外配置 默认使用此版 配置详情官方文档

总结：一般都是使用非完整版，然后配合vue-loader和vue文件。

  • 非完整版保证用户体验，使得用户下载的JS文件体积更小，但只支持h函数
  • 因为有vue-loader可以保证开发体验，使得开发者直接在vue文件里写HTML标签
  • vue-loader会将vue里的HTML转化为h函数

template和render用法

  1. // 需要编译器（完整版）
  2. new Vue({
  3.   template: '<div>{{ hi }}</div>'
  4. })
  6. // 不需要编译器（非完整版）
  7. new Vue({
  8.   render (h) {
  9.     return h('div', this.hi)
  10.   }
  11. })
  12. // 非完整版在webpack的Vue Loader,
  13. // 它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
  14. import Demo from './Demo.vue'
  15. new Vue({
  16.   render(h){
  17.     return h(Demo)
  18.   }
  19. })

Vue实例

Vue实例就如同jQuery实例，封装了DOM的所有操作，封装了data的所有操作。
然后就可以操作DOM了，就像监听事件，改变DOM，操作data，对data进行增删改查。
Vue实例没有封装ajax，需要使用axios的ajax功能。

使用codesandbox.io写Vue的代码：

进入官网，点击右上角的Create Sandbox，选择vue，进入界面，即可在线编辑实时预览。

如何将项目下载到本地：

点击左上角的File，选择Export to ZIP，再到本地目录里解压缩即可。

SEO：

SEO（Search Engine Optimization），中文：搜索引擎优化。
搜索引擎在做的事情，可以简单的理解为它就是在不停地curl，它根据curl得到的结果猜测页面的内容。

SEO不友好：

如果页面都是用JS创建的，那么浏览器在curl的时候就会找不到信息，如用直接用vue-loader写出来的页面，浏览器就会找不到信息。这样的情况称为SEO不友好。

SEO友好：

怎样让不友好变成友好：
事先把title，description，keyword，h1，a写好即可，在里面加入我们想要被搜索到的信息，那么浏览器curl的时候就能获取到页面信息，就是SEO友好了。