# vue项目（1）

**Repository Path**: cotty/vue_project_1

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-02-15
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# app

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

For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
## 制作首页APP组件
# 1.完成Header区域，使用的是Mint-UI中的header组件
# 2.制作底Tabbar使用的是 SUI的tabbar组件
# 3.要在中间区域防止一个router-view来展示匹配到的路由

## 改造tabbar为路由  router-link

## 设置路由高亮

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

## 加载首页轮播图数据
# 1.获取数，如何获取数据，使用vue-resource
# 2.使用vue-resource的this.$http.get获取数据
# 3.获取到的数据保存到data上
# 4.使用v-for循环渲染每个item项

## 注意：：：：

# 在添加字体图标的 时候一定要注意在webpack.config.js  配置该文件中没有的文件类型比如ttf等字体样式

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

## 新闻资讯页面制作
# 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组件
# 3.在父组件中使用components属性注册一下，使其成为自己的子组件


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

## 实现评论点击加载更多的功能

 # 1.为加载更多的按钮绑定点击事件，在点击事件中请求下一页数据
# 2.点击加载更多，pageindex++,然后重新调用 loadComments()


## 发表评论功能
    1.将文本框做双向数据绑定，
    2.为发表按钮添加一个事件
    3.内容为空提示通过mint-ui中的toast组件提示，内容不为空
    4.由于没有借口，只能通过localhost存储数据
    5.当发表评论后，重新刷新列表，查看最新评论


### 制作顶部滑条的坑
    1.需要借助MUI中的tab-top-webview-main.html
    2.需要把slider区域的 mui-fullscreen去掉
    初始化：
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
    初始化滚动条的时候出现控制台报错：
    ‘Uncaught TypeError:'caller','callee',and 'argument' properties may not be accessed on strict mode’
    +经过推测，可能是mui.js使用到了caller callee argument，但是weback打包好的bundle.js中，默认开启严格模式，所以两者冲突
    解决方案：1.修改mui.js中的非严格模式 ，不现实   2.在webpack打包的时候讲严格模式禁用掉
    选择2:
        $ npm install babel-plugin-transform-remove-strict-mode

        .babelrc 文件添加配置
        {
            "plugins": ["transform-remove-strict-mode"]
        }

        3.进入图片分享的时候，无法正常工作，经过分析，需要初始化滑动条，必须要等
        DOM元素加载完毕后，才能初始化，所以讲初始化代码搬到mouted钩子函数中。



    ### 制作图片的列表区域
    1.图片列表需要使用个懒加载效果，我们可以使用Mint-ui提供现成的'lazy-load'
    2.根据'lazy-load' 的使用文档尝试使用
    3.渲染推按列表数据。


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

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

    ## 实现 详情页面的布局和美化，同时相应的数据