# vue01

**Repository Path**: openfs/vue01

## Basic Information

- **Project Name**: vue01
- **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-11
- **Last Updated**: 2021-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个 NB 的项目

## 牛不牛逼，个人去感受

### 我们是有灵魂的程序员，我们的代码富有诗意

#### 编不下去了，哈哈哈

## 用(传统方式)把修改过后的代码上传到码云？？？
1. git add .
2. git commit -m "提交信息"
3. git push

## 制作首页APP组件
1. 完成 Header 区域，使用的是 Mint-UI 中的Header组件
2. 制作底部的 Tabbar 区域，使用的是 MUi 的 Tabbar.html
    + 在制作 购物车 小图标的时候，操作会相对多一些：
    + 先把 扩展图标的 css 样式，拷贝到 项目中
    + 拷贝 扩展字体库 ttf 文件，到项目中
    + 为 购物车小图标，添加 如下样式 'mui-icon-extra mui-icon-extra-cart'
3. 要在中间区域放置一个 router-view 来展示路由匹配到的组件

## 改造 tabber 为 router-link

## 设置路由高亮

## 点击 tabber 中的路由链接，显示对应的路由组件

## 制作首页轮播图布局

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


## 改造九宫格区域的样式


## 改造 新闻资讯 路由连接

## 写新闻资讯 页面 制作
1. 绘制界面，使用 MUI 中的 media-lidt.html
2. 使用 vue-resource 获取数据
3. 渲染真实数据

## 实现 新闻资讯列表 点击跳转到新闻详情

1. 把列表中的每一项改造为 router-link 同时 在跳转的时候应该提供唯一的 id 标识符
2. 创建新闻资讯详情的组件页面 NewInfo.vue
3. 在 路由模块中 将 新闻详情的 路由地址 和 组件页面对应起来

## 实现 新闻详情 的 页面布局 和 数据渲染

## 单独封装一个 comment.vue 评论子组件
1. 先创建一个单独的 comment.vue 组件模板
2. 在 需要使用 comment 组件的页面中 先手动导入 comment 组件
    + `import comment from './comment.vue'`
3. 在父组件中，使用 `componets` 属性，将刚才导入 comment 组件，注册为自己的 子组件
4. 将注册子组件的时候，注册名称，以 标签形式 ，在页面中引用即可


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

## 实现点击加载更多评论的功能
1. 为加载更多按钮 绑定点击事件 在事件中 请求 下一页数据
2. 点击加载更多 让 pageIndex++ 然后重新调用 this.getComments() 方法重新获取最新一页的数据
3. 为了放置 新数据覆盖老数据的情况 我们在 点击加载更多的时候 每当 获取到新数据 应该让 老数据 调用 数组的 concat() 方法 拼接上新数组


## 发表评论
1. 把文本框做数据双向绑定
2. 为发表按钮绑定一个事件
3. 校验评论内容是否为空，如果为空，则Toast提示用户 评论不能为空
4. 通过 vue-resource 发送一个请求，把评论内容提交给 服务器
5. 当发表评论Ok后，重新刷新列表，以查看最新的评论
    + 如果调用 getComments 方法重新刷新评论列表的话，可能只能得到最后一页的评论，前几页的评论获取不到
    + 换一种思路：当评论成功后，在客户端，手动拼接出一个 最新的评论对象，然后 调用 数组的 unshift 方法，把最新的评论，追加到 data 中 comments 的开头；这样，就能完美实现刷新评论列表的需求；

## 改造图片分享 按钮为 路由的链接并显示对应的组件页面

## 绘制图片列表组件 页面结构并美化样式
1. 制作 顶部的滑动条
2. 制作 底部的图片列表
### 制作顶部滑动条的坑：
1. 需要借助于 MUI 的 tab-top-webview-main.html
2. 需要把 slider 区域的 mui-fullscreen 类去掉
3. 滑动条无法正常滑动， 通过检查官方文档，发现是js组件，需要初始化一下：
    + 导入 mui.js
    + 调用官方提供的 方式 去初始化：
    ```
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    });
    ```
4. 我们在初始化 滑动条 的时候，导入的 mui.js ,但是 ，控制台报错：mui.min.js:1696 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    + 经过我们合理的推测，觉得，可能是 mui,js 中用到了 'caller', 'callee' , and 'arguments' 东西，但是 webpack 打包好的 bundle.js 中是启用严格模式的，所以，这两者冲突了；
    + 解决方案：
        1. 把 mui.js 中的 非严格 模式的代码改掉，但是不现实；
        2. 把 webpack 打包时候的严格模式禁用掉
            + 取消严格模式：
                $ npm install babel-plugin-transform-remove-strict-mode
    + 最终，我们选择了 plan b 移出严格模式：使用这个插件
    babel-plugin-transform-remove-strict-mode
5. 刚进入图片分享页面的时候，滑动条无法工作，分析之后，发现，如果要初始化 滑动条，必须要等 DOM 元素加载完毕，所以，我们把初始化 滑动条 的代码，搬到了 mounted 生命周期函数中；
6. 当 滑动条 调试成功之后，发现，tabbar 无法正常工作了，这时候，我们需要把每个 tabnbar 按钮的样式中 `mui-tab-item` 重新改一下名字；
7. 获取所有分类，并渲染分类列表；

### 制作图拍你列表区域
1. 图片列表需要使用懒加载技术，我们可以使用 Mint-ui 提供的现成的 组件 `lazy-load`
2. 根据 `lazy-load` 的使用文档，尝试使用
3. 渲染图片列表数据

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

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

## 实现 详情页面的布局和美化，同事获取数据渲染页面

## 实现图片详情中 缩略图的功能
1. 使用插件 vue-preview 这个缩略图插件
2. 获取所有的图片列表，然后使用 v-for 指令渲染数据
3. 注意：img标签的class不能去掉
4. 注意：每个 图片数据对象中必须有 w 和 h 属性；

## 绘制 商品列表 页面基本结构并美化

## 尝试在手机上 去进行项目的预览和测试
1. 要保证自己的手机可以正常运行；
2. 要保证 手机 和 开发项目的电脑 处于同一个 wifi 环境中，手机可以访问电脑的ip
3. 打开自己的项目中 packge.json 文件，在 dev 脚本中，添加一个 --host 指令 把当前的 wifi ip 地址，设置为 --host 的指令
    + 如何查看自己电脑所处的IP呢，在 cmd 终端这两个运行 `ipconfig` ,查看无线网的ip地址
4. 把复制的ip地址，粘贴到`package.json`中：`"dev:"webpack-dev-server --open --port 3000 --host 127.0.0.1 --hot"`,将`--host`指令设置为wifi地址；或者在`webpack.config`中的`devServer`新增`host: '10.1.1.85'` 为自己的ip地址
5. 手机输入ip地址加端口号就可以访问了，`http:// + IP地址 + 端口号`

## 改造进入商品详情页面上的路由连接
1. 将每个商品 item 项，改造成`router-link`,同时，提供 `tag="div"` 属性把路由渲染成 `div` ，在指定一个 `:to` 属性，拼接上商品的 id 值；
2. 添加新的组件页面
3. 添加路由和组件的对应规则；


## 实现商品详情页面的卡片视图布局
1. 使用 MUI 提供的 card.html 来实现即可

## 实现商品页面的轮播图

## 实现首页和商品轮播图的宽高的问题
1. 经过分析：首页和商品页面的轮播图，对于图片的宽有分歧
    + 首页宽：100%
    + 商品详情页期望：宽自适应，图片居中
2. 让轮播图组件，提供一个 `isfull` 属性，表示时候撑满父元素
    + 如果为true，表示，宽高都要湿100%
    + 如果为false，表示，宽是自适应，高度是100%，同时图片居中显示

<!-- p217 09.vuex的介绍 00:00 -->
<!-- p238 30.  04:22 -->