一、前端发展历史

1、什么是前端？

• 前端：针对浏览器的开发，代码在浏览器运行
• 后端：针对服务器的开发，代码在服务器运行

2、前后端不分的时代

互联网发展的早期，前后端开发是一体的，前端代码是后端代码的一部分。

就比如使用HTML(5)、CSS(3)、JavaScript(ES5、ES6)来编写一个个的页面，然后发给后端(PHP、Python、Go、Java) ，后端收到浏览器的请求再嵌入模板语法、渲染完数据返回数据给前端，最终在浏览器中查看。

3、后端 MVC 的开发模式

那时的网站开发，采用的是后端 MVC 模式，而前端只是后端 MVC 的 V。

• Model（模型层）：提供/保存数据
• Controller（控制层）：数据处理，实现业务逻辑
• View（视图层）：展示数据，提供用户界面

MVC框架详细介绍：Django框架之python后端框架介绍 - Xiao0101 - 博客园 (cnblogs.com)

4、Ajax（前后端分离的雏形）

Ajax 技术诞生，改变了一切。

• 2004年：Gmail
• 2005年：Google 地图

前端不再是后端的模板，可以独立得到各种数据。前端可以单用Ajax来加载数据，DOM渲染页面。并且Ajax 技术也促成了 Web 2.0 的诞生。

• Web 1.0：静态网页，纯内容展示
• Web 2.0：动态网页，富交互，前端数据处理

5、MVVM模式

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式。那时另一些框架提出 MVVM 模式，用 View Model 代替 Controller。

拿vue为例：

• Model：vue对象的data属性里面的数据，这里的数据要显示到页面中（js变量）
• View：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
• View-Model：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（响应式[双向数据绑定]：JS中变量变了，HTML中数据也跟着改变）

本质：view 绑定 view-model，视图与数据模型强耦合。数据的变化实时反映在 view 上，不需要手动处理。

6、SPA（单页面应用）

不仅控制整个页面，还负责处理抓取新数据，并在无需重新加载的前提下处理页面切换。这种类型的应用通常称为单页应用 (Single-Page application，缩写为 SPA)。

前端可以做到：

• 读写数据
• 切换视图
• 用户交互

这意味着，网页其实是一个应用程序。

2010年后，前端工程师从开发页面，变成了开发“前端应用”（跑在浏览器里面的应用程序）。

• 传统的架构

• 单页应用的架构

7、Angular框架

• Google 公司推出的 Angular 在那时是最流行的 MVVM 前端框架。它的风格属于 HTML 语言的增强，核心概念是双向绑定。

• Angular框架的出现（1个JS框架）：导致出现了“前端工程化”的概念（前端也是1个工程、1个项目）

8、React、Vue框架

React、Vue框架是当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）

• vue的基本思想与 Angular 类似，但是用法更简单，而且引入了响应式编程的概念。

• React是一种用于构建用户界面的javaScript库，它主要用来写html，或构建web应用。React 的核心思想是“声明式编程”，也就是说，开发人员可以专注于定义组件的外观和行为，而不必担心实现细节。

• React 强调组件化开发思想，将整个 UI 拆分成小组件，并在这些组件之间建立清晰的层次关系，而 Angular 和 Vue.js 等框架则更加注重整个应用程序的架构设计。

React知识点详情：react知识点总结 - 简书 (jianshu.com)

9、大前端时代

• 移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 ---> 大前端

• 一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端

10、uni-app

uni-app（uni，读you ni，是统一的意思）是一个使用Vue.js开发所有前端应用的框架，开发者实现了一套代码，同时运行到多个平台；一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。

二、Vue的安装

1、IDE集成开发工具

• 前端开发：vue，react可以使用vscode或者webstorm
• 因为webstorm 是jetbrains全家桶，用起来跟pycharm一样，比较熟悉
• vscode也很好用，最大的优点就是免费

2、Vue2安装

Vue现在有Vue2和Vue3，因为Vue3兼容Vue2，并且两者语法也有点差异，所以我们先从Vue2开始学起，后面再学习Vue3。

• Vue2官方文档
  • https://v2.cn.vuejs.org/
• Vue3官方文档
  • https://cn.vuejs.org/
• 作者：尤雨溪

注意：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

（1）CDN引入

• 对于开发或学习：

  • <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

• 对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏

  • <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

（2）本地引入

• 开发版本：https://v2.cn.vuejs.org/js/vue.js 包含完整的警告和调试模式
• 生产版本：https://v2.cn.vuejs.org/js/vue.min.js 删除了警告
• 推荐安装稳定版本：2.7.16

详细请查看官方文档：安装 — Vue.js (vuejs.org)

（3）Vue3引入

• CDN引入
  • <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
• 本地引入
  • https://unpkg.com/vue@3/dist/vue.global.js

（4）对不同构建版本的解释（只针对Vue2版本）

在其他cdn加速的网站中，你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：

三、补充

1、选项式 API 和组合式 API

• vue2是选项式 API
• vue3两个都支持：但是推荐使用组合式api

2、node.js

node.js的形成过程：把谷歌浏览器的v8引擎---> 用c语言重写了---> 能运行再操作系统上---> 形成nodejs

3、 javascript和Ecmascript

• JS是由ECMAScript、DOM、BOM组成
• JS是运行在浏览器脚本的语言

4、typescript

TypeScript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码，可运行在任何浏览器，任何操作系统。

5、CSS框架

CSS框架是预先准备好的软件框架，允许使用层叠样式表语言更容易，更符合标准的进行网页设计。大多数这些框架包含至少一个栅格设计（grid）。功能更强大的框架，还配备了更多的功能和附加的基于JavaScript的功能，但大多设计导向的和Unobtrusive JavaScript。本文从功能和充分的JavaScript框架区分它们。

两个显着和广泛应用例子是Bootstrap和Foundation (framework)。其他awsm.css, Flexify, Materialize, Semantic UI。

一些更为大型的框架会使用CSS的解释器。例如LESS和Sass。