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

结语

---

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

转载于:https://juejin.im/post/59e6acb96fb9a044fa18f080