Vue历史

1. 读作view（五右），意为MVC中的V
2. MVC中的V是Vue的重点，M和C则被简化

版本

1. 2013年，0.6版、0.7版
2. 2014年，0.8~0.11版
3. 2015年，1.0版（还称MVVM）
4. 2016年，2.0版
5. 2019年，2.6版
6. 2020年，3.0版

Vue作者

1. 名叫尤雨溪，英文名Evan You
2. 主要作品：Vue、Vue Router、Vuex、@vue/cli

1. 1. Vue Cli主要维护者：蒋豪群

Vue英文文档

Vue中文文档

---

Vue自学路线图

---

项目搭建：搞出一个使用Vue的项目

方法一：使用@vue/cli

1. 搜索@vue/cli，进入官网
2. 打开文档，打开创建一个项目章节
3. CRM

@vue/cli用法

• 全局安装：yarn global add @vue/cli
• 创建目录：vue create 路径（路径可以用.点）

1. 选择使用哪些配置

2. 进入目录，运行yarn serve开启webpack-dev-server
3. 用WebStorm或VSCode打开项目开始CRM

1. 1. WebStorm

1. 1. 1. 登录后只能创建50个项目
      2. 不登录可以创建无限个

4. 进入@vue/cli官网看看目录

方法二：自己从零搭建vue项目

1. 使用webpack或rollup从零开始
2. 不适合新手，适合用vue半年以上的老手

1. 1. 新手先用方法一学会vue再尝试方法二

---

+1 demo：做一个最简单的项目

1. 并把涉及到的文档看一下

使用Vue实例

方法一：从HTML得到视图

1. 也就是文档里说的完整版Vue
2. 从CDN引用vue.js或vue.min.js即可做到
3. 也可以通过import引用vue.js或vue.min.js
4. 详情看文档这一节，把alias去掉即可

方法二：用JS构建视图

1. 还是看上面的文档链接，使用vue.runtime.js
2. 这种方法很不方便，但实际上是对的（画图说明）

方法三：使用vue-loader

1. 可以把.vue文件翻译成h构建方法
2. 但这样做HTML就只有一个div#app，SEO不友好

---

SEO友好

1. SEO

1. 1. 搜索引擎优化
   2. 可以认为搜索引擎就是不停的curl
   3. 搜索引擎根据curl结果猜测页面内容
   4. 如果你的页面都是用JS创建div的，那么curl就很瞎

2. 那怎么办

1. 1. 很简单，给curl一点内容
   2. 把title、description、keyword、h1、a写好即可
   3. 原则：让curl能得到页面的信息，SEO就能正常工作
   4. 怎么让网页到第一名？浏览的人足够多即可
   5. 百度花钱就能上第一名
   6. Google其实也能获取JS创建的内容，但不要依赖它

---

系统学Vue

1. 用CRM把所有文档过一遍
2. 然后写博客

---

Vue完整版和运行时版的区别

1. 深入理解两种区别

• 最佳实践：总是使用非完整版，然后配合vue-loader和vue文件

2. 思路：

1. 1. 保证用户体验，用户下载的JS文件体积更小，但只支持h函数
   2. 保证开发体验，开发者可直接在vue文件里写HTML标签，而不写h函数
   3. 脏活让loader做，vue-loader把vue文件里的HTML转为h函数

引用错了会怎样

1. 请自己尝试看看
2. vue.js错用成了vue.runtime.js

1. 1. 无法将HTML编译成视图

3. vue.runtime.js错用成vue.js

1. 1. 代码体积变大， 因为vue.js有编译HTML的功能