Vue中的element-ui，axios在Vue-cli中的安装以及简单使用

前提：自备vue-cli，这里推荐一个Windows的安装方法：

windows进行vue安装以及环境搭建https://blog.csdn.net/liuzhenhe1988/article/details/109203873

一. element-ui的安装以及使用

1. 安装element

npm i element-ui -S --registry https://registry.npm.taobao.org

2. 在main.js中导入element-ui，并调用

// elementUI 导入
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';  // 需要import引入一下css文件，和我们的link标签引入是一个效果，而import .. from ..是配合export default来使用的
// 调用插件
Vue.use(ElementUI);

2.1 补充：这里说一下为什么要在导入以后，写一句，Vue.use(xxxx);

安装的ElementUI本质上只是一个文件夹，Vue-cli是一个拆分代码的框架，使用use相当于进行拼接了一下

3. element-ui的使用(这里我用走马灯示例)

3.1. 官网地址：

组件 | Elementhttps://element.eleme.cn/#/zh-CN/component/carousel

3.2. 使用之前的准备

a. 在components文件夹下创建一个Banner组件

b. 在src/router/index.js中添加路径

import Banner from "../components/Banner";

{
      path: '/banner',
      name: 'Banner',
      component: Banner
    },

e. 配置完之后的图片

3.3. 官网复制走马灯的代码到Banner组件里面去

a. 复制的代码(这个是我从官网cv过来的)

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>

 b . 效果图

c. 启动项目，输入路径查看效果

http://localhost:8080/#/banner

d .修改组件，添加数据属性，以及图片地址(// 通过require映射成static路径下的图片路径)

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="(value,index) in banner_list" :key="index">
      <a :href="value.link">
        <img :src="value.img_src" alt="">
      </a>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      banner_list: [
        // 方式一：通过require映射成static路径下的图片路径
        {img_src: require('@/assets/logo.png'), link: 'https://element.eleme.cn/'},
        {img_src: require('@/assets/logo.png'), link: 'https://element.eleme.cn/'},
        {img_src: require('@/assets/logo.png'), link: 'https://element.eleme.cn/'},
        // 方式二：直接使用static文件夹，也就是说，把图片放到static文件夹里面，找对路径即可

      ]
    }
  },

}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

e. 效果图

二：axios的安装以及使用

1.安装

npm install axios -i https://pypi.douban.com/simple/

2. 在src/main.js中封装

import axios from 'axios'; // 从node_modules目录中导入包
Vue.prototype.$axios = axios; // 把对象挂载vue中

3. 使用实例(get请求)

this.$axios.get('http://wthrcdn.etouch.cn/weather_mini?city=上海')
        .then((res) => { // 响应成功之后的数据
          console.log(res.data)
        })
        .catch((error) => { // 响应失败执行

        })

4. 其他使用

	// 发送get请求
    // 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
    // 参数2：可选，json对象，要提供给数据接口的参数
    // 参数3：可选，json对象，请求头信息
	axios.get('服务器的资源地址',{ // http://www.baidu.com
    	params:{
    		参数名:'参数值', // id: 200,
    	}
    
    }).then(function (response) { // 请求成功以后的回调函数
    		console.log("请求成功");
    		console.log(response);
    
    }).catch(function (error) {   // 请求失败以后的回调函数
    		console.log("请求失败");
    		console.log(error.response);
    });

	// 发送post请求，参数和使用和axios.get()一样。
    // 参数1: 必填，字符串，请求的数据接口的url地址
    // 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
    // 参数3：可选，json对象，请求头信息
    axios.post('服务器的资源地址',{
    	username: 'xiaoming',
    	password: '123456'
    },{
        responseData:"json",
    })
    .then(function (response) { // 请求成功以后的回调函数
      console.log(response);
    })
    .catch(function (error) {   // 请求失败以后的回调函数
      console.log(error);
    });

	
	// b'firstName=Fred&lastName=Flintstone'