Vue，React，微信小程序，快应用，TS 和 Koa 一把梭

前言

前端生态越来越繁华，随着资本寒冬的来临，对前端招聘要求也变高了；
本文将从项目出发由浅入深做一个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插件