前言
每次寫文章時，總會覺得比寫程式碼難多了，可能這就是我表述方面的不足吧，然而寫文章也是可以覆盤一下自己的開發過程，對自己還是受益良多的。在這裡簡單敘述一下我仿某魚部分佈局以及功能實現的過程，僅做學習用途。
Vue是一套用於構建使用者介面的漸進式框架，Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的SPA單頁面應用提供驅動。
技術棧以及元件庫
- vuex: 解決元件資料共享問題，加強元件資料持久化。
- vue-router: 主要實現spa單頁面開發。
- axios: 非同步請求資料。
- easymock: 假資料模擬介面。
- mint-ui: 一款移動端開發的框架。Mint UI
- stylus: css前處理器
- better-scroll: 一個移動端滾動的解決方案
- swiper: 一個強大的滑動特效外掛
- lrz: 圖片壓縮外掛
實現效果
搜尋
購買
程式碼目錄結構
●
┣━ 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，如果狀態多的情況下建議採用vuex
-
搜尋功能
這個沒什麼好說的，利用indexOf這個方法來驗證假資料中是否有這個key，相應輸出它的value，沒有那就切換另一個找不到的UI介面
-
分類功能
這個也沒有什麼難度，取到假資料中的資料來for in迴圈輸出，然後用better-scroll外掛來實現滾動對應的高度效果
-
購買
如果是在未登入的狀態下，那麼進行一個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我的專案給我一點點的鼓勵，也希望有志同道和的可以加入一起討論，我也會第一時間幫你解答。