# vue-cms

**Repository Path**: grassdog/vue-cms

## Basic Information

- **Project Name**: vue-cms
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-12-23
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 基于Vue Mint-UI MUI的项目
# 项目进度持续更新
# 测试修改


## 制作首页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. 绘制界面
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++  然后重新调用 this.getComments() 方法重新获取最新一页的数据 
3. 为了防止 新数据 覆盖老数据的情况，我们在 点击 加载更多 的时候，每当获取到 新数据，应该让 老数据 调用数组的 concat() 方法拼接上新数组