RogerZhong @ 2023-04
一、前端开发主流三大框架
Vue ： 尤雨溪主导开发 （ 官网链接： https://cn.vuejs.org/ ）
React ：Facebook 主导开发 （ 官网链接： https://react.dev/ ）
Angular ：Google 主导开发 （ 官网链接： https://angular.cn/ ）
1、三大框架共同点
- 都是MVVM模式 —— Model，View，ViewModel
- Angular：数据绑定、操作Dom通过ViewModel完成的
- React和Vue的ViewModel的高效率通过框架自身提供的Virtual Dom（虚拟dom）来实现，它是一个js对象，数据的变化会被映射到这个虚拟Dom上，再去修改真实Dom结构，比Angular的ViewModel直接绑定真实Dom树的操作效率更高
2、三大框架优缺点
| 框架 | 优点 | 缺点 |
|---|---|---|
| Vue | 1. 国产框架，对国内开发者更友好。所以它的学习成本是三个框架中最低的 2. 体积最小，加上它的处理机制，在非大型项目的对比中，它的性能是最高的。 3. vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树 4. vue实现了数据的双向绑定,react数据流动是单向的 |
1. vue的响应系统无法检测属性的添加和删除，以及某些数组的修改 2. 发展的时间较短，生态环境更小 |
| React | 1. React本身不能算作一个框架，因为它本身的功能有限，不过它有一个庞大的生态系统，全世界无数开发人员在为它提供开源包 2. 轻量：React和Vue的可组装性强于angular，更加灵活 3. React的单项数据流机制 3. React-native，一个优秀的移动端开发框架，使用react特有的jsx语法，将html融入到js中，自动适配了不同的移动端的屏幕分辨率 4. state，所有的数据都储存在state中，只可以使用setState方法去改变 |
1. React的灵活性就导致了在选择上要耗费成本，相同的功能也会有很多开源人员贡献包（这一问题在vue上也同样存在） 2. React的jsx语法，学习起来并不是很难，但它的写法是把html和js结合起来，导致一些IDE无法格式化，代码的可读性较差 3. 使用Redux在处理数据流时，需要学习使用saga语法 4. 每当应用的状态被改变时,全部组件都会重新渲染，所以需要shouldComponentUpdate生命周期函数方法控制 |
| Angular | 1. google有着稳定的维护团队。google的Adwords业务就使用了angular，环境更稳定 2. Angular + TypeScript( google+微软 ) 3. Angular自带了几乎所有页面应具有的功能，路由、表单、ajax、模版、双向数据绑定等等。它原生的form表单模块非常强大，除了双向绑定的基本功能，还自带验证等 4. 它的每一个组件都是一个文件夹，html、js、和css文件是分开的，让代码更加清晰 |
1. 较难调试：Angular的代码整洁、规范，很容易维护和审查，但控制台报错信息较差，较难看出问题在哪 2. 太重：它自带了很多模块，压缩后达到了168k，而vue仅为50k。即使在4版本中拆分了一些功能，但依然还是很重 3. 学习成本高：它有很多的概念，有些还较难理解，api文档内容多，增大了阅读难度。较难上手 |
二、Vue项目构建方式
1、通过CDN使用Vue.js
- 创建html文件，引入vue.js
- 不需要使用 Node.js
index.html 示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello Vue -- CDN</h1>
<div id="app">
<h2>{{msg}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data(){
return {
msg: "HOHO"
}
}
}).mount('#app')
</script>
</body>
</html>
注： CDN 的全称是 Content Delivery Network，即内容分发网络。
是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。
CDN的关键技术主要有内容存储和分发技术。
2、使用本地 vue.js 文件
将CDN中的js文件下载到本地，作为本地js文件资源引入后，使用vue
<body>
<div id="app">
<h2>{{msg}}</h2>
</div>
<!-- 使用本地vus.js文件 -->
<script type="text/javascript" src="../vue.global.js"></script>
<script>
const { createApp } = Vue;
createApp({
data(){
return {
msg: "HOHO hoho"
}
}
}).mount('#app')
</script>
</body>
3、使用 vue-cli 搭建项目
- 第一步： 安装 Node.js
- 第二步： 使用 Node.js 安装 vue-cli
- 第三步： 使用 vue-cli 命令创建项目
(1) 安装 Node.js
Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型，让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHP、Python、Perl、Ruby等服务端语言平起平坐的脚本语言。
Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好，V8引擎执行Javascript的速度非常快，性能非常好，基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。
Node.js 下载地址： https://nodejs.org/zh-cn/download
安装过程中记得勾选上自动配置电脑环境变量的选项，然后一路Next即可，安装完成后验证安装结果：
（2）配置国内镜像
推荐方式：配置国内镜像
npm config set registry https://registry.npmmirror.com
可选方式：将npm切换为cnpm（淘宝镜像）
npm install -g cnpm --registry=https://registry.npm.taobao.org
（3） 使用 Node.js 安装 vue-cli
- 使用npm全局安装 vue-cli
npm install -g @vue/cli
- 验证安装结果
(3) 使用 vue-cli 命令创建项目
vue create mycli
- 使用vue命令创建项目，项目名称为“mycli”
注意：项目名称不能有大写字符
- 在选择项目配置界面中，可以选择预设的配置，或者手动设置：
-
手动选择需要的组件
按照项目实际需要选择 选择需要使用的Vue版本
后续选择：历史模式、配置文件、保存配置等，目前均使用默认值，一路回车即可
项目创建完成后显示提示
- 使用命令启动项目
//进入mycli目录
cd mycli
//启动项目
npm run serve
- 在浏览器中访问项目
