# vue-project

**Repository Path**: wxy-571/vue-project

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-03-31
- **Last Updated**: 2021-04-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 出品必精品

# learn-cms

> A Vue.js project

## Build Setup

``` bash
# 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
```

For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

## 将代码上传到码云 
 1. git add.
 2. git commit -m '提交信息'
 3. git push
## 也可以用vscdode直接上传
## 制作首页app组件
  1. 完成header区域，使用mint-ui 中的header组件
  2. 制作底部的tabbar区域，使用的是mui的tabbar组件
   + 在制作购物车小图标的时候，操作会相对多一些
   + 先把扩展图标的css样式，ttf文件，拷贝到项目中，为购物车添加小图标 ‘mui-icon’
  3. 要在中间区域放置一个 router-view 来展示匹配到的组件
## 设置路由高亮
## 点击tabbar 中的路由链接 展示对应的路由组件
## 制作首页轮播图布局
## 加载首页轮播图数据
 1. 获取数据，如何获取，使用vue-resource
 2. 使用 vue-resource的this.$https.get获取数据
 3. 获取到的数据，要保存到data身上
 4. 使用v-for 循环渲染 每个item上
## 改造九宫格 区域的样式
## 改造 新闻 资讯 路由media-list
## 新闻资讯 页面 操作
 1. 绘制界面 使用mui中media-list
 2. 使用vue-resource 获取数据
 3. 渲染真实数据
 4. 
 5. npm i moment -S
## 实现新闻资讯列表跳转到新闻详情
 1. 把列表中的没一项改造为router-link，同时，在跳转的时候应该提供唯一id标识符
 2. 创建新闻详情的组件页面 newsInfo.vue
 3. 在路由模板中将新闻详情的地址和组件页面的地址对应起来
## 实现新闻详情布局和数据渲染
## 单独封装一个 comment.vue的组件
 1. 先创建comment.vue模板
 2. 在需要comment组件的页面中先手动导入comment组件 
    + import comment from './comment'
 3. 在父组件中，使用commponents 属性 ，将导入的组件注册
 4. 将注册子组件时候的组测名称，以标签形式，在页面中引用即可
## 获取所有的评论数据渲染到页面中
1. getComment()
## 实现点击加载更多评论的功能
 1. 为加载更多绑定点击事件，请求下一个数据
 2. 点击加载更多让pageindex++，然后更新调用this.getComment()方法
## 发表评论功能 
 1. 把文本框做双向数据绑定
 2. 为发表框按钮绑定事件
 3. 检验评论内容是否为空，如果为空，则提示用户输入内容不能为空
 4. 通过，vue-resource 发送一个请求，把评论内容提交给服务器，
 5. 当发表评论后，重新刷新列表，以查看最新评论
    + 如果调用getComment方法重新刷新列表的话，可能只能得到最后一页的评论，前几页的评
    + 伦获取不到
 6. 换一种思路，当评论成功后，在客户端，手动拼接出一个最新的评论对象，然后调用数组的
    + unshift 方法，把最新的评论追加到data中的 comments中，这样就能合理实现合理刷新评论
## 改造图片分享按钮为 路由链接并显示对应的组件页面 photolist.vue