11<!-- TOC -->
22
33- [ 前端知识体系] ( #前端知识体系 )
4- - [ 前端三要素] ( #前端三要素 )
5- - [ 结构层（HTML）] ( #结构层html )
6- - [ 表现层（CSS）] ( #表现层css )
7- - [ 什么是 CSS 预处理器] ( #什么是-css-预处理器 )
8- - [ 常用的 CSS 预处理器有哪些] ( #常用的-css-预处理器有哪些 )
9- - [ 行为层（JavaScript）] ( #行为层javascript )
10- - [ Native 原生 JS 开发] ( #native-原生-js-开发 )
11- - [ TypeScript 微软的标准] ( #typescript-微软的标准 )
12- - [ JavaScript 框架] ( #javascript-框架 )
13- - [ UI 框架] ( #ui-框架 )
14- - [ JavaScript 构建工具] ( #javascript-构建工具 )
15- - [ 三端统一] ( #三端统一 )
16- - [ 混合开发（Hybrid App）] ( #混合开发hybrid-app )
17- - [ 微信小程序] ( #微信小程序 )
18- - [ 后端技术] ( #后端技术 )
19- - [ 附：当前主流前端框架] ( #附当前主流前端框架 )
20- - [ Vue.js] ( #vuejs )
21- - [ iView] ( #iview )
22- - [ ElementUI] ( #elementui )
23- - [ ICE] ( #ice )
24- - [ VantUI] ( #vantui )
25- - [ AtUI] ( #atui )
26- - [ CubeUI] ( #cubeui )
27- - [ 混合开发] ( #混合开发 )
28- - [ Flutter] ( #flutter )
29- - [ Ionic] ( #ionic )
30- - [ 微信小程序] ( #微信小程序-1 )
31- - [ mpvue] ( #mpvue )
32- - [ WeUI] ( #weui )
4+ - [ 前端三要素] ( #前端三要素 )
5+ - [ 结构层（HTML）] ( #结构层html )
6+ - [ 表现层（CSS）] ( #表现层css )
7+ - [ 什么是 CSS 预处理器] ( #什么是-css-预处理器 )
8+ - [ 常用的 CSS 预处理器有哪些] ( #常用的-css-预处理器有哪些 )
9+ - [ 行为层（JavaScript）] ( #行为层javascript )
10+ - [ Native 原生 JS 开发] ( #native-原生-js-开发 )
11+ - [ TypeScript 微软的标准] ( #typescript-微软的标准 )
12+ - [ JavaScript 框架] ( #javascript-框架 )
13+ - [ UI 框架] ( #ui-框架 )
14+ - [ JavaScript 构建工具] ( #javascript-构建工具 )
15+ - [ 三端统一] ( #三端统一 )
16+ - [ 混合开发（Hybrid App）] ( #混合开发hybrid-app )
17+ - [ 微信小程序] ( #微信小程序 )
18+ - [ 后端技术] ( #后端技术 )
19+ - [ 附：当前主流前端框架] ( #附当前主流前端框架 )
20+ - [ Angular] ( #angular )
21+ - [ Angular Material] ( #angular-material )
22+ - [ Vue.js] ( #vuejs )
23+ - [ iView] ( #iview )
24+ - [ ElementUI] ( #elementui )
25+ - [ ICE] ( #ice )
26+ - [ VantUI] ( #vantui )
27+ - [ AtUI] ( #atui )
28+ - [ CubeUI] ( #cubeui )
29+ - [ 混合开发] ( #混合开发 )
30+ - [ Flutter] ( #flutter )
31+ - [ Ionic] ( #ionic )
32+ - [ 微信小程序] ( #微信小程序-1 )
33+ - [ mpvue] ( #mpvue )
34+ - [ WeUI] ( #weui )
3335
3436<!-- /TOC -->
37+
3538# 前端知识体系
3639
3740## 前端三要素
4043- CSS（表现）：层叠样式表（Cascading Style Sheets），设定网页的表现样式
4144- JavaScript（行为）：是一种弱类型脚本语言，其源代码不需经过编译，而是由浏览器解释运行，用于控制网页的行为
4245
43-
44-
4546### 结构层（HTML）
4647
4748略
4849
49-
50-
5150### 表现层（CSS）
5251
5352CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可以自定义变量，不可以引用等，换句话说就是不具备任何语法支持，它主要缺陷如下：
@@ -57,14 +56,10 @@ CSS 层叠样式表是一门标记语言，并不是编程语言，因此不可
5756
5857这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题，前端开发人员会使用一种称之为 ** 【CSS 预处理器】** 的工具，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了前端在样式上的开发效率。
5958
60-
61-
6259#### 什么是 CSS 预处理器
6360
6461CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“** 用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用** ”。
6562
66-
67-
6863#### 常用的 CSS 预处理器有哪些
6964
7065- SASS：基于 Ruby，通过服务端处理，功能强大。解析效率高。需要学习 Ruby 语言，上手难度高于 LESS。
@@ -97,7 +92,7 @@ TypeScript 是一种由微软开发的自由和开源的编程语言。它是 Ja
9792#### JavaScript 框架
9893
9994- jQuery：大家熟知的 JavaScript 框架，优点是简化了 DOM 操作，缺点是 DOM 操作太频繁，影响前端性能；在前端眼里使用它仅仅是为了兼容 IE6、7、8；
100- - Angular：Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念，与微软合作，采用 TypeScript 语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如：1代 -> 2代 ，除了名字，基本就是两个东西；截止发表博客时已推出了 Angular6）
95+ - Angular：Google 收购的前端框架，由一群 Java 程序员开发，其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念，与微软合作，采用 TypeScript 语法开发；对后台程序员友好，对前端程序员不太友好；最大的缺点是版本迭代不合理（如：1 代 -> 2 代 ，除了名字，基本就是两个东西；截止发表博客时已推出了 Angular8）。Angular 作为 Google 推出的一个“重型”的框架，内置包括路由、HTTP 等常用组件，同时深度集成 TypeScript，WebPack，RxJS，angular-cli 等工具，可以方便地进行大型前端项目的开发以及调试。但是由于 Angular 引入了许多概念，增加了新手上手的复杂性。特别是组件、模块、服务、指令、依赖注入的引入，对于新手而言，厘清其中各个概念的作用域是就不是一件容易的事情。同时 RxJS 的引入，也进一步使得学习曲线变得陡峭。
10196- React：Facebook 出品，一款高性能的 JS 前端框架；特点是提出了新概念 ** 【虚拟 DOM】** 用于减少真实 DOM 操作，在内存中模拟 DOM 操作，有效的提升了前端渲染效率；缺点是使用复杂，因为需要额外学习一门 ** 【JSX】** 语言；
10297- ` Vue ` ：一款渐进式 JavaScript 框架，所谓渐进式就是逐步实现新特性的意思，如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular（模块化） 和 React（虚拟 DOM） 的优点；
10398- ` Axios ` ：前端通信框架；因为 ` Vue ` 的边界很明确，就是为了处理 DOM，所以并不具备通信能力，此时就需要额外使用一个通信框架与服务器交互；当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能；
@@ -144,6 +139,21 @@ NodeJS 的作者已经声称放弃 NodeJS（说是架构做的不好再加上笨
144139
145140## 附：当前主流前端框架
146141
142+ ### Angular
143+
144+ #### Angular Material
145+
146+ Angular Material 是 Angular 官方团队维护的一个遵从 Material Design 的 Angular UI 库。它提供了丰富的组件库、CDK、以及内置主题，开箱即用，并且与 Angular 版本同步。
147+
148+ - [ 官网地址] ( https://material.angular.io/ )
149+ - [ Github] ( https://github.com/angular/components )
150+
151+ #### ngx-admin
152+
153+ ngx-admin 是一款开源的 Angualr UI 库，目前仍处于维护和活跃状态。它也提供了丰富的开箱即用的组件库、内置主题，并且与 Angular 版本同步。代码风格遵循 Angular 最佳实践，也是一个不错的学习资源。
154+
155+ - [ Github] ( https://github.com/akveo/ngx-admin )
156+
147157### Vue.js
148158
149159#### iView
@@ -231,4 +241,4 @@ mpvue 是美团开发的一个使用 `Vue.js` 开发小程序的前端框架，
231241WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含 button、cell、dialog、toast、article、icon 等各式元素。
232242
233243- [ 官网地址] ( https://weui.io/ )
234- - [ Github] ( https://github.com/weui/weui.git )
244+ - [ Github] ( https://github.com/weui/weui.git )
0 commit comments