用 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 可减小其占用体积,也是不错的选择。

遇到的问题及解决办法

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

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

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

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

3、computed 不能传入参数

解决办法:使用 methods。不过一般情况下,如果能用computed解决的都用computed,因为computed会把结果缓存,性能更优。

由于很多问题都是做项目的时候,顺便就搜索解决了,一时也想不起来还有什么特别的问题了。
如有什么建议,或我可以解决的问题,欢迎联系本人。

最后如果大神们如有什么进阶项目推荐,也请多多指教。有好玩的项目写,动力就大大不一样。

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

205 声望
6 粉丝
0 条评论
推荐阅读
linux 的常用命令及文件权限管理
要理解 linux 下的用户权限管理。就需要理清 文件、用户、进程之间的关系。首先,root 用户拥有最高权限。拥有所有文件的读、写、运行权限。

Dean1阅读 2.7k

「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.6k评论 5

封面图
Vue中的diff算法
diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历,所以时间复杂度只有 O(n)。diff算法的在很多场景下都有应用,例如在 vue 虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比较更新时...

款冬27阅读 14.2k评论 7

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.1k评论 10

封面图
vue-property-decorator使用手册
@Component 装饰器可以接收一个对象作为参数,可以在对象中声明 components ,filters,directives等未提供装饰器的选项,也可以声明computed,watch等

似曾相识17阅读 29.7k评论 7

嘿,vue中keep-alive有个「大坑」你可能还不知道
背景是这样的,我们使用vue2开发一个在线客服使用的IM应用,基本布局是左边是访客列表,右边是访客对话,为了让对话加载更友好,我们将对话的路由使用<keep-alive>缓存起来。但是如果将所有对话都缓存,未...

wuwhs11阅读 2k

封面图
前端开发工具
前端教程阿西河前端教程丨一个助你成为全栈开发的网站前端高手进阶JavaScript利用js实现表单的校验KeyCode 查询表现代 JavaScript 教程时间戳(Unix timestamp)转换工具HTML minifierJavaScript代码压缩-js代码压...

寒青14阅读 2.6k

205 声望
6 粉丝
宣传栏