用 Vue 作一个简单的购物app

前言

最近在学习Vue的使用。看了官方文档以后，感受挺有意思的。因而着手作了一个简单的购物app。
这是我第一次在这个网站上写分享，若有不当之处，请多多指教。

一整个项目写下来，最大的感受就是组件式开发，管理起来实在是太舒服了。并且vue中写scss还能够指定局部有效。这样写起scss感受安全多了。用 vuex 进行全局数据管理也挺舒心的。element-ui 则大大解放了生产力。

概述

项目使用 Webpack + Vue2.x + vue-cli + vue-router + vuex + axios + element-ui 进行开发。
项目地址：https://github.com/OEEO/shopp...

上述技术栈简要说明：

vue-cli

vue-cli 就是使用搭建vue项目的脚手架，会帮你生成webpack的配置，以及大部分项目须要使用到的依赖，你只须要 install 就能够了。配置过 webpack 的同窗应该能体会到使用 vue-cli 的爽。

vue-router

vue-router 主要用于单页应用的页面切换，用路由的好处是不用刷新页面，就能够跳转页面，并且 url 会变化，便于用户收藏地址。经常使用于不须要与后端交互数据的页面变化操做。

vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。简单来讲就是专门用于管理数据的一个全局对象。我以为用 Vuex 管理数据的最大好处是便于维护，以及方便与后端交互数据。

axios

axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中。
axios 不支持 jsonp ，若是须要，要单独引入 jsonp。

element-ui、mint-ui

这两个都是饿了么团队贡献的 UI 组件库，其中 mint-ui 更轻量，更适用于手机端，但我实践过程当中是发现 mint-ui 的功能太少，很难知足需求。以单独引入的方式使用 element-ui 可减少其占用体积，也是不错的选择。

遇到的问题及解决办法

一、当组件中的 style 标签中使用了 scoped，会致使某些 element-ui 中的默认样式修改无效。

解决办法：将对 element-ui 的修改单独写在一文件中，再用 import 引入到没使用 scoped 的 app.vue 中。
或者不要使用 scoped 。

二、父路由切换到子路由，地址发生了变化，页面却没出来

解决办法：父路由的页面中须要添加 router-view 子路由才会显示出来。

三、computed 不能传入参数

解决办法：使用 methods。不过通常状况下，若是能用computed解决的都用computed，由于computed会把结果缓存，性能更优。

因为不少问题都是作项目的时候，顺便就搜索解决了，一时也想不起来还有什么特别的问题了。
若有什么建议，或我能够解决的问题，欢迎联系本人。

最后若是大神们若有什么进阶项目推荐，也请多多指教。有好玩的项目写，动力就大大不同。

若是本项目对你有帮助，请在 github 赐个 star 咯。另外本人找工做ing，若有本人能够胜任的工做，请给个机会。毕竟自已独自在家写代码，不如在团队中写代码有意思。