# Vue移动端项目1

**Repository Path**: mrreeed/vue-mobile-terminal-project-1

## Basic Information

- **Project Name**: Vue移动端项目1
- **Description**: Vue移动端项目，使用Mint-UI、MUI等实现，B站视频名叫“学 Vue.js 看这个就够了”（https://www.bilibili.com/video/BV11s411A7h6?p=127&t=90）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-02-28
- **Last Updated**: 2022-05-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 📱这是一个Vue移动端项目
<br/>

### 本项目采用MIT开源协议，开源协议放置在LICENSE文件中
#### [主流开源协议之间有何异同？](https://www.zhihu.com/question/19568896)
<br/>

### Vue移动端项目，使用Mint-UI、MUI等实现
### 学习的B站视频名叫“学 Vue.js 看这个就够了”（ https://www.bilibili.com/video/BV11s411A7h6?p=127&t=90 ）
<br/></br>


### 整理整个代码目录的结构：
LICENSE文件存放项目开源项目

.gitignore文件存放不需要git托管的模块

## 💻用命令行把修改过后的代码上传到码云：
1. git add .  （把 本地文件 放到 暂存区）
2. git commit -m "输入提交信息"   （把 本地文件 放到 本地仓库 里面）
3. git push 或 git push -u origin master    （把 本地仓库 的文件推送到远程仓库 push）

<br/></br>

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

<br/></br>

## 注册使用VueRouter
```javascript
// 导入router的几个步骤step:
// step 1.导入路由的包
import VueRouter from 'vue-router'
// step 2.安装路由
Vue.use(VueRouter)  //这样项目才启动了路由
// step 3.导入自己的router.js路由模块
import router from './router.js'
// step 4.挂载路由对象到VM实例上，见下面VM部分：

var vm = new Vue({
  el:'#app',
  render:c=>c(app),
  router
})
```
<br/>

## 改造 Tabbar 为 router-link 
将原本的`a`标签改为`router-link`标签，并将本属于`a`标签的`href`属性改为`router-link`的`to`属性。
改完to后，也要将跳转路径作更改，此路径要和router.js中的path相对应。
```javascript
<router-link class="mui-tab-item" to="/home">  // to后的/home是跳转路径
```
此路径要和router.js中的path相对应：
```javascript
{ path:'/home',component:HomeContainer }
```

<br/>

## 设置路由高亮
默认情况下，Vue-router会自动给触发路由跳转的元素 添加类名router-link-active 以示跳转。但如果使用了UI组件，该组件一般封装了路由跳转时用于高亮的类名（这样也避免了手动书写高亮css），就要在router.js中设置组件的路由跳转类名。

以MUI为例，Tabbar 路由触发点击跳转时，会高亮 Tabbar 的图标，高亮的原理是添加了类名 mui-active ，实际上相当于覆盖了Vue-router原生的router-link-active 
```javascript
var router = new VueRouter({
  routes: [
  ],
  linkActiveClass:'mui-active'//覆盖默认的路由高亮的类，
                              //默认的类叫做router-link-active(通过检查元素可以看到)
})
```

<br/>

## 配置路由
```javascript
import VueRouter from 'vue-router'

// 导入对应的路由组件
import HomeContainer from './components/HomeContainer.vue'
import MemberContainer from './components/MemberContainer.vue'
import ShopcarContainer from './components/ShopcarContainer.vue'
import SearchContainer from './components/SearchContainer.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    // 配置路由注册
    {  path:'/home',component:HomeContainer },
    {  path:'/member',component:MemberContainer },
    {  path:'/shopcar',component:ShopcarContainer },
    {  path:'/search',component:SearchContainer }
  ],
  linkActiveClass:'mui-active'//覆盖默认的路由高亮的类，默认的类叫做router-link-active(通过检查元素可以看到)
})

// 把路由对象暴露出去
export default router
```

在App.vue中展示路由匹配的页面组件
```html
<!-- 内容展示在这里 -->
<router-view></router-view>
```
### 点击 Tabbar 中的路由链接，实现展示对应的路由组件

<br/>

## 制作首页布局
## 加载首页轮播图数据
1. 获取数据，使用 vue-resource (类似于axios)获取
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. 在路由模块中，将新闻详情的路由地址和组件页面对应起来


## 实现 新闻详情的 页面布局(css) 和 数据渲染($http或ajax)
1. 封装一个getComments()方法


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


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


## 实现点击加载更多评论的功能
1. 为加载更多按钮，绑定点击事件，在事件中，请求下一页数据
2. 点击加载更多，让 pagerndex++，然后重新调用 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
+ 调用官方提供的方式初始化：
```javascript
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`
+ 经过我们合理的推测，可能是mui.js中用到了`'caller'，'callee'，'arguments'`这些东西，但是，webpack 打包好的 bundle.js 中，默认是启用严格模式的，所以，这两者冲突了；
+ 解决方案：
  1. 把mui.s中的非严格模式的代码改掉；但是不现实；
  2. 把 webpack打包时候的 严格模式 禁用掉；
5. 刚进入图片分享页面的时候，滑动条无法正常工作，后经发现，如果要初始化滑动条，必须要等DOM元素加载完毕，所以我们把初始化滑动条的代码，搬到了mounted生命周期函数中；
6. 当滑动条调试ok后，发现tabbar无法正常工作了，这时候，我们需要把每个tabbar按钮样式的 类名 mui-tab-item 重新改一下名字；
7. 获取所有分类，并渲染分类列表；


## 动态添加class类名：（注意这里类名是数组形式）
```html
  <a :class="['mui-control-iteml' , item.id==0 ? 'mui-active' : '' ]"
  v-for="item in cates" :key="item.id"> 
  {{item.title}}
  </a>
```

### 制作图片列表区域
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. 要保证 手机 和 开发项目的电脑 处于同一个WIF工环境中，也就是说 手机 可以访问到电脑的IP
 3. 打开自己的项目中package.json文件，在 dev 脚本中，添加一个 --host 指令，把当前电脑的 WIFI IP地址，设置为 --host 的指令值；
 + 如何查看自己电脑所处 WIFI 的 IP 呢，在 cmd 终端中运行`ipconfig`，查看无线网的ip地址