Vue2.0实现在线商城

---

title: Vue2.0实现在线商城
date: 2017-07-22 11:53:48
tags: vue
categories: 项目
author: "JiaWei"
header-img: "https://github.com/13189449986/VueStore/blob/master/img/1.png"

---

这周学习了 尤大大的MVVM框架 Vue 和 Vue周边.按耐不住心中的喜欢,使用vue实现一个商城Demo.

Demo预览

Github源码

项目技术栈使用到

vue: ^2.3.3, vue-resource: ^1.3.4, vue-router: ^2.6.0 , lodash: ^4.17.4 ,webpack: ^2.6.1

---

项目爬过的坑

1. vue-cli启动项目 npm run dev 后本地无法正常显示页面
   • 此时应该检查本地的 8080 端口是否被占用，需要修改一下配置文件 config>index.js 中调试端口 dev{port:8075}
   • 另外我还将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，在本地是无法找到对应文件的（服务器上没问题）。所以如果需要在本地打开打包后的文件，就得修改文件路径。
2. vue-cli打包上线 npm run build 后在本地显示正常,在服务器上显示异常
   • 第一就是路径问题. 此时修改一下配置文件 config>index.js 中 build 配置属性 assetsPublicPathL 的值为 './'
   • 改完了重新构建发现还是空白，检查下 vue-router 是不是使用了 history 模式，去掉即可。(原因是我在 vue-router 里使用了 mode: 'history' ,history 模式可以让 url 更像一个链接，然而需要后台做一些设置，page 服务不能做后台设置)

图片预览

mark
mark
mark

• 让知识与生活每日同行 , 每天比昨天厉害一点