# vue-first

**Repository Path**: mehouse/vue-first

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-19
- **Last Updated**: 2021-04-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 这是一个 NB 的项目

## 第一个VUE项目

## 开源协议之间的区别

## 用命令行方式 把修改后的 代码上传到码云
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 mui-icon-extra mui-icon-extra-cart'
3. 在中间区域 放置一个 router-view 来展示路由匹配到的组件

## 改造 tabbar 为 router-link

## 设置路由高亮

## 点击 tabbar 中的路由链接，展示对象的路由组件

## 制作首页轮播图布局

## 数据接口 http://www.liulongbin.top:3005/api/getlunbo
## 获取新闻列表数据 /api/getnewslist 
## 获取新闻详情页面 /api/getnew/:newid
## 获取评论信息 /api/getcomments/:artid?pageindex=1
## 提交评论内容 /api/postcomment/:artid
## 图片数据分类接口 /api/getimgcategory
## 图片列表数据 /api/getimages/:cateid
## 图片详情页面中的详细描述信息 /api/getimageInfo/:imgid
## 图片分享详情的缩略图 /api/getthumimages/:imhid
## 商品详情页面中的轮播图  /api/getthumimages/:imhid
## 获取商品列表数据 /api/getgoods?pageindex=number
## 获取商品参数区 价格 /api/goods/getinfo/:id
## 获取图文介绍数据 /api/goods/getdesc/:id

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

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

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

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

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

## 获取id的一种手段 {{ $route.params.id}}

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

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

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

## 实现点击加载更多平路的 功能
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,但是报错了
    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 打包时候的 严格模式禁用掉
                cnpm i babel-plugin-transform-remove-strict-mode -D
                在 .babelrc 文件中
                {
                    "plugins":{"transform-remove-strict-mode"}
                }
 5. 刚进入 图片分享页面的是偶，滑动条无法正常工作，经过我们认真的分析，发现，如果初始化滑动条，
    必须要等 DOM 元素加载完毕，所以 我们把初始化 滑动条的代码，放到了 mounted 生命周期函数中
 6. 当滑动条调式 OK 后，发现 tabbar 无法正常工作了，这时候，我们需要把每个 tabbar 按钮的 样式 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. 打开自己项目中 package.json 文件，在dev 脚本中 添加 --host 指令，把当前电脑
    的 WIFI IP 地址，设置为 --host 指令值
    + 如何查看自己电脑所处 WIFI 的IP 呢。在 cmd 终端中运行 ipconfig 查看无线网 ip 地址
    + --host ip 地址