README.md · wqr/vue商城-practice

# 学习项目，练手的

## [主流开源协议之间有何异同？] (https://www.zhihu.com/question/19568896)

## 用传统方式(命令行)把修改过后的代码上传到码云？？？
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 项

## 改造九宫格区域样式

## 改造 新闻资讯 路由链接

## 新闻资讯 页面 制作
1. 绘制界面，使用 MUI 中的media-list.html
2. 使用 vue-resource 获取数据
3. 渲染真实数据

## 实现新闻资讯列表 点击跳转到新闻详情
1. 把列表中的每一项改造为 router-link，同时， 在跳转的时候应该提供唯一的Id标识符
2. 创建新闻详情的组件页面，NewsInfo.vue
3. 在路由模块中，将新闻详情的路由地址和组件页面对应起来

## 实现新闻详情的页面布局和数据渲染

## 单独封装一个 comment.vue 评论子组件
1. 先创建一个 单独的 comment.vue 组件模板
2. 在需要使用 comment 组件的页面中，先手动导入 comment 组件
  + `import comment from './comment.vue'`
3. 在父组件中，使用`components` 属性，将刚才导入的comment组件，注册为自己的子组件
4. 将注册子组件时候的，注册名称，以标签形式，在页面中引用即可

## 获取所有的评论数据并显示到页面

## 实现点击加载更多评论的功能
1. 为加载按钮，绑定点击事件，在事件中，去请求下一页数据
2. 点击加载更多，让pageIndex++,然后再重新调用getComments()

## 完成发表评论的功能
1. 把文本框做双向数据绑定
2. 为发表按钮绑定一个事件
3. 校验评论内容是否为空，若为空，提示
4. 校验通过，发送请求，提交服务器
5. 当发表评论ok后，重新刷新列表，以查看最新的评论

## 改造图片分享 按钮为 路由的链接并显示对应的页面

## 绘制图片列表 组件页面结构并美化样式
1. 制作顶部的滑动条
2. 制作底部的图片列表
3. mui 的区域滚动组件
  ```
  mui('.mui-scroll-wrapper').scroll({
	  deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  });
  ```

## 绘制图片列表区域

## 实现了图片列表的懒加载改造和 样式美化

## 实现了点击图片跳转到图片详情页
1. 在改造li 为 router-link 的时候，需要使用 tag属性指定要渲染为 哪种元素

## 实现详情页面的布局和美化，同时获取数据渲染页面

## 实现图片详情中 缩略图的功能
1. 使用 vue-preview 这个缩略图插件

## 绘制 商品列表 页面基本结构并美化

wqr/vue商城-practice

About

Releases

Contributors

Activities