從項目中由淺入深的學習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開發