[前端] VUE基础 (9) (element-ui、axios、vuex)

一、element-ui的使用

官方网页：https://element.eleme.cn/#/zh-CN

1.安装element-ui

(venv) D:\pycharm_workspace\vue_learn\leeoo>cnpm i element-ui -S
√ Installed 1 packages
√ Linked 8 latest versions
√ Run 0 scripts
√ All packages installed (6 packages installed from npm registry, used 3s(network 3s), speed 26.46kB/s, json 9(70.15kB), tarball 0B)

2.导入element-ui

在main.js中导入element-ui的js和css：

import Vue from 'vue'
import App from './App'
import router from './router'
// 引入element-ui的js
import ElementUI from 'element-ui'
// 引入element-ui的全局css
import 'element-ui/lib/theme-chalk/index.css'

// 使用ElementUI插件（很重要）
Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

3.调整全局样式（习惯）

习惯用法：这是一个习惯用法，去除body的8px的margin，修改a标签和ul的样式。

在static目录下创建global目录，然后在其中创建index.css作为全局样式：

/* /static/global/index.css */
* {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

然后在main.js全局导入：

import '../static/global/index.css'

4.使用element-ui的组件

element-ui的组件使用很简单，找到一个我们想要使用的组件，例如环形进度条：

 

 我们将代码直接拷贝到我们自己的组件中，例如Home组件：

页面效果：

其他组件的使用方法也是一样的。使用组件时一定要注意看组件的属性和方法，对数据的操作等。

二、axios

类似于jQuery的Ajax操作

axios官方：http://www.axios-js.com/

参考：https://www.kancloud.cn/yunye/axios/234845

1.安装axios

(venv) D:\pycharm_workspace\vue_learn\leeoo>cnpm i axios -S
√ Installed 1 packages
√ Linked 3 latest versions
√ Run 0 scripts
√ All packages installed (3 packages installed from npm registry, used 902ms(network 901ms), speed 137.68kB/s, json 4(14.62kB), tarball 109.44kB)

2.导入axios

import Axios from 'axios'
// 将其挂载到Vue的原型上，这样所有的组件都可以使用axios
// Vue.prototype.$axios = Axios
// 一般命名为$https
Vue.prototype.$https = Axios

将axios挂载到Vue原型的$https变量下（Vue.prototype.$https），方便所有组件使用。在组件中使用this.$http调用axios。

注意：axios不是使用Vue.use来使用的，因为axios不是基于Vue的http库，而是独立的基于ES6的http库。所以只需要import后就可以使用了。

3.在组件中使用axios（get请求数据）

methods: {
  getCategoryList() {
    this.$https.get('https://www.luffycity.com/api/v1/course_sub/category/list/?belong=1')
      .then((res) => {
        console.log(res);
        var data = res.data;
        if (data.error_no === 0) {
          this.categoryList = data.data;
        }
        // 将 "全部" 加入categoryList列表
        let obj = {
          id: 0,
          name: '全部',
          belong: 1,
          category: 0
        }
        this.categoryList.unshift(obj);
      }).catch((err) => {
      // 处理错误
      console.log('获取数据失败', err)
    })
  },
  getAllCourseList() {
    this.$https.get('https://www.luffycity.com/api/v1/free/category/')
      .then((res) => {
        console.log(res);
        var data = res.data;
        if (data.error_no === 0) {
          console.log(res);
          this.courseList = data.data;
          this.showCourseList = data.data;
        }
      }).catch((err) => {
      console.log('获取课程全部列表失败', err);
    })
  }
},
created() {
  this.getCategoryList();
  this.getAllCourseList();
}

我们在created函数中调用getCategoryList和getAllCourseList函数，这两个函数都是从后台API接口获取数据列表。而且都是使用的get请求。

4.设置全局axios baseurl

在3.中我们可以看到，两个函数请求API数据的url前面部分是一样的。我们可以通过设置axios的全局baseurl来设置这部分数据。

在main.js中设置全局属性：

// main.js

import Axios from 'axios'
Axios.defaults.baseURL = 'https://www.luffycity.com/api/v1/';
Vue.prototype.$https = Axios

设置以后，我们再在组件中使用url获取数据的时候：

this.$https.get('course_sub/category/list/?belong=1')

直接使用baseURL之后的部分即可。

三、vuex

 

 

 

≧◔◡◔≦