移动端vue

vue对移动端用户支持不是很友好，于是第三方开发了针对移动用户的组件：
饿了么：MInt-UI，ElementUI(pc端)
开源团队：MUI

---

MintUI：

(1)toast:
methods:{
show(){
var mytoast = this.$toast({
message:“数据等待中…”,
position:“top”,
/duration:-1,/

            className:"mySty",//自定义样式
          })
          setTimeout(()=>{
            mytoast.close()
          },2000)
         }
      },
      created(){
        this.show()
      }

(2)图片懒加载：加载图片时转圈

var app = new Vue({
  el:"#app",
  data:function () {
    return {
      list:["img/t1.png","img/t2.png","img/t3.png","img/t4.png"]
    }
  }
})


<div id="app">
    <ul >
      <li v-for="item in list">
        ![在这里插入图片描述]()
      </li>
    </ul>
  </div>
<style>
    ul li img{
      width:100%;
    }
    ul li{
      list-style: none;
      background: #333;
    }
    ul li img[lazy=loading]{
      width:100%;
      height:100px;/*转圈的高度*/
      margin: auto;
    }
  </style>

脚手架：自动创建项目的目录结构，本地调试，热加载(代码修改后，浏览器自动更新)，代码部署。

---

引入mint-ui：
下载：npm i mint-ui
在main.js里：

//引入mintui的header组件
import { Header,Swipe,SwipeItem } from "mint-ui"
//注册。
Vue.component(Header.name,Header)
Vue.component(Swipe.name,Swipe)
Vue.component(SwipeItem.name,SwipeItem)

引入vue-resource:(和axios功能一样，发送ajax请求。)
下载：npm i vue-resource
引入：import vueResource from "vue-resource"
注册：Vue.use(vueResource)

引入cors模块（服务器端解觉跨域问题）
下载包：npm i cors
服务器端的app.js:

const cors = require "cors"
app.use(cors({
  origin:[
    "http://localhost:8082","http://127.0.0.1:8082"
  ],credentials:true
}))

npm i bao -g:会将包安装到默认目录：
C:\Users\gyj\AppData\Roaming\npm\node_modules
没加-g则会安装到当前目录。

---

//配置服务器根目录,写在main.js里,这是vue-resource提供的。

Vue.http.options.root = 'http://127.0.0.1:3000/'
//请求时：
 methods:{
  getImg(){
    this.$http.get("goodslist").then(result=>{//此处只需要简写即可。
      this.list = result.body
    })
  },

---

//时间过滤器

Vue.filter("dateFilter",function (val) {//val为数据库里查出来的时间数据。
  var date = new Date(val)
  var year = date.getFullYear()
  var month = date.getMonth()+1
  var d = date.getDate()
  var hour = date.getHours()
  var minute = date.getMinutes()
  month<10&&(month="0"+month)
  date<10&&(date="0"+date)
  hour<10&&(hour="0"+hour)
  minute<10&&(minute="0"+minute)
  return `${year}-${month}-${d} ${hour}:${minute}`
})