从项目中由浅入深的学习vue,react,微信小程序和快应用【加薪必备】

才见岭头云似盖，已惊岩下雪如尘。---《南秦雪》 ###前言

目前市场技术栈的广度和深度决定你可以值多少钱，恰好这里列举了几种经常使用技术栈。
本文主要从template【模板】讲到一个demo，快速上手vue、react和微信小城序的项目开发。
若是你不熟悉这中间的某一个技术栈,能够clone下来跑一跑。 若是所有能上手,中间有些细节耶能够看看。开撸

1.template篇

1.1 vue-template-pc

1.效果图

vue-template-pc项目 ，欢迎star

2.技术栈 vue+vue-router+vuex+axios+element-UI+iconfont(阿里)

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

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

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

1.2 react-pc-template

1.效果图

react-pc-template项目, 欢迎star

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

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

4.技能点分析

技能点	对应api
JSX	react是基于jSX语法
生命周期	实例化(5个):getDefaultProps,getInitialState,componentWillMount,render,componentDidMount
生命周期	更新:5个生命周期
生命周期	销毁:componentWillUnmout
路由	基于umi,里面有push,replace,go等方法
状态管理	dva里面的redux的封装,属性有state,effects,reducers
组件传值	父子:props,平级redux或umi的router
model	项目的model和dom是经过@connect()链接并将部分属性添加到props里
登录	登录是经过在入口js里面作路由判断

5.那么问题来了?
umi的router传参形式? 解析
dva封装的redux和原生的redux使用有那些不一样? dva使用解析redux使用解析
umi里面router实现原理?umi源码
对比vue和react在原理和使用上的区别?

1.3 vue-mobile-template

移动端代码见demo篇

1.4 小程序模板

因为小程序的IDE里面有生成的模板,mobile也是基于vue,因此只在demo篇展现demo

1.5 快应用模板

1.template代码实现 官方template生成教程

2.技能点分析

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

2.demo篇

2.1 vue-demo(vue-pc-demo)

1.效果图

vue-demo项目地址, 欢迎star

2.技术栈
vue+vue-router+vuex+axios+element-UI+高德map+vue-split-table
高德map:高德地图
vue-split-table:表格拆分插件,vue-split-table插件

3.适配方案 同上

4.技能点分析 比template篇多了map的使用,高德使用手册 实现axios的api模块化,并全局挂载api和axios 因此由此能够看出只要有了template,后期开发so-easy,只是新加tab页

2.2 react-pc-demo

参考ant的ant-design-pro项目

2.3 vue-mobile-demo

1.效果图

vue-mobile项目

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

3.适配方案 rem

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

5.那么问题来了 vue-cli生成的项目src下面的assets和根路径下面的static目录的区别?解析

2.4 小程序demo

1.效果

min-program-demo项目 ,欢迎star

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

3.适配方案 rpx:微信小程序的单位

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和路由

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

6.小程序框架 wepy官网
基于wepy的商城项目
mpVue
基于mpVue的项目

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

2.5 快应用demo

相似书单项目的快应用

3.结语

对比下vue,react,微信小程序和快应用这几种技术栈开发,能够分为两类, 一类是mvvm式的开发:vue,微信小程序和快应用 一类是基于JSX的view开发