# vue-cli项目

**Repository Path**: greenphp/vuecli_project

## Basic Information

- **Project Name**: vue-cli项目
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

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

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# myproject

> 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

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test
```

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. 把每一项的链接改造成router-link，应该提供唯一的id标识符
2. 创建新闻详情页面的组件 NewsInfo.vue
3. 在路由模块中，将新闻模块和详情对应起来

### router传参

this.$route.push({path:'/xxx',query:{id:1}});//类似get传参，通过URL传递参数
this.$route.push({path:'/xxx',params:{id:1}});//类似post传参
###接收参数

this.$route.query.id
this.$route.params.id


### newsinfo组件中，图片样式不起作用，去掉scoped



### 单独封装一个comment组件

1. 先创建commont.vue组件
2. 在需要的页面中，导入组件
3. 在父组件中使用.components注册为自己的子组件
4. 将注册的组件在页面中，以标签的形式引入

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


### 实现加载更多评论的功能
1. 点击加载更多，让页码+1，然后重新获取数据


### 发表评论
1. 把文本框做双向数据绑定，
2. 为发表按钮添加事件
3. 进行校验，如果为空，toast提示用户
4. 评论成功，通过vue-resource发送给服务器
5. 当发表成功，重新刷新列表，以查看最新的评论
    + 如果调用getComents方法，可能只能得到最后一页，所以换一种思路，当评论成功后，在客户端手动拼接出一个评论对象，然后调用数组的unshift方法，追加到data中commentlist的起始位置，这样就不需要重新刷新列表了。


## 改造图片分享

## 绘制图片列表样式结构
1. 顶部的滑动条制作
2. 制作底部的图片列表

## 制作顶部滑动条
1. 需要借助于 mui中的 tab-top-webview-main.html
2. 需要把slider区域的类mui-fullscreen去掉
3. 区域条无法滑动，原因是一个js的组件，需要被初始化
 + 导入js
 + 调用官方提供的初始化代码