rr-eng/e-commerce-platform

仿电商平台

vue-project

A Vue.js project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

For detailed explanation on how things work, checkout the guide and docs for vue-loader.

1. App.vue: 实现首页的header和footer,content部分采用vue-router方式进行切换。为首页的logo标志添加路由，在任一路由中点击logo都可跳转到首页.同时首页中存在登录，注册，关于，这三个功能的实现采用类似modal模态框的功能来实现。

2. headerComponents/dialog.vue:  可复用的dialog弹出框组件，首先会存在一个遮罩层来模拟modal效果，同时弹出框出现和消失时会有动画效果。该弹出框 通过props获得父组件的数据，来控制弹出框的显示和消失。当想要关闭弹出框时，通过this.$emit()来触发父组件事件，在父组件中进行弹出框的关闭。 (因为一般不推荐在子组件中改变通过props获取到的父组件数据。)

3. headerComponents/LogForm.vue:  登录组件。实现比较简单，要求用户输入用户名和密码，并通过正则对用户名和密码进行验证，(注意一点：验证的提示信息通过计算属性computed来实现)，关闭登录框时，通过this.$emit()触发父组件事件，改变App.vue中的登录等数据。

4. headerComponents/RegForm.vue:  注册组件。实现比较简单，要求用户输入手机号，并获取验证码，验证码的倒计时效果已经实现，但未与后台交互，所以获取不到真正的验证码，对于手机号的验证与登录组件类似。用户的注册信息会使用localStorage进行本地存储。

5. headerComponents/AboutInfo.vue:  关于我们组件。直接调用了dialog弹出框组件，还未添加任何实际的功能。(后续更新中.....)

6. pages/Index.vue: App.vue中的content内容，左侧的产品内容及最新消息内容都是以数据的形式渲染出来；右侧中的轮播调用slideShow轮播组件，四个产品以数据的形式进行渲染。每个产品中，点击立即购买按钮会跳转到相应的路由。

7. pages/slideShow.vue:  可复用的轮播幻灯片组件。由图片和图片说明信息两部分组成。轮播图片数据通过props从父组件中获取，获取到的是一个存放图片信息的数组，为标签绑定图片信息，将所有图片渲染出来。

8. pages/detail.vue:  算是四个产品详情页信息的控制者吧。采用vue-router路由切换方式展示四个产品的详细信息。为左侧的图片绑定路由映射(这一部分稍微有点难度)，根据不同的的路由显示所对应的不同图片。

9. pages/orderList.vue:  显示用户的订单信息。

10. detailComponents/product1.vue:  第一个产品详情页。 产品选择调用了radioChoose.vue单选框组件，Selection.vue下拉框组件，Count.vue数量组件，立即购买时，调用了bankChoose。vue银行选择组件，checkDialog.vue支付状态选择框组件。

11. detailComponents/product2.vue: 第二个产品详情页。 产品选择调用了radioChoose.vue单选框组件，Selection.vue下拉框组件，Count.vue数量组件。立即购买时，调用了bankChoose。vue银行选择组件，checkDialog.vue支付状态选择框组件。

12. detailComponents/product3.vue: 第三个产品详情页。 产品选择调用了checkboxChoose.vue多选框组件，Count.vue数量组件。立即购买时，调用了bankChoose。vue银行选择组件，checkDialog.vue支付状态选择框组件。

13. detailComponents/product4.vue: 第四个产品详情页。 产品选择调用了radioChoose.vue单选框组件，Count.vue数量组件。立即购买时，调用了bankChoose。vue银行选择组件，checkDialog.vue支付状态选择框组件。

14. detailSelectionComponents/radioChoose.vue:  可复用的单选框组件，通过props从父组件中的获取选择内容。每点击时，通过this.$emit()向父组件触发事件，获得当前的点击内容。

15. detailSelectionComponents/Selectione.vue:  可复用的下拉框框组件，通过props从父组件中的获取选择内容。每点击时，通过this.$emit()向父组件触发事件，获得当前的点击内容。

16. detailSelectionComponents/checkboxChoose.vue:  可复用的多选框组件，通过props从父组件中的获取选择内容。每点击时，通过this.$emit()向父组件触发事件，获得当前的点击内容。

17. detailSelectionComponents/bankChooseChoose.vue:  银行选择组件。

18. detailSelectionComponents/chcekDialog.vue:  支付状态选择框组件。