Vue3整合ElementPlus

介绍

前端开发框架ElementPlus在企业开发中十分常见，下面来看看Vue3如何整合ElementPlus的吧

创建Vue3项目

下面先来讲讲如何使用命令行创建一个Vue3项目

确保已经安装node和npm（一般来说：现在的Node都自带npm）

为了保证速度，可以配置npm镜像代理

参考：npm镜像代理

进入项目目录

输入CMD，打开控制台，输入

vue create projectName

下面在D:\Vue下创建一个test的Vue项目

选择Manually select features，回车

按空格键选中下面几个，回车

选中Vue3.x，回车

使用历史路由

使用Sass

使用第一项

使用Lint on save

使用第一项

不保存future projects，回车开始安装

注：也可以使用WebStrom等IDE创建

安装完成

用WebStrom打开前端项目

Vue3整合ElementPlus

安装ElementPlus

npm install element-plus --save

在main.js中引入， 然后npm install

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

使用ElementPlus组件

我们在AboutView里引入ElTable组件

具体使用步骤：

• 在父组件里引入ElementPlus的组件
• 模拟展示数据
• 通过标签引入DOM节点

<template>
  <div class="about">
    <h1>This is an about page</h1>

    # 通过ElTable的el-table标签使用
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  </div>
</template>

<script>
# 导入element-plus的ElTable组件
import {ElTable} from 'element-plus'
export default {
  name: "AboutView",
  # 使用ElTable组件
  components: {
    ElTable
  },
  setup() {
    #模拟数据
    const tableData = [
      {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
      {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
      },
    ]
    return {tableData}
  }
}
</script>

效果

运行项目

npm run serve

数据就展示出来了

至此