一, 简介
vue 全家桶项目, 该项目是基于 Vue 全家桶开发的商城网站, 采用的技术栈为 webpack + Vue + Vuex + Vue-router + Sass + Es6 + LocalStorage + CSS3 + Node(express) + MongoDB; 整个项目前后端分离开发, 前端基于 Vue 全家桶进行渲染, 后端由 NodeJs+MongonDB 提供服务. 整个项目前后端由本人独自开发, 基本实现了一个商城应有的功能!
1, 项目依赖基本核心版本:
- body-parser: "~1.17.1",
- cookie-parser: "~1.4.3",
- debug: "~2.6.3",
- express: "~4.15.2",
- jade: "~1.11.0",
- moment: "^2.20.1",
- morgan: "~1.8.1",
- serve-favicon: "~2.4.2",
- vue: "^2.5.2",
- vue-router: "^3.0.1",
- vuex: "^3.0.1"
2, 项目前端搭建:
基于 Vue 全家桶进行前端页面渲染
基本样式基于 Bootstrap
引入了 Moment.js 格式化前端页面显示时间
3, 项目后端搭建:
使用 NodeJs 的 express 框架完成项目后端搭建;
使用 mongodb 完成数据存储, 通过 mongoose 模块完成对 mongodb 数据的构建;
4. 该商城基本功能:
项目正常访问无需管理员权限, 对个人中心资料的修改, 需要用户登录, 对商城产品及分类的基本操作(增删改查), 需要有管理员权限, 默认一个管理员(chenjun/123456), 具体功能如下:
基本的用户登录, 注册, 个人资料修改
用户权限管理, 登录做 session 处理(失效期暂为 5 天)
商城产品及产品分类的增加, 删除, 更新, 查询(可分页查询)
加入购物车及结算, 下单功能
收货地址的增加, 编辑, 删除
关键字搜索功能
订单查询功能
5, 项目 Github 地址: https://github.com/chenjun1127/vue-mall
二, 项目预览
整体效果, 截图看这里 https://github.com/chenjun1127/vue-mall/blob/master/images.md
三, 运行环境
整个项目的运行, 首先要确保 Node https://nodejs.org/zh-cn/ + MongoDB https://www.mongodb.org/downloads#production 安装并配置好.
四, 项目安装及运行
克隆项目, 进入项目目录;
- git clone git@github.com:chenjun1127/vue-mall.git
- cd vue-mall
安装依赖
npm install or yarn install
启动后端服务
npm run server
执行
npm run dev or npm start
浏览
http://localhost:4000/
打包
npm run build
五, 项目总结
整个项目由于是本人独自开发, UI 部分基于 Bootstrap(没有 UI 设计师), 整体 UI 细节有待优化完善; 部分功能有细微瑕疵, 譬如订单的操作 (增删改查) 未根据订单的状态来判断, 产品分类列表未做分页查询等等, 这些都需要完善! 觉得项目不错的, 可以给个 Star, 谢谢!
六, 重要提示
Tips: 在 npm install or yarn install 的时候, 请确保网络良好, 如个别依赖安装不了, 请设置淘宝镜像为安装源;
强烈推荐使用 Yarn ,Npm 真的太慢了!
运行此项目一定要先启动 Mongo 服务, 并连接 MongoDB 数据库.
如有问题: 请 Issue 或联系 QQ:402074940
来源: http://www.qdfuns.com/article/14070/5a0cc96cc6a1cc038321c0511f7ebcba.html