Vue入门到关门之前端引入
一、前端发展历史
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官方文档
- Vue3官方文档
- 作者：尤雨溪
注意：在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!
（1）CDN引入
-
对于开发或学习：
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
-
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.16"></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>
- 本地引入
（4）对不同构建版本的解释（只针对Vue2版本）
在其他cdn加速的网站中，你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别：
| UMD | CommonJS | ES Module (基于构建工具使用) | ES Module (直接用于浏览器) | |
|---|---|---|---|---|
| 完整版 | vue.js | vue.common.js | vue.esm.js | vue.esm.browser.js |
| 只包含运行时版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js | - |
| 完整版 (生产环境) | vue.min.js | - | - | vue.esm.browser.min.js |
| 只包含运行时版 (生产环境) | vue.runtime.min.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。
