每次寫文章時,總會以爲比寫代碼難多了,可能這就是我表述方面的不足吧,然而寫文章也是能夠覆盤一下本身的開發過程,對本身仍是受益良多的。在這裏簡單敘述一下我仿某魚部分佈局以及功能實現的過程,僅作學習用途。css
Vue是一套用於構建用戶界面的漸進式框架,Vue 的核心庫只關注視圖層,不只易於上手,還便於與第三方庫或既有項目整合。另外一方面,當與現代化的工具鏈以及各類支持類庫結合使用時,Vue 也徹底可以爲複雜的SPA單頁面應用提供驅動。html
搜索vue
分類html5
登陸ios
購買git
發佈github
● ┣━ src # 開發目錄 ┣━ api //axios獲取假數據的統一js ┣━ data.js ┣━ assets //靜態文件資源 ┣━ images //圖片 ┣━ utils //通用js方法函數 ┣━ common //通用的文件資源 ┣━ stylus //stylus文件夾 ┣━ component //可複用的組件 ┣━... ┣━... ┣━... ┣━... ┣━... ┣━... ┣━ pages //頁面(頁面組件) ┣━... ┣━... ┣━... ┣━... ┣━... ┣━... ┣━ router //路由 ┣━ index.js ┣━ store //vuex數據狀態管理 ┣━ index.js ┣━ state.js ┣━ mutations.js ┣━ actions.js ┣━ getters.js ┣━ App.vue //根組件 ┗━ main.js
用戶在已登陸狀態和未登陸狀態的界面是不一樣的,有些功能指定要在登陸狀態下才會有,所以會產生狀態的切換,咱們能夠經過瀏覽器自帶的window.localStorage來存儲數據,也能夠用vuex,若是狀態多的狀況下建議採用vuexweb
這個沒什麼好說的,利用indexOf這個方法來驗證假數據中是否有這個key,相應輸出它的value,沒有那就切換另外一個找不到的UI界面vue-router
這個也沒有什麼難度,取到假數據中的數據來for in循環輸出,而後用better-scroll插件來實現滾動對應的高度效果vuex
若是是在未登陸的狀態下,那麼進行一個router-link路由跳轉到登陸login頁面,若是是已登陸的狀態下,會進入到一個商品詳情頁,點擊我想要會進入到一個與賣家聊天交互的一個界面,這裏面的賣家的數據都是模擬出來的假數據,所以它不能像真的賣家同樣。其中每個表情emoji就是一個圖片,用code的方式把它編譯出來再進行一個swiper輪播來包裹他們的遍歷循環。
接着點擊當即購買則會跳到付款頁面,若是填過地址等信息的,那麼能夠選擇,若是未填的,則會引導至輸入相關信息頁面,再點擊購買就成功了,這個時候數據就會利用vuex保存到個人我的頁面中的我買到的頁面中。能夠進行確認收貨後刪除訂單。
同樣,只有在已登陸的狀態下才能夠進入到發佈的界面,發佈就是充當着一個賣家的身份,須要填寫商品詳情的相關信息包括圖片,價格等。經過驗證纔可發佈成功,一樣利用了vuex來保存發佈的商品信息,再跳至個人頁面中的我發佈的頁面進行數據輸出。
我是用rem來實現的,也建議用rem來自適應佈局,先本身封裝一個自適應html的 font-size的js,再將其導入到main.js中
/** * Created by zhaolele on 2018/7/25. */ (function(doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { var clientWidth = docEl.clientWidth; if (!clientWidth) return; docEl.style.fontSize = 32 * (clientWidth / 320) + 'px'; }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window); //10rem
衆所周知,移動端因不一樣的設備的分辨率致使一像素並非真正的統一的一像素,所以咱們須要封裝一個stylus的mixin來引入
border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: 0 width: 100% border-top: 1px solid $color content: ' ' @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) .border-1px &::after -webkit-transform: scaleY(0.7) transform: scaleY(0.7) @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) .border-1px &::after -webkit-transform: scaleY(0.5) transform: scaleY(0.5)
可使用input中type的file屬性,而後用html5的新屬性hidden來隱藏掉這個節點,經過點擊其餘的節點來觸發這個input type=file的點擊事件,再利用lrz的圖片壓縮將圖片優美的輸出到也頁面中。拿裏面的上傳頭像的代碼貼一下。
html: <div class="avatar" @click="addPic"> <img :src="url" alt=""> <span class="upavatar">上傳帥照</span> <input type="file" hidden accept="image/jpeg,image/jpg,image/png" capture="camera" @change="fileInput" ref="file"> </div> js 方法: addPic() { this.$refs.file.click() }, //點擊觸發fileInput事件 fileInput(e) { let files = e.target.files console.log(files) if(!files.length) return this.createImage(files, e) }, createImage(files, e) { lrz(files[0], { width: 480 }).then(rst=> { this.url = rst.base64 }).catch(err=> { console.log(err) }).always(()=> { e.tartget.value = null }) },
**不少東西細節想聊出來,好比嵌套路由所踩的坑..等,可是最近忙於找工做,時間問題就寫到這裏,有興趣或者正在學習vue的同窗能夠查看個人github源碼。fallow-fish若是對你有幫助,能夠star個人項目給我一點點的鼓勵,也但願有志同道和的能夠加入一塊兒討論,我也會第一時間幫你解答。**