基于vue全家桶实现的简易商城

介绍

这是一个零食商城，原型来自一个慕课网的小程序，前段时间看别人用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吧！ ^_^