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

结语

第一次写文章，第一次花几个月的时间去写一个完整的项目，有太多的感慨，若是您有兴趣阅读个人代码，欢迎指出那些写的不够好的地方。