商城前端技术方案

商城需求概述

在易提柜APP嵌入一个商城，充分利现有的用户资源。在一个易提柜做一个商城平台，引入优质的第三方商家，在易提柜平台和司机用户的基础上，实现一个以拖车货运为主线的垂直电商平台。有些类似唯品会，唯品会是以化妆品为主线的垂直电商平台。我们易提柜则是打造一个以拖车货运为主线的垂直电商平台。

技术方案

后台方案(供参考)

spring cloud alibaba+minio+jenkins+docker

基于netfix公司的spring cloud套件已停止更新，进入维护状态，个人预测基于阿里巴巴的spring cloud 套件会成为主流。

使用微服务架构，建议使用：spring cloud alibaba

• spring cloud alibaba项目地址：https://github.com/spring-cloud-incubator/spring-cloud-alibaba/wiki
• spring cloud alibaba文档：https://nacos.io/zh-cn/

文件服务器，建议统一使用：minio

• minio文档：https://docs.minio.io/cn/
• minio的sdk支持：java，.NET ，JavaScript，Python，Golang
• minio提供了在线的web管理界面，甚至通过插件可以通过目录的形式挂载为linux的文件系统作为目录

使用devop的开发部署运维模式：

• 使用docker jenkins方案，docker用于打包镜像，jenkins做为自动化持续集成测试部署
• 如果后期平台提供k8s支持，将可以无缝的集成到k8s，使用k8s使用容器编排的方案

前端方案

（node + npm + webpack + Vue cli）+ Vue + Vue-router + Vant + Sass

• node：一个基于 Chrome V8 引擎的 JavaScript 运行环境
• npm：类似maven的管理工具
• webpack：一个基于npm的封装的工具
• Vue： 一个支持双向绑定的渐进式JavaScript框架
• Vue-router： 一个用于spa 单页面开发的路由工具
• Vant：一个基于vue的UI框架，是电商平台有赞公司开源和维护
• axios： 一个用于vue的ajax请求工具
• Sass： 一个css 代码工具
• vee-validate： 一个基于vue的数据校验工具
• fastclick： 一个用于处理移动设备事件处理工具
• babel-polyfill ：es6 代码装换，用于浏览器对es6代码的兼容
• @xkeshi/vue-countdown：时分秒毫秒的动态倒计时工具

vue 官网：https://cn.vuejs.org/

Vant 文档：https://youzan.github.io/vant/#/zh-CN/quickstart

npm 官网：https://www.npmjs.com/

教程推荐：https://jspang.com/archives/

npm命令介绍：https://www.cnblogs.com/itlkNote/p/6830682.html

主要实现方案：

基于开源项目vant--mobile-mall进行二次开发

vant--mobile-mall 项目地址：https://github.com/qianzhaoy/vant--mobile-mall

环境搭建：

0. 安装git

1. node安装

   下载地址：https://nodejs.org/dist/v10.15.2/node-v10.15.2-x64.msi

   安装全部点击下一步

   安装目录使用全部小写且不能有空格

2. 测试：

   运行node -v 显示 v10.15.1

   运行npm -v 显示 6.4.1

   以上表示node安装成功

3. 配置仓库地址：

   因为node和npm安装后默认的仓库地址为国外的站点，在下载包的时候超级慢，所以需要配置国内的仓库地址

   配置方法：在cmd 运行 npm config set registry https://registry.npm.taobao.org

   测试：在cmd 运行 npm config get registry 显示仓库地址为https://registry.npm.taobao.org表示配置成功

运行项目

git clone https://github.com/qianzhaoy/vant--mobile-mall.git

1. 打开cmd
2. 进入vant--mobile-mall根目录
3. 在cmd运行执行npm install -g json-server 命令全局安装json-server包，用于模拟数据时会使用到
4. 在cmd运行执行npm install 这个命令类似 java的mvn instal
5. 在cmd运行执行npm run serve 运行项目

教程推荐：

https://jspang.com/archives/

https://www.cnblogs.com/itlkNote/p/6830682.html

其他类似开源项目参考：

https://github.com/dabaoRain/vueFruitShop

https://github.com/Mynameisfwk/vivo-shop

https://mint-ui.github.io/docs/#/zh-cn2

​