【Vue】使用插件，axios以及element-ui

1、element-ui工具的使用

• npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

• 引入 Element
  你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

• 完整引入
  在 main.js 中写入以下内容：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

关于render函数请参考：

• https://www.w3cschool.cn/vuejs2/render-function.html
• https://juejin.im/post/6844903919764635655
• https://segmentfault.com/a/1190000020013226

之后在.vue的template中直接使用对应组件即可。

<template>
    
    <div>
        <i class="el-icon-edit">图标</i> 
    </div>
    
</template>

2、 使用axios

安装axios

npm i axios -S

axios 是一个基于 promise 的 HTTP 库，axios并没有install 方法，所以是不能直接使用Vue.use()方法的。

解决方案：

• 结合 vue-axios使用

安装

npm i vue-axios -S

在主入口文件main.js中引用：

import VueAxios from 'vue-axios'
import axios from 'axios'
Vue.use(VueAxios, axios)

之后就可以全局使用了，例如：

<script>
export default {
    data(){
        return{
            message: ""
        }
    },
    mounted(){
        this.axios.get("https://......../")
        .then(response => this.message = response)
        .catch( error => console.log(error))
    }
}
</script>