基于vue2.0打造移动商城页面实践

前言

从angular到react再到后来的vue~火热的框架可谓一个接一个，着实让小的有点力不从心，大神们为了更好的组织编写代码，费尽心机捣鼓了各种各样的框架。由于小的没有怎么接触react，暂且不做过多描述，且说说angular和vue吧。

接触angular大约是在两年前，那会还是angular1。这也是小的使用的第一个框架，让我印象最深刻的是它让我完全改变了基于jquery开发时的编码方式，从dom的操作，拼接转变为数据驱动。从此不用再去纠结页面的呈现应该如何切换，如何追加列表，信息录入的时候不用再遍历选中输入框再去获取其中的输入值，还有强大的自定义指令能够方便的将需要复用的功能抽取。但也不得不说，这个版本的angular确实蛮重的，所幸那会编写的都是pc端的页面，还hold的住，现在再瞅瞅好像都出到4了，再次感叹这迭代速度，不过好来小的因为工作的原因，很少再接触这个框架了。

后来工作主要涉及移动端的开发，遇到个比较棘手的问题是项目都是基于前后端混合的方式开发的，在分工明确的情况下，往往一份代码就需要两个小伙伴的配合，确实有点小揪心，于是一直谋划着做个前后端分离的工作。

因为是前后端分离，页面数据不再是通过后端语言的变量分配的方式来呈现，那么数据的显示就是一个大问题，所以面临两个选择，要不选一个mvvm的框架做数据渲染，要不自己捣鼓一个，后者一直是小的梦想（嗯~梦想还是要有的），在框架的选择上，第一个想到的还是angualr，但是觉得将angular用在移动端页面上有点杀鸡用牛刀，最后选中了轻量高效的vue（这里再次点赞vue cli，对我的编码工作带来了很大的便利）。

注：此项目页面基于sanse商城，只是笔者做前后端分离的实践实验，如需下单请到sanse app或是微信公众号

---

项目地址

https://github.com/x-shadow-x/sanse_wap_v2

---

技术栈

vue2 + vue-rotuer2 + vuex + webpack + ES6 + axios + flex

---

挖坑集锦

• 跨域
  

  ---

项目中几乎所有的数据请求都是基于ajax，数据通过测试接口返回，而开发环境下是基于node服务器打开的网页，于是就不可避免面临跨域的问题，所幸强大的vue cli考虑到了这点，只需稍做配置，便可将请求代理到指定的域名下，操作如下：
基于vue cli构建的项目，都可在根目录下找到config文件夹，我们修改其中的index.js文件，在dev属性中添加如下代码：

其中 ‘/api’ 为匹配项，target 为被请求的地址
此时只需将请求数据的baseURL设置为/api，便可正确请求到target选项中指明的请求地址下的数据，比如：

当然，这只是开发环境为了方便编码，如果项目部署到测试环境或是正式上线，跨域还需另外处理，具体看项目对应的后端，主要就是添加几个允许跨域的头。

• build出来的项目刷新报404错误
  

  ---

因为一开始做路由的时候使用的是history模式，开发环境的时候使用node做服务器，并未遇到这个问题，但是当将项目build出来放置到测试服务器上运行的时候，因为服务器使用的是iis，并不支持history的模式，页面在刷新的时候因为其url都是脚本模拟的，故找不到对应的资源而报404，无奈之下只能讲路由形式改回hash。
这里注意如果涉及到微信支付，在微信后台配置域名的时候要注意配置到#之后

---

项目截图

• 首页
  

---

• 品牌列表
  

---

• 商品列表
  

---

• 商品详情
  

---

• 购物袋
  

---

• 订单页
  

---

• 个人中心
  

---

结尾

本项目主要基于vue2 构建前后端分离项目的实验，因为是用业余时间捣鼓的项目，周期有点长，目前也有段时间木有更新了，后续会找机会将首页改版为自定义广告布局页面。