vue高仿美麗修行

爲何高仿美麗修行?

---

• 難度適中，相比於高仿Elma，業務邏輯較爲簡單，專一於vue自己的技術提高。
• 足夠大，美麗修行包含產品搜索，美妝社區，膚質測試等功能一塊兒40多個組件，能夠覆蓋到vue大部分知識點。
• 方便，這個是我的緣由，我有詳細的接口和設計圖文檔，有更多時間地探索vue的最佳實踐。

技術棧

---

• vue
• vue-router
• vuex
• vue-swiper
• axios
• webpack
• http-proxy-middleware

快速開始

---

在線體驗（Tips:線上體驗沒有配置代理，不少數據訪問不到，clone到本地能夠有完美體驗。）

github倉庫

$   cd my-project
$   npm init
$   npm install
$   npm run dev複製代碼

預覽

---

首頁截圖

產品詳情截圖

跨域

---

圖片跨域

圖片自己其實不存在跨域問題，只是增長了防盜鏈，致使不是在白名單內的域名不能正常訪問。

這裏對防盜鏈的原理作一個簡單的解釋，在訪問圖片時，會在請求裏自動添加referrer字段，這個字段就是記錄請求來源的域名，若是本地開發就是localhost。

第三方的對象存儲會把referrer與設置的白名單對比，若是白名單內沒有這個域名就返回403。因此，這裏咱們能夠在header里加入referrer=""來跳過防盜鏈的限制。

接口跨域訪問

接口跨域，解決方案：jsonp、代理。

跨域產生的緣由是因爲瀏覽器的同源策略，對於有src屬性的標籤來講，沒有同源策略的限制。因此，能夠利用js跨域取到數據，也就是jsonp。

不過jsonp只支持get請求，對於post請求的數據，咱們須要用到代理。服務器之間沒有同源策略的限制，因此咱們能夠在本地弄一個代理服務器，請求接口。

最簡單的辦法就是使用http-proxy-middleware進行代理，能夠經過webpack進行配置，對於vue-cli的用戶來講,在本地開發時能夠在config文件夾下的index.js裏配置proxyTable來進行跨域。

已完成的功能

---

• 產品搜索
• 產品列表
• 產品詳情
• 修行社
• 話題列表
• 話題詳情
• 心得詳情
• 我的中心
• 登錄
• 註冊
• 膚質

待完成的PWA實踐

---

• Preload
• Precache
• Lazyload

大部分組件和業務邏輯都已經完成，下一步是根據chrome團隊提出的漸進式web應用的一些最佳實踐進行優化。目前只完成app shell，service worker相關的緩存和路由懶加載還在探索中。

一些問題

---

用webpack配置了代理後api.bevol.cn這個接口在chrome下訪問仍是有403的限制，firefox,ie等沒有問題。 本地開發在chrome裏訪問不到的數據我都用骨架屏替代。若是你知道如何解決請聯繫我：
QQ:535700846
WeChat：18571531064

結語

第一次寫文章，第一次花幾個月的時間去寫一個完整的項目，有太多的感慨，若是您有興趣閱讀個人代碼，歡迎指出那些寫的不夠好的地方。