标签：use vue bus Element Vue UI data stateOfRequest

饮水思源：https://www.bilibili.com/video/BV1Zy4y1K7SH?p=134

一些组件库：

https://nutui.jd.com/#/

https://element.eleme.cn/#/zh-CN

https://www.antdv.com/docs/vue/introduce-cn/

完整引入会导致网络传输数据体积庞大（所有的、不管用不用得到都被注册成组件），可以在开发者工具中的Network中查看传输数据大小。

因此比较建议“按需引入”

①安装配置

npm i element-ui -S
npm install babel-plugin-component -D

按官方教程的写法会报Error: Cannot find module 'babel-preset-es2015'

略作修改babel.config.js：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }],
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ],  
}

②用Element改造Vue.js的github案例

main.js：

import Vue from 'vue'
import App from './App.vue'
import { 
  Container, 
  Header,
  Main,
  Button,
  Row,
  Col,
  Input,
  Avatar,
  Skeleton,
  Message,
  Empty,
} from 'element-ui';

// 写法一Vue.component(Button.name, Button);
// Vue.component('94玩', Button); 可以但不推荐
// 采用如下写法二from 'element-ui';
Vue.use(Container)
Vue.use(Header)
Vue.use(Main)
Vue.use(Button)
Vue.use(Row)
Vue.use(Col)
Vue.use(Input)
Vue.use(Avatar)
Vue.use(Skeleton)
Vue.use(Empty)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this; // 这个$bus可以换其它名字
    Vue.prototype.$message = Message; // 这个$bus可以换其它名字
  },
}).$mount('#app')

App.vue：

<template>
  <el-container>
    <el-header>
      <h1>Search Github Users</h1>  
    </el-header>
    <el-main>
      <Search />
      <MyList />
    </el-main>    
  </el-container>
</template>

<script>
import Search from './components/Search.vue'
import MyList from './components/MyList.vue'

export default {
  name: 'App',
  components: { 
    Search,  
    MyList, 
  }
}
</script>

MyList.vue：

<template> 
  <div>
    <!-- 展示欢迎界面 -->
    <h1 v-show="stateCode === 0">welcome!</h1>
    <!-- 展示加载信息 -->
    <h1 v-show="stateCode === 1">Loading</h1>
    <!-- 展示用户列表 -->
    <div id="my-list" v-show="users.length">
      <div class="card" v-for="user in users" :key="user.login">
        <a :href="user.html_url" target="_blank">     
          <el-avatar shape="circle" :size="100" :src="user.avatar_url"></el-avatar>   
        </a>
        <p>{{user.login}}</p>
      </div>
    </div>
    <!-- 展示错误信息 -->
    <h1 v-show="stateCode === 3">错误信息：{{errorMsg}}</h1>
    <!-- 展示无数据信息 -->
    <el-empty v-show="stateCode === 4" :image-size="200"></el-empty>
  </div>
</template>

<script>
export default {
  name: 'MyList',
  components: {    
  },
  data() {
    return {
      stateCode: 0,
      users: [],
      errorMsg: '',
    }
  },
  methods: {
    handleUpdateUsers(stateOfRequest) { 
      this.stateCode = stateOfRequest.code
      if (stateOfRequest.code === 3) {
        this.errorMsg = stateOfRequest.data
      } else {
        this.users = stateOfRequest.data
      }      
    },
  },
  mounted() {
    this.$bus.$on('updateUsers', this.handleUpdateUsers);    
  },
  beforeDestroy() {
    this.$bus.$off('updateUsers')
  },
}
</script>

<style>
  #my-list {
    display: flex;
    flex-wrap: wrap;
  }

  .card {
    margin: 10px;
  }
</style>

MyHeader.vue：

<template>
  <el-row type="flex" class="row-bg">
    <el-col :span="6"><el-input v-model="keyWord" placeholder="enter the name u search"></el-input></el-col>
    <el-button type="primary" icon="el-icon-search" @click="getUsers">search</el-button>
    <el-button @click="clear">clear</el-button>
  </el-row>
</template>

<script>
import axios from 'axios'

export default {
  name: 'Search',
  data() {
    return {
      keyWord: '',
    }
  },
  methods: {
    getUsers() {
      if (this.keyWord.trim() == '') {
        this.$message('输入不能为空');
        return
      }
      let stateOfRequest = {
        code: 1, // 0 从未更新的初态 1 加载中 2 请求成功 3 请求失败
        data: [],
      }
      this.$bus.$emit('updateUsers', stateOfRequest)
      axios.get(`https://api.github.com/search/users?q=${this.keyWord}`)
        .then(resp => {
          stateOfRequest.code = 2
          stateOfRequest.data = resp.data.items
          this.$bus.$emit('updateUsers', stateOfRequest)
        })
        .catch(error => {
          stateOfRequest.code = 3
          stateOfRequest.data = error.message
          this.$bus.$emit('updateUsers', stateOfRequest)
        })  
    },
    clear() {
      let stateOfRequest = {
        code: 4, // 0 从未更新的初态 1 加载中 2 请求成功 3 请求失败
        data: [],
      }
      this.$bus.$emit('updateUsers', stateOfRequest)
    }
  },
}
</script>

 

标签：use,vue,bus,Element,Vue,UI,data,stateOfRequest
来源： https://www.cnblogs.com/xkxf/p/15897000.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。