Vue作者

• 尤雨溪，英文 Evan You
• 艺术硕士，毕业后在 Google Creative Lab工作
• 后转为 全职 JavaScript 开发工程师
• 主要作品 Vue、Vue Router、Vuex、@vue/cli
• github主页：https://github.com/yyx990803
• Vue.js记录片：https://www.youtube.com/watch?v=OrxmtDw4pVI

Vue 历史

• 读作 view，意为 MVC中的 V
• MVC 中 V 是 Vue重点，M、C被简化
• 2013年 0.6、0.7版
• 2014年 0.8~0.11版
• 2015年 1.0 版
• 2016年 2.0版
• 2019年 2.6版
• 2020年 3.0版

Vue 文档

https://vuejs.org/

搭建一个简单的Vue项目

使用@vue/cli

npm install -g @vue/cli
// 或者
yarn global add @vue/cli

vue --version // 查看版本

文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

其他不一样的选默认，有警告直接忽略

• 使用 CRM抄抄抄
• 把文档过一边
• 写博客

从零开始搭建Vue项目、

使用 webpack 、rollup，适合老手

推荐在线编辑器Online IDE for Rapid Web Development

使用Vue实例

• 从 cdn 引入 vue.js 或 vue.min.js
• 也可以通过 import 引用
• 从 html 得到视图、用 Js构建视图
• 使用 vue-loader

Vue实例作用

• 封装了对 DOM、data的操作
• 监听事件、改变DOM
• 增删改查 data
• 没有封装 ajax，推荐使用 axios 的 ajax

完整版VS 运行时

推荐使用非完整版，然后配合 vue-loader 和 vue文件

• 保护用户体验，用户下载的js文件体积更小。但只支持 h 函数
• 保证开发体验，开发者可以直接在文件里写 HTML标签，而不写 h 函数
• vue-loader 会把vue文件里面的 html 转成 h 函数
• vue.js错用成 vue.runtime.js 无法将html编译成视图
• vue.runtime.js 错用成 vue.js 代码体积变大，因为vue.js 有编译html的功能

浅谈 SEO

• 也叫 搜索引擎优化
• 可以认为搜索引擎就是在不停的 curl
• 搜索引擎根据 curl 结果猜测页面内容
• 如果页面都是用 JS 创建 div的，那么就把title、description、keyword等等写好让 curl 能得到页面的信息