vue移动端 demo

移动端项目介绍

初始化项目

1. vue init webpack vueShop
2. 进入项目根目录 cnpm i
3. npm run dev

Mint-Ui介绍

1. cnpm i mint-ui -S
2. 导入所有MintUI组件：

import MintUI from 'mint-ui'

3. 导入样式表：

import 'mint-ui/lib/style.css'

4. 挂载到Vue身上

Vue.use(MintUI)

5. 在 vue 中使用 MintUI中的Button按钮和Toast弹框提示：

<mt-button type="primary" size="large">primary</mt-button>
Toast({
  message: '提示',
  position: 'bottom',
  duration: 5000
})

注意：使用css component 不需要单独引入组件，但是如果使用js component 并且调用了某方法则需要引入该方法

使用 MUI 代码片段

注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；

注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；

官网首页

文档地址

1. 导入 MUI 的样式表：

import './lib/mui/css/mui.min.css'

2. 根据官方提供的文档和example，尝试使用相关的组件

App.vue 组件的基本设置

1. 头部的固定导航栏使用 Mint-UI 的 Header 组件；

2. 底部的页签使用 mui 的 tabbar;

3. 购物车的图标，使用 Font Awesome,首先下载包，然后在main.js引入font-awesome.min.css,最后通过类名使用即可

4. 将底部的页签，改造成 router-link 来实现单页面的切换；

5. 因缺少解析sass文件，需自己配置

   cnpm i sass-loader node-sass -S

6. Tab Bar 路由激活时候设置高亮的两种方式：

• 全局设置样式如下：

   .router-link-active{

       color:#007aff !important;

   }

• 或者在 new VueRouter 的时候，通过 linkActiveClass 来指定高亮的类：

   // 创建路由对象

   var router = new VueRouter({

     routes: [

       { path: '/', redirect: '/home' }

     ],

     linkActiveClass: 'mui-active'

   });

hoem组件

• 轮播图的实现
  1. 轮播图通过mint-UI的swiper实现
  2. 发现结构完成之后没有高度，所以自己设置高度
  3. 下载axios通过 cnpm i axios -S
  4. 引入axios 请求轮播图接口 拿到数据
  5. 将请求回来的数据赋值到data里面定义的swiperList，view循环swiperList并生成img
• 将axios设置公有方法
  1. 在main.js 导入axios import axios from 'axios'
  2. Vue.prototype 通过Vue的原型添加axios方法
  3. 组件内部调用则通过 this.axios 调用
  4. 配置 axios请求 域名 axios.defaults.baseURL
• 九宫格的实现
  1. 通过mui 九宫格实现基本布局
  2. 修改九宫格样式（搬砖操作）
  3. 设置九宫格图片路劲

组件切换动画

1. 给<router-view/>包裹transition标签
2. 通过样式添加动画效果

  .tabanim-enter{
    transform: translateX(100%);
  }

  .tabanim-leave-to{
    transform: translateX(-100%);
  }

  .tabanim-leave-active,.tabanim-enter-active{
    transition: all 0.3s ease-in-out;
  }

3. 去除滚动条
4. 设置动画模式

新闻列表

1. 配置路由  （ router-link跳转  router/index.js 配置路由规则  ）
2. 完成结构 （ 通过mui的图文列表 ），注意：结构拿过来图片地址不对，自己修改
3. 修改样式
4. 发送接口请求数据，将请求回来的数据渲染到页面上

过滤时间

1. Vue.filter()定义全局过滤器
2. 通过moment 实现过滤逻辑  

第一步下载
cnpm i moment -S
第二步导入
import moment from 'moment'
第三步使用方法
Vue.filter('fmtDate',function(inp,fmt){
  return moment(inp).format(fmt);   
})

3. 使用过滤器

新闻详情页

1. 配置路由规则进入新闻详情页
2. 通过路由参数 传参将新闻列表id  传进 新闻详情页
3. 通过  this.$route.params.参数名获取参数 
4. 发送请求  将请求回来的数据赋值到data里面
5. 页面渲染

评论区域

1. 首先完成评论区域结构

    <h4>发表并论</h4>
    <textarea placeholder="请输入评论内容">

    </textarea>
    <input type="submit" value="发表评论">

2. 点击发表评论按钮

• 首先给发表按钮注册点击事件
• 点击按钮拿到输入框的值，怎么拿到？（v-model双向数据绑定）
• 发送请求 将输入框的值交给后台
  3. 完成评论列表结构

<ul class="commentList">
  <li>
    <div>
      <span>第一楼</span>
      <span>用户：</span>
      <span>发表时间：</span>
    </div>
    <p>内容</p>
  </li>
</ul>

4. 获取评论列表数据

this.axios.get('/api/getcomments/'+this.id+'?pageindex='+this.pageindex).then(res=>{
  if(res.status == 200){
    this.commentList = res.data.message
  }
})

5. 渲染评论列表
6. 加载更多功能

• 复制mui button 按钮结构

<button style="width:100%;" type="button" class="mui-btn mui-btn-danger mui-btn-outlined">
  加载更多
</button>

• 给按钮注册点击事件，并让pageindex++后重新获取数据
• 重新获取数据后会发现，数据被覆盖，要想不覆盖需要将数据合并

this.commentList = this.commentList.concat(res.data.message)

• 完善点击发表评论将数据在页面上展示

this.commentList.unshift({
  add_time:new Date,
  content:this.commentVal,
  user_name:'匿名用户'
})

图片列表分类布局

1. 配置路由规则展示图片列表组件
2. 完成滑动导航结构布局

• 导航使用mint-UI的Navbar的头部组建

<mt-navbar v-model="selected">
  <mt-tab-item id="1">option A</mt-tab-item>
  <mt-tab-item id="2">option B</mt-tab-item>
  <mt-tab-item id="3">option C</mt-tab-item>
</mt-navbar>

• 修改选中时及默认的样式

a{
  color:#000;
}
.category{
  width:100%;
  overflow: scroll;
}
.mint-navbar{
  display: block;
  height:40px;
  width:480px;
  .mint-tab-item{
    float: left;
    width:80px;
  }
  .mint-tab-item.is-selected{
    border: 0;
    margin: 0;
  }
}

• 实现滑动，利用超出滚动头条，将滚动条样式设置透明

::-webkit-scrollbar {
  width: 1px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0);
}

3. 请求ajax数据，动态渲染导航条

图片列表图片布局

1. 完成图片列表基本结构
2. 动态获取数据并完成列表渲染
3. 实现图片懒加载效果 （利用mint-ui中的v-lazy）
4. 点击导航获取对应分类数据

• 因为导航列表为一个组件，所以点击时间注册失败，此时我们可以手动给导航内容包裹一个a标签，然后给a标签注册点击事件
• 当点击导航的时候应获取对应的图片列表，故将id传到事件函数内部，再赋值给与data里面的数据
• 调用获取图片列表方法重新渲染数据

vue-preview的基本使用

1. 下载包 cnpm i vue-preview -S
2. 在main.js导入并挂载

import VuePreview from 'vue-preview'

Vue.use(VuePreview)

3. 使用组件  和 挂载数据

<template>
<vue-preview :slides="slide1" @close="handleClose"></vue-preview>
</template>

<script>
export default {
  data () {
    return {
      slide1: [
        {
          src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
          msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
          alt: 'picture1',
          title: 'Image Caption 1',
          w: 600,
          h: 400
        },
        {
          src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
          msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
          alt: 'picture2',
          title: 'Image Caption 2',
          w: 1200,
          h: 900
        }
      ]
    }
  },
  methods: {
    handleClose () {
      console.log('close event')
    }
  }
}
</script>