**才见岭头云似盖，已惊岩下雪如尘。---《南秦雪》**前言
这几天好多地方都下雪了,雪花真美呀,特地在网上搜上好看的图片和诗句写上。
本文主要从template【模板】讲到一个demo，快速上手vue、react和微信小城序的项目开发。
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 |
| 事件 | $on、$off、$emit、$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.效果图
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开发