前言

前端生态越来越繁华，随着资本寒冬的来临，对前端招聘要求也变高了；
本文将从项目出发由浅入深做一个 Vue，React，微信小程序，快应用，TS 和 Koa 的知识大串联；
相当于一篇文章搞定前端目前主流技术栈。

1. 源码（持续更新）

话不多说，源码地址：Vue，React，微信小程序，快应用，TS 和 Koa 地址，欢迎 star
项目目录：

2.vue 篇

2.1 vue-demo

2.1.1 效果图

Vue，React，微信小程序，快应用，TS 和 Koa 地址，欢迎 star

2.1.2. 技术栈

vue+vue-router+vuex+axios+element-UI+iconfont(阿里)

2.1.3. 适配方案

左侧固定宽度，右侧自适应
左侧导航和右侧导航分别配置滚动条

2.1.4. 技能点分析

技能点	对应 api
常用指令	@(v-on)绑定事件, v-if/v-show 是否创建 / 和是否显示,v-for 循环
生命周期	8 个生命周期 beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy 和 destroy
观察计算	computed 和 watch
data 属性	定义变量, 同样变量使用必须先定义
组件注册	components 局部注册,Vue.component()全局注册
组件通讯	子传父:this.$emit, 父传子:props, 平级组件:vuex 或路由传参
插件注册	Vue.use()注册插件, 如 Vue.use(element)是调用 element 内部的 install 方法
路由注册	vue-router:Vue.use(router)也是调用内部的 install 方法, 挂载到 vue 实例中生成 route 和 router 属性
路由模式	mode 属性可以设置 history 和 hash
子路由	children:[]可以配置子路由
路由钩子	router.beforeEach(实现导航钩子守卫)和 router.afterEach
vuex	4 个属性,state,getters, actions(异步获取数据)和 mutations(同步获取数据)
vuex	4 个辅助函数,mapState,mapGetters, mapActions 和 mapMutations, 就是辅助处理 commit 或 distapch 方法
axios	拦截器,interceptors.request 请求拦截器,interceptors.response 响应拦截器
axios	baseUrl 配置公共请求路径, 必须符合 http 标准的链接, 否则设置无效
axios	请求方法,get,post,put,delete 等
axios	跨域,withCredentials: true, 需要后端支持
css	sass, 对应嵌套不超过三层, 滚动条样式设置, 文本两行超出 build 问题
iconfont	阿里字体图标，可以自定义 icon

2.1.5. 那么问题来了?

computed 和 watch 的区别? 解析
路由传参的方法? 解析
vue.use,vue.install,mixins 方法区别? 解析
history 和 hash 区别及实现原理? 区别解析原理解析 vue-router 官网
使用 history 和 hash 模式部署服务器有什么问题? 问题解析
vuex 的辅助函数和基本属性使用的区别?vuex 官网
axios 原理?axios 源码
简单实现一个 vue+vue-router+vuex 的框架?

2.2 vue-mobile-demo

2.2.1 效果图

2.2.2 技术栈

vue+vue-router+vuex+vant+rem+sass+iconfont(阿里)
vant: 有赞的电商 mobile 插件

2.2.3 适配方案

rem

2.2.4 技能点分析

iconfont 的使用: 官网配置 icon, 导出图标, 引入 assets 目录下
vant 使用: 详见 vant 官网
全局配置 rem: 在 index.html 文件配置
全局配置 sass 函数和 mixin: 在 build/utils 下面的 scss 的 options 属性配置 static 目录下面的函数和混入

2.2.5 那么问题来了

vue-cli 生成的项目 src 下面的 assets 和根路径下面的 static 目录的区别? 解析

3. react 篇

3.1 react-mobile 篇

3.1.1 效果图

Vue，React，微信小程序，快应用，TS 和 Koa 地址，欢迎 star

3.1.2 技术栈

react + react-router-v4 + redux +ant-design-mobile+iconfont
react-router-v4: 路由 4.x 版本
redux: 状态管理
ant-design-mobile:UI 组件
iconfont: 字体 icon

3.1.3 适配方案

rem 适配

3.1.4 技能点分析

技能点	对应的 api
3 种定义 react 组件方法	1. 函数式定义的无状态组件; 2.es5 原生方式 React.createClass 定义的组件; 3.es6 形式的 extends React.Component 定义的组件
JSX	react 是基于 jSX 语法
react16 之前生命周期	实例化(6 个):constructor，getDefaultProps,getInitialState,componentWillMount,render,componentDidMount
react16 生命周期	实例化(4 个):constructor，getDerivedStateFromProps,componentWillMount,render,componentDidMount,componentWillUpdata,render,componentDidUpdate, componentWillUnmount
生命周期	更新(5 个) componentWillReceivePorps,shouldComponentUpdate,
生命周期	销毁:componentWillUnmout
react-dom	提供 render 方法
react-router 4.x 组成	react-router(核心路由和函数) , react-router-dom(API) , react-router-native(React Native 应用使用的 API)
react-router 4.x 的 API	router(只能有一个) , route(匹配路由渲染 UI) , history, link(跳转) , navlink(特定的 link, 会带样式) , switch(匹配第一个路由) , redirect(重定向) , withRouter(组件, 可传入 history,location,match 三个对象)
react-router 3.x 组成	就是 react-router
react-router 3.x 的 API	router , route , history(push 和 replace 方法) , indexRedirect(默认加载) , indexRedirect(默认重定向) , link(跳转) , 路由钩子(onEnter 进入,onLeave 离开)4.x 已经去掉
history	react-router 有三种模式: 1.browserHistory(需要后台支持); 2.hashHistory(有 ’#’); 3.createMemoryHistory
redux	单向数据流 , action(通过 dispatch 改变 state 值) , reducer(根据 action 更新 state) , store(联系 action 和 reducer)
react-redux	1. 连接 react-router 和 redux, 将组件分为两类:UI 组件和容器组件(管理数据和逻辑) , 2.connect 由 UI 组件生成容器组件 , 3.provider 让容器组件拿到 state , 4.mapStateToProps: 外部 state 对象和 UI 组件的 props 映射关系, 5.mapDispatchToProps: 是 connect 第二个参数，UI 组件的参数到 store.dispatch 方法的映射
react-loadable	代码分割, 相当于 vue-router 中的路由懒加载
classNames	动态 css 的类

3.2 react-pc-template 篇

3.2.1 效果图

Vue，React，微信小程序，快应用，TS 和 Koa 地址，欢迎 star

3.2.2 技术栈

dva+umi+ant-design-pro
dva: 可拔插的 react 应用框架, 基于 react 和 redux
mui: 集成 react 的 router 和 redux
ant-design-pro: 基于 react 和 ant-pc 的中后台解决方案

3.2.3 适配方案

左侧固定宽度，右侧自适应
右侧导航分别配置滚动条. 控制整个 page

3.2.4 技能点分析

技能点	对应 api
路由	基于 umi, 里面有 push,replace,go 等方法
状态管理	dva 里面的 redux 的封装, 属性有 state,effects,reducers
组件传值	父子:props, 平级 redux 或 umi 的 router
model	项目的 model 和 dom 是通过 @connect()连接并将部分属性添加到 props 里
登陆	登陆是通过在入口 js 里面做路由判断

4. 微信小程序篇

4.1 小程序 demo

4.1.1 效果

Vue，React，微信小程序，快应用，TS 和 Koa 地址，欢迎 star

4.1.2 技术栈

weui+tabbar+ 分包 +iconfont+ 自定义顶部导航 + 组件传值 +wx.request 封装
weui:Tencent 推出的小程序 UI

4.1.3 适配方案

rpx: 微信小程序的单位

4.1.4 技能点分析

技能点	对应 api
常用指令	bindtap 绑定事件, wx:if/wx:show 是否创建 / 和是否显示,wx:for 循环
生命周期 1	应用生命周期(app.js 里):launch,show,hide
生命周期 2	页面生命周期(page 里):load,show,ready,hide,unload
生命周期 3	组件周期(component 里):created,attached,moved,detached
wx.request	ajax 请求
背景音乐	wx.getBackgroundAudioManager
音频	wx.createAudioContext
图片	wx.chooseImage
文件	wx.getFileInfo
路由	在 app.json 里面 pages 属性定义 pages 目录下面的文件
路由切换	wx.navigateTo，wx.navigateBack，wx.redirectTo，wx.switchTab，wx.reLaunch
分包	在 app.json 里面 subPackages 属性定义分包路由
weui 组件	weui 官网
原生组件	微信原生组件
业务组件	在 json 文件 usingComponents 注册
组件通讯	定义 globalData，storage 和路由

4.1.5 那么问题来了

小程序的生命周期执行顺序？page 和应用生命周期，component 生命周期解释
几种路由切换有什么不同？路由介绍
小程序怎么实现 watch 监听数据变化？实现 watch

4.1.6 小程序框架

wepy 官网
基于 wepy 的商城项目
mpVue
基于 mpVue 的项目

分析: 这两个框架都是通过预编译将对应风格的格式转化成小程序格式

5. 快应用篇

5.1 快应用模板

5.1.1 技能点分析

技能点	对应 api
布局	基于弹性布局
指令	for：循环，if、show
生命周期	页面的生命周期：onInit、onReady、onShow、onHide、onDestroy、onBackPress、onMenuPress
app 生命周期	onCreate、onDestroy
事件	$on、$off、$emit、$emitElement
路由配置	manifest 文件的 router 属性配置
路由跳转	router.page
组件通讯	父子组件：$emit，props，兄弟组件：通过 Publish/Subscribe 模型
原生组件	list，map，tabs 和 canvas
消息机制	websocket 使用

6.TS 篇

6.1 TS 前言

为什么会有 TS? 大家有没想过这个问题, 原因是 JS 是弱类型编程语言, 也就是申明变量类型可以任意变换。所以这个时候 TS 出现了。
TS 是 JS 的超集，也相当于预处理器, 本文通过一个 template 项目来让你快速上手 TS。

6.2 效果图

Vue，React，微信小程序，快应用，TS 和 Koa 地址，欢迎 star

6.3 技术栈

1.vue
2.vue-cli3
3.vue-router
4.vuex
5.typescript
6.iconfont

6.4 核心插件

技能点	对应的 api
vue-class-component	是 vue 官方提供的，暴露了 vue 和 component 实例
vue-property-decorator	是社区提供 深度依赖 vue-class-component 拓展出了很多操作符 @Component @Prop @Emit @Watch @Inject 可以说是 vue class component 的一个超集，正常开发的时候 你只需要使用 vue property decorator 中提供的操作符即可

vue-property-decorator 暴露的 API

API	作用
@Component	注册组件
get	类似 vue 的 computed
@Prop,@Emit	组件传值
@Watch	监听值变化
@Privde,@Inject	对应 privde 和 inject 高阶组件用法, 作用是多级父组件传值给子
@Model	类似 vue 的 model

6.5 TS 语法

数据类型	any(任意类型)； number； string, boolean； 数组：number[]或 new Array(项的数据类型相同)； void 返回值类型； null； undefined； never(从不出现值)； 元祖 (比数组强大, 项的类型可以不同)； 接口：interface 关键字； 对象：类似 JS 的 object； 函数：function 声明； 类：class 关键字，包括字段，构造函数和方法
变量声明	let [变量名] : [类型] = 值, 必须指定类型 声明 array,let arr: any[] = [1, 2]
运算符, 条件语句, 循环	同 JS
函数	声明同 JS, 形参必须指定类型, 因为形参也是变量
联合类型	通过竖线声明一组值为多种类型
命名空间	namespace 关键字
模块	import 和 export
访问控制符	public，private(只能被其定义所在的类访问)和 protected（可以被其自身以及其子类和父类访问） 默认 public，是不是有点 Java 的味道

6.6 问题来了

1. 怎么在项目手动配置 ts？
vue+ts 项目配置

2. 接口和类的区别？
接口只声明成员方法，不做实现，class 通过 implements 来实现接口
ts 中接口和类的区别

3. 接口和对象的区别？
接口是公共属性或方法的集合，可以通过类去实现；
对象只是键值对的实例

4. 类 class 和函数的区别？
类是关键字 class，函数是 function
类可以实现接口

5. 接口实现继承方法？

interface Person {age:number} 
 
interface Musician extends Person {instrument:string} 
 
var drummer = <Musician>{}; 
drummer.age = 27 
drummer.instrument = "Drums" 
console.log("年龄:"+drummer.age)
console.log("喜欢的乐器:"+drummer.instrument)

7. koa 篇

7.1 koa 前言

node.js 的出现前端已经可以用 js 一把梭, 从前端写到后台。
本文从后台利用 node 的框架 koa+mongodb 实现数据的增删改查和注册接口，前端利用 umi + dva +ant-design-pro 来实现数据渲染。实现一个小全栈 project, 就是 so-easy

7.2 效果图

Vue，React，微信小程序，快应用，TS 和 Koa 地址，欢迎 star

7.3 技术栈

koa：node 框架
koa-bodyparser：解析 body 的中间件
koa-router：解析 router 的中间件
mongoose：基于 mongdodb 的数据库框架，操作数据
nodemon：后台服务启动热更新

7.4 项目目录

├── app // 主项目目录
│ ├── controllrts // 控制器目录（数据处理）
│ │ └── … // 各个表对应的控制器
│ ├── middleware // 中间件目录
│ │ └── resFormat.js // 格式化返回值
│ ├── models // 表目录（数据模型）
│ │ ├── course.js // 课程表
│ │ └── user.js // 用户表
│ └── utils // 工具库
│ │ ├── formatDate.js // 时间格式化
│ │ └── passport.js // 用户密码加密和验证工具
├── db-template // 数据库导出的 json 文件
├── routes // 路由目录
│ └── api // 接口目录
│ │ ├── course_router.js // 课程相关接口
│ │ └── user_router.js // 用户相关接口
├── app.js // 项目入口
└── config.js // 基础配置信息

7.5 项目启动步骤

1.git clone
2. 安装 mongodb:http://www.runoob.com/mongodb…
3. 安装 Robomongo 或 Robo 3T 是 mongodb 可视化操作工具 (可选)
4. 启动
mongod (启动 mongodb)
打开 Robomongo 或 Robo
cd koa-template
npm i
npm run start
cd react-template
npm i
npm run start

注意:
mongodb 启动默认端口号是 27017, 启动看是否被占用
后端项目端口号是 3000, 可以在 koa-template/config.js 里面修改

7.6 koa 的主要 API

API	作用
new koa()	得到 koa 实例
use	koa 的属性, 添加中间件
context	将 node 的 request 和 response 对象封装到单个对象中, 每个请求都将创建一个 Context, 通过 ctx 访问暴露的方法
ctx 方法	request: 请求主体; response: 响应主体; ctx.cookies.get: 获取 cookie; ctx.throw: 抛出异常
request 属性	header: 请求头; method: 方法; url: 请求 url; originalUrl 请求原始 URL; href: 完整 URL; hostname: 主机名; type: 请求头类型;
response 属性	header: 响应头; status: 状态, 未设置默认为 200 或 204; body: 响应主体,string(提示信息) Buffer Stream(流) Object Array JSON- 字符串化 ull 无内容响应; get: 获取响应头字段; set: 设置响应头; append: 添加响应头; type: 响应类型; lastModified: 返回为 Date, 如果存在; etag: 设置缓存

7.7 koa-router 主要 API

API	作用
get	get 方法
post	post 方法
patch	patch 方法
delete	delete 方法
prefix	配置公共路由路径
use	将路由分层, 同一个实例 router 中可以配置成不同模块
ctx.params	获取动态路由参数
fs	分割文件

7.8 mongoose 主要 API

API	作用
Schema	数据模式, 表结构的定义；每个 schema 会映射到 mongodb 中的一个 collection，它不具备操作数据库的能力
model	schema 生成的模型，可以对数据库的操作

model 的操作 database 方法

API	方法
create/save	创建
remove	移除
delete	删除一个
deleteMany	删除多个
find	查找
findById	通过 id 查找
findOne	找到一个
count	匹配文档数量
update	更新
updateOne	更新一个
updateMany	更新多个
findOneAndUpdate	找到一个并更新
findByIdAndUpdate	通过 id 查找并更新
findOneAndRemove	找到一个并移除
replaceOne	替换一个
watch	监听变化

query 查询 API

API	作用
where	指定一个 path
equals	等于
or	或
nor	不是
gt	大于
lt	小于
size	大小
exists	存在
within	在什么之内

注:Query 是通过 Model.find()来实例化
aggregate(聚合)API

API	作用
append	追加
addFields	追加文件
limit	限制大小
sort	排序

注:aggregate=Model.aggregate()

更多详细 API, 请戳