1、Vue
- 基于 JS 的前端
框架
- 基于
MVVM 架构模式
实现了数据自动双向绑定,从而替代了DOM
操作 - 提到架构模式 就必须提一下 观察者模式 / 发布-订阅模式
- 推荐
组件化
开发 脚本形式
-不是很规范,工程化 CLI
-比较规范
框架:繁琐操作
自动化
,通用流程规范化
2、组件
- 预定义的、可复用的
功能单元
- HTML 自定义标签,基于
虚拟 DOM
实现的 - 自定义
颗粒度
Bootstrap 是一个前端
组件
库,HTML & CSS
Vue 组件:模板、脚本、样式
3、Vue CLI - Command Line Interface / GUI
- Vue 脚手架 / 组件化 开发
开发流程:
// 创建工程方式一
vue create myapp
// 创建工程方式二
vue ui
// 进入工程目录
cd myapp
// 启动工程
npm run serve
// 构建、打包工程
npm run build
// 其他(安装依赖或插件)
npm add vuex
vue add vuex/router/element/...
// 安装 node_modules 模块,再启动
npm install
4、组件和组件之间的通信
传统:父组件通过props
向子组件传递数据,子组件通过$emit
向父组件传递数据
5、集中式状态管理 - Vuex
现代:state、getters、mutations、actions、modules
6、单页面程序(SPA)中的路由 - Vue Router
什么是路由?
视图
(多个组件【view】) /资源
(数据【data】) 与URI
形成的一组映射
1. vue add router
2. new Router()
3. 定义一组路由规则 routes
{
path: '/foo/:id',
component: Foo
}
4. router-link / router-view
5.
7、vuetools
8、介绍 SSR - 服务端渲染
优势
与传统 SPA (单页应用程序 (Single-Page Application)) 相比,服务器端渲染 (SSR) 的优势
主要在于:
更好的 SEO
由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。更快的内容到达时间(time-to-content)
特别是对于缓慢的网络情况或运行缓慢的设备。
权衡之处
使用服务器端渲染 (SSR) 时还需要有一些权衡之处
:
-
开发条件所限。
浏览器特定的代码,只能在某些生命周期钩子函数 (lifecycle hook) 中使用;
一些外部扩展库 (external library) 可能需要特殊处理,才能在服务器渲染应用程序中运行。 -
涉及构建设置和部署的更多要求。
与可以部署在任何静态文件服务器上的完全静态单页面应用程序 (SPA) 不同,服务器渲染应用程序,需要处于 Node.js server 运行环境。 -
更多的服务器端负载。
在 Node.js 中渲染完整的应用程序,显然会比仅仅提供静态文件的 server 更加大量占用 CPU 资源 (CPU-intensive - CPU 密集),因此如果你预料在高流量环境 (high traffic) 下使用,请准备相应的服务器负载,并明智地采用缓存策略。