# vue-project

**Repository Path**: phubing/vue-project

## Basic Information

- **Project Name**: vue-project
- **Description**: 这是一个初学Vue的练习小项目  power by phubing  2018-12-01
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-12-01
- **Last Updated**: 2022-07-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是Vue的练习小项目

## 这是二级标题

### 这是三级标题

#### Power by phubing

## [ 开源协议之间的异同？ ](https://www.zhihu.com/question/19568896/answer/20907890)

### 修改了项目
    1、git add .
    2、git commit -m "提交信息"
    3、git push

# 功能列表
### 制作首页App组件，
    + 1、完成Hear区域，使用的是mint-ui的Header组件
    + 2、制作底部的Tabbar组件，使用的是MUI的Tabbar组件
        2.1、在制作购物车小图标的时候，操作会相对多一些：
        2.2、先把扩展图标的css样式，拷贝到项目中
        2.3、拷贝扩展字体库ttf文件，到项目中
        2.4、为购物车小图标，添加如下样式mui-icon mui-icon-extra mui-icon-extra-cart
    + 3、中间区域设置router-view ,用于展示路由匹配模块
    
### 设置路由高亮

### 改造Tabbar为 router-link，点击路由连接，展示路由组件

### 加载首页轮播图数据
    1、获取数据，使用vue-resource
    2、v-for循环数据

### 改造首页 - 九宫格样式

### 改造新闻资讯路由链接
    1、展示列表
    2、使用vue-resource获取数据
    3、数据列表

### 实现新闻资讯列表点击跳转新闻详情
    1、把列表中的每一项改造为router-link，在跳转的同时应该提供唯一的标识符
    2、创建新闻详情组件
    3、在路由模块中，将新闻详情的路由与id对应

### 封装通用评论模块
    1、在需要使用评论模块组件的页面中，先手动导入comment组件
    2、`import comment from './src/components/subComponent/Comment.vue'`
    3、在父组件中使用：使用'components'属性，将导入 的comment组件 ，注册为自己的子组件
    4、将注册的子组件以标签形式使用即可

### 获取所有的评论数据

### 实现加载更多事件
    1、绑定点击事件，请求下一页数据
    2、点击加载更多，让pageIndex++，重新调用getComment方法

### 实现评论功能
    1、文本框进行双向数据绑定，为发表按钮绑定事件，校验内容是否为空
    2、通过vue-resource发送评论内容，成功后将评论对象组织成一个评论项，拼接在数组的第一个位置，这样就不用刷新获取列表了
    3、因为成功后刷新页面，就会得到刷新前的页码，前面的数据会丢失


### 增加图片分享按钮为路由链接并显示对应的组件页面(ps：今晚就先到这里吧，中午没睡觉，实在困得很，以后中午不看海贼王了。。。)
    1、绘制图片列表组件页面并美化结构
    2、顶部滑动条
    3、调用官方推荐初始化方式
    4、在初始化滑动组件，mui.js中可能用到'caller'、'callee'、'arguments'，webpack打包好的bundle.js默认启用了严格模式，所以会产生冲突
    5、解决方案：1、禁用webpack的严格模式；2、将mui.js的非严格模式代码取消（几乎不可能）
    6、在babelrc中设置："transform-remove-strict-mode"
    7、首次进入图片页面时，滑动条无法使用，如果要操作滑动条，必须等页面初始化完毕，所以将初始化滑动条的函数写在mounted函数中
    8、mui-tab-item与mui冲突，所以可以将mui-tab-item所有的样式赋予新的类，再将此类替换mui-tab-item即可
    9、滑动组件的高亮与路由的高亮不是一样的，滑动组件的是scroll内部封装的高亮方法，与路由无关

### 制作图片列表
    1、使用mint-ui的lazy-load
    2、渲染列表数据

### 实现图片详情页面
    1、改造图片列表li标签，并用tag指定渲染后的标签
    2、图片详情缩略图--  vue-preview
    3、每个图片对象中必须有高和宽

### 绘制商品列表页面的主题结构

### 尝试在真机中调试
    1、手机与电脑在同一wifi环境中
    2、打开项目中的package.json文件，在dev脚本中添加  --host  指令来把当前电脑的IP地址设置为 --host的值
    3、输入电脑IP地址加端口号即可在手机上进行调试
    4、@tap可以在mui的组件中使用，普通div不能使用，只能用@click

### 改造商品购买页面
    1、在网页中有两种跳转方式：
        + 使用编程式导航：window.location.href=""，在Vue中使用vue-router：例如router.push(location,onComlpete?, onAbort?)
            //字符串
            router.push（'home'）
            //对象
            router.push（{path:‘home'}）
            /∥命名的路由
            router.push（{name:'user'，params:{userId：123}}）
            //带查询参数，变成/register？plan=private router.push（{path:'register'，query:{plan:‘private'}}）
        + 使用 a 标签 （比如router-link）