element-plus快速入门

1）安装

        这里我们使用的包管理器是npm，在项目目录终端运行如下指令即可：

npm install element-plus --save

2）导入项目

        将 element-plus导入项目由两种方式：完整导入和按需导入

1）完整导入

        打开项目src下的main.js，使用如下语句将包导入到项目中

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

        别忘了挂载到#app元素上

        main.js完整代码：

import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).mount('#app')

const app = createApp(App)

app.use(ElementPlus)
app.mount("#app")

2）按需导入

        按需导入只要在响应模块中导入需要的属性即可 ，和从vue包里导入的流程一致。但是无论如何导入都要安装才能用。

import { defineComponent ,ref } from 'vue'
import { ElConfigProvider } from 'element-plus'

export default defineComponent({
  components: {
    ElConfigProvider,
  },
  setup() {
    return {
      zIndex: 3000,
      size: 'small',
    }
  },
})

3）使用

        element-plus为我们提供了一些新的标签，可以让我们更从容的布局和绘制页面。我们用table做一个演示： 

<script setup>
const data = [{
  id: 1,
  name: 'Tom',
  hobby: 'play Jerry',
  age: 8
},{
  id: 2,
  name: 'Jerry',
  hobby: 'play Spike',
  age: 7
},{
  id: 3,
  name: 'Spike',
  hobby: 'play Tom',
  age: 6
}]
</script>

<template>
  <div>
    <el-table :data="data" border stripe >
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="name" prop="name"></el-table-column>
      <el-table-column label="hobby" prop="hobby" show-overflow-tooltip></el-table-column>
      <el-table-column label="age" prop="age"></el-table-column>
      <el-table-column label="操作" width="300">
        <el-button type="primary">编辑</el-button>
        <el-button type="danger">删除</el-button>
        <el-button type="primary" :icon="Edit" circle />
        <el-button type="primary" size="small" :icon="Edit" circle />
        <el-button type="primary" plain :icon="Edit" />
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped></style>

         el-table标签是element提供给我们的表格，可以用对象列表作为数据源，表格里也是按照列排布，更方便部署数据了。table的列标签中label是表头的内容，prop是对象的属性名，表格的内容是prop对应的属性值。

        我们在最后多加了一列用来添加按钮，按钮也都是element提前为我们绘制好的。相比bootstarp可以添加各种属性，更方便的操作元素。比如plain为朴素按钮，直接加在属性上即可。更多用法点此进入官方文档。