介绍
这是一个零食商城,原型来自一个慕课网的小程序,前段时间看别人用React Native写过一个迷你水果商城的时候发现了这个小程序,最近有空了,就用vue去实现一下。 UI方面采用了vux组件库,数据服务由easy-mock伪造,vuex实现购物车的状态管理,主要就是这些,作为一个入门级的实践,有兴趣的小伙伴可以看看。
在线DEMO:
在线演示戳我(请使用chrome开发者手机演示模式预览)
效果截图
技术栈
- vue-cli
- vue2
- vue-router
- vuex
- vux
- axios
- less
- eslint
- easy-mock
目录结构
├── README.md
├── build // 构建服务和webpack配置
├── config // 项目不同环境的配置
├── dist // 项目build目录
├── server // express服务器
├── index.html // 项目入口文件
├── package.json // 项目依赖包配置文件
├── src
│ ├── common // 公用的js文件和css样式
| ├── components // 各种通用组件
| ├── pages // 主要页面
│ ├── router // 路由相关文件
│ ├── store // vuex相关文件
│ ├── assets // 图片资源文件
│ ├── App.vue // 根组件
│ └── main.js // webpack预编译入口
├── static // 静态资源文件
安装与运行
# 安装依赖
npm install
# 启动服务 (http://localhost:8080)
npm run dev
# 打包
npm run build
# 分析打包文件
npm run build --report
最后
本项目仅为学习交流使用,如有类同,纯属巧合。
GitHub地址:戳这里
喜欢的话就点个star吧! ^_^