# vue-store

**Repository Path**: szwtop/vue-store

## Basic Information

- **Project Name**: vue-store
- **Description**: vue移动端B2C商城
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 7
- **Forks**: 4
- **Created**: 2019-05-10
- **Last Updated**: 2025-05-16

## Categories & Tags

**Categories**: ecommerce

**Tags**: None

## README

### 图片展示
### 这是一个牛逼的项目

### 牛不牛逼，用心去感受，每一行代码中的诗情雅意

### 我们是有灵魂的程序员，所以，我们的代码富有诗意

### 丫的，实在编不下去了

【主流开源协议之间有何异同？（https://www.zhihu.com/question/19568896?sort=created）】

## 用(传统方式)命令行把修改过后的代码上传到码云？？？

1. git add .
2. git commit -m "提交信息"
3. git push

## 制作首页App组件

1. 完成 Header 区域，使用的是 Mint-UI 中的Header组件
2. 制作底部的 Tabbar 区域，使用的是 MUI 的 Tabbar.html

- 在制作 购物车 小图标的时候，操作会相对多一些：
- 先把 扩展图标的 css 样式，拷贝到 项目中
- 拷贝 扩展字体库 ttf 文件，到项目中
- 为 购物车 小图标 ，添加 如下样式 `mui-icon mui-icon-extra mui-icon-extra-cart`

3. 要在 中间区域放置一个 router-view 来展示路由匹配到的组件

## 改造 tabbar 为 router-link

## 设置路由高亮

## 点击 tabbar 中的路由链接，展示对应的路由组件

## 制作首页轮播图布局

## 加载首页轮播图数据

1. 获取数据， 如何获取呢， 使用 vue-resource
2. 使用 vue-resource 的 this.$http.get 获取数据
3. 获取到的数据，要保存到 data 身上
4. 使用 v-for 循环渲染 每个 item 项

## 制作首页九宫格样式更改为六宫格 （使用的是 mui框架 中的九宫格）

1. 设置六宫格样式
2. 使用自定义的图片替换掉默认九宫格的字体图标
3. ----

## 实现 content 部分以动画效果进行切换

## 改造 新闻资讯 路由链接（九宫格新闻资讯板块整个完成）
1. 新闻资讯List 页面制作 (使用 MUI 实现整个NewList的页面制作)，从后台获取数据渲染给NewList页面
2. 新闻资讯List的 NewInfo（新闻详情页面） 页面包括整个功能实现完成，包括页面制作，后台数据渲染页面，用户评论功能

## 改造 图片分享 路由链接（图片分享板块整个完成）
1. PhotoList（图片列表页） 页面采用的是 MUI框架的构建整个页面,选项卡是从后台获取的数据（坑，警报注意：前方有坑，有大坑（看来框架也不是这么友好，各种坑。。能力好的同学，若是不嫌麻烦，可以试试自己手写，毕竟也是对能力的一大提升，言归正传））
   - 头部采用选项卡切换（tab-top-webview-main.html），好吧。第一坑还是
     终将来临。。 坑1：使用选项卡切换的时候我们需要导入 mui 的js库（这里导入js库之后还需给要使用的相应组件配置，具体参考官网），额。。。某些同学可能抓头了是吧，心里忍不住念叨，玛得XX，这什么 LZ（实在没想出更新鲜的词。。） 
     真想TM给他两XX，要使用 mui 的动态效果使用 mui 的js不是很正常麽？ 哈哈，算你们懵对了，不过既然说是大坑我这么聪明怎么会让你们这么容易就给猜透？ 好吧，我们继续往下看
   - 坑1（正式版）： 在使用选项卡切换的时候在 HTML标签中 会出现一个类 mui-fullscreen，这个类表示占用全屏（本质上其实就是定位），根据情况而定是否取消这个类，一般情况下
     都是不占用全屏的（特定情况除外）
   - 坑2：某些同学可能已经发现了，当我们已经使用了 mui 官方提供的选项卡切换的标签语句，也是用了 mui.js库可是为什么还是不能进行选项卡切换（只有重新刷新页面时才能滑动）？这里面其实存在一个问题，
     其实稍微细心一点也能理解，当我们进行选项卡切换的时候进行的是 DOM 操作，所以我们配置的组件要在 mounted（）钩子函数中配置（即使在mounted（）中配置后，
     虽然实现了不用每次进入的时候都需要重新刷新页面，但也存在必需刷新一次的问题，这个问题LZ暂时还没得到解决，后续会继续更新），  
   - 坑3：当实现选项卡可以滑动的时候发现 Tabbar点击不起作用。 这个真挺难解决的，LZ当时真的都懵逼了，其实这个真不管我们的事，原因在于使用 mui 选项卡切换的时候，内部
     的标签和 Tabbar 冲突了，解决方案：把 Tabbar 的类重命名，再把 Tabbar 中原有的样式复制到我们的代码中，根据我们的命名重新设置样式
2. 从后台图片列表数据，并使用 mint-ui 中的延迟加载，在使用延迟加载时也有个坑就是不能显示延迟加载的图标。。。。LZ忍不住XX一句，额。。。还是算了吧！谁叫我们只是一个弱弱的码农呢？由于mint-ui内部
   原因我们不能使用按需导入组件方式，要使用全局导入，这样问题就解决了
2. PhototInfo（图片详情页），使用了vue-preview插件，进行缩略图展示，其余没啥可说，就从服务器获取数据渲染就行了，评论组件我们之前已经封装了，直接调用组件即可
## 打卡，商品购买模块功能大致完成(包括商品列表和商品的详细页面)
1. 添加商品到购物车，商品列表的页面绘制和商品详情的页面绘制
2. 通过localStorage将购物车保存到本地持久化
3. 购物车页面的绘制并展示购物车数据，购物车商品的更改和删除

## OK。项目大致功能完成（除某些小部件及会员和搜索板块），用时：45天