Element-ui

Ahau￥

已于 2022-05-06 18:07:59 修改

阅读量818

点赞数 3

文章标签： visual studio code vue

于 2022-04-24 19:53:56 首次发布

本文链接：https://blog.csdn.net/weixin_69282348/article/details/124390242

版权

Element-UI 是饿了么前端团队开发的基于 Vue2.0 的组件库，提供丰富的设计资源和易用的组件，如表格、分页、树形控件等。安装可通过 npm，配置于 main.js 文件中。使用时，直接复制组件代码并修改数据即可。此外，还介绍了非组件样式如图标、指令和事件的使用方法。Element-UI 文档详尽，为快速搭建网站提供便利。

摘要由CSDN通过智能技术生成

官方文档地址： Element - The world's most popular Vue UI framework

Element-ui概述

Element-ui，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

element-ui的上手使用还是挺容易的，在理想情况下，只需要以下步骤：

找想要的样式组件
复制代码到对应的.vue组件
修改对应的数据

Element-ui

Element-ui介绍及文档

非组件样式

官方提供的样式中有一部分并非是组件样式，比如：字体图标、全局指令、全局事件等，这里简单说明下这类样式的使用方法

图标样式

一般情况下，使用i标签，并将class属性设置成对应的图标名即可；而对于别的组件希望引入图标时（可使用icon属性，例如el-button），设置icon属性为对应的图标名。

<i class='el-icon-user-solid'></i>

指令样式

例如Loading加载，其提供的是一个指令v-loading，使用时直接调用就行。

<el-table v-loading='true' :data="tableData">
	<el-table-column prop="name" label="姓名">
</el-table>

事件样式

例如Message消息提示，结合事件使用。

<el-button :plain="true" @click="successMessage">成功</el-button>
<el-button :plain="true" @click="warnMessage">警告</el-button>
<el-button :plain="true" @click="infoMessage">普通消息</el-button>
<el-button :plain="true" @click="errorMessage">错误</el-button>

errorMessage(){
      this.$message({
        message: "错误消息",
        type: "error"
      })
    },
    infoMessage(){
      this.$message("普通消息")
    },
    successMessage(){
      this.$message({
        message: "成功信息",
        type: "success"
      })
    },
    warnMessage(){
      this.$message({
        message: "警告信息",
        type:"warning"
      })
    },

Element-UI安装及配置

安装

npm install --save element-ui

在main.js下配置element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在main.js配置axios

// 发送网络请求，配置axios
import axios from 'axios'
axios.defaults.baseURL = "http://127.0.0.1:8000"
// 允许发送cooike
axios.defaults.withCredentials = true
// 配置头部
axios.defaults.headers['X-Requested-with'] = 'XMLHttpRequest'
// 配置jwt token
axios.defaults.headers['token'] = localStorage.getItem("token")||""
// 配置请求方法类型
axios.defaults.headers.post['Content-Type'] = "application/json"
// axios放在Vue原型对象上
Vue.prototype.$axios = axios