1.下载axios

npm install axios --save

在线文档

https://github.com/pagekit/vue-resource/blob/develop/docs/http.md

1.1搜索框demo

图片.png

1.1.1index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <title>vue_demo</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

1.1.2main.js

import Vue from 'vue'
import App from './App'

let vm = new Vue({
  el: '#app',
  components: {
    App // 映射组件标签
  },
  template: '<app/>' // 指定需要渲染到页面的模板
})

Vue.use({
  vm
})

1.1.3App.vue组件

<template>
  <div class="container">
    <Search/>
    <UsersMain/>
  </div>
</template>

<script>
  import Main from './components/Main'
  import Search from './components/Search'
  export default {
    components: {
      Search,
      UsersMain: Main // 此处的Main会与html标签冲突,故而重命名了
    }
  }
</script>

<style scoped>

</style>

1.1.4Search.vue

<template>
  <section class="jumbotron">
    <h3 class="jumbotron-heading">Search Github Users</h3>
    <div>
      <input type="text" placeholder="enter the name you search" v-model="searchName"/>
      <button @click="search">Search</button>
    </div>
  </section>
</template>

<script>
  import PubSub from 'pubsub-js'
  export default {
    data () {
      return {
        searchName: ''
      }
    },
    methods: {
      search () {
        let searchName = this.searchName.trim()
        if (searchName) {
          // 分發一個search的消息
          PubSub.publish('search', searchName)
        }
      }
    }
  }
</script>

<style scoped>

</style>

1.1.5Main.vue

<template>
  <div>
    <h2 v-if="firstView">請輸入用戶名搜索</h2>
    <h2 v-if="loading">loading</h2>
    <h2 v-if="errorMsg">{{errorMsg}}</h2>
    <div class="row">
      <div class="card" v-for="(user, index) in users" :key="index" :index="index">
        <a :href="user.url" target="_blank">
          <img :src="user.img" style='width: 100px'/>
        </a>
        <p class="card-text">{{user.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import PubSub from 'pubsub-js'
  import axios from 'axios'
  export default {
    data () {
      return {
        firstView: true,
        loading: false,
        users: [], // 用戶數組
        errorMsg: ''
      }
    },
    mounted () {
      // 訂閱消息
      PubSub.subscribe('search', (msg, searchName) => {
        // 点击了搜索, 发ajax请求进行搜索

        // 更新數據:請求中狀態
        this.firstView = false
        this.loading = true
        this.users = []
        this.errorMsg = ''

        // 发ajax请求进行搜索
        const url = `https://api.github.com/search/users?q=${searchName}`
        axios.get(url)
          .then(response => {
            // 成功了, 更新数据(成功)
            this.loading = false
            this.users = response.data.items.map(item => ({
              url: item.html_url,
              img: item.avatar_url,
              name: item.login
            }))
          })
          .catch(error => {
            // 失敗了,更新數據(失敗)
            this.loading = false
            this.errorMsg = error
          })
      })
    }
  }
</script>

<style scoped>
  .card {
    float: left;
    width: 33.333%;
    padding: .75rem;
    margin-bottom: 2rem;
    border: 1px solid #efefef;
    text-align: center;
  }

  .card > img {
    margin-bottom: .75rem;
    border-radius: 100px;
  }

  .card-text {
    font-size: 85%;
  }
</style>

1.1.6本地启动即可

npm run dev

2.vue UI 组件库

1) Mint UI:(移动端)
a. 主页: http://mint-ui.github.io/#!/zh-cn
b. 说明: 饿了么开源的基于 vue 的移动端 UI 组件库
2) Elment:(PC端)
a. 主页: http://element-cn.eleme.io/#/zh-CN
b. 说明: 饿了么开源的基于 vue 的 PC 端 UI 组件库

2.1下载mint-ui