Vue 3 + Element Plus 简单用法

小公鸡卡哇伊呀~

已于 2023-05-19 09:56:14 修改

阅读量2.9k

点赞数

文章标签： vue.js

于 2023-05-18 18:40:13 首次发布

本文链接：https://blog.csdn.net/ftell/article/details/130752173

版权

文章介绍了如何在Vue3项目中安装和使用ElementPlus，包括初始化Vue工程，引入ElementPlus库，以及添加按钮和图标组件的步骤。同时对比了ElementUI和MDBootstrap的区别，指出ElementUI在Vue社区中的流行度更高。

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

Element Plus： A Desktop UI toolkit for Vue.js 即 Vue 桌面 UI 工具包

基于 Vue 2 的组件库和基于 Vue 3 的组件库安装方法不同，基于 Vue 3 的组件库叫做 Element Plus。

MDBootstrap 与 Element UI 区别：

MD Bootstrap vs ElementUI: What are the differences?

What is MD Bootstrap? Free and Powerful UI Kit. It is a UI kit built with an aim to cut the time developers need to create their websites by taking all the best features from vanilla Bootstrap and enhancing them with a distinctive design from Google.

What is ElementUI? A Desktop UI toolkit for Vue.js. It is not focused on Mobile development, mainly because it lacks responsiveness on mobile WebViews.

MD Bootstrap and ElementUI can be primarily classified as “UI Components” tools.

MD Bootstrap and ElementUI are both open source tools. It seems that ElementUI with 41.5K GitHub stars and 9.01K forks on GitHub has more adoption than MD Bootstrap with 7.28K GitHub stars and 980 GitHub forks.

简而言之，Element UI 比 MDB 更受欢迎。

基于 Vue 2 的组件库和基于 Vue 3 的组件库安装方法不同

Vue 3 + Element plus

初始化 Vue 工程

npm init vue@latest 全部选 no，创建工程 my-vue-el
cd my-vue-el 进入工程目录并运行 npm install
npm run dev 确认初始工程正常启动：
安装 Element Plus: npm install element-plus
修改 main.js:

import "./assets/main.css";
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import App from "./App.vue";

const app = createApp(App);
app.use(ElementPlus);

app.mount("#app");

测试，在 App.js 里加一组 button，从官方主页组件库copy而来：

// App.js
<template>
   <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>
</template>

可以看到如下界面，没有 error 或 warning：

在这里插入图片描述
7. 测试 icon，首先安装：npm install @element-plus/icons-vue，然后修改 main.js，根据 element-plus 文档说明：

// main.js
import "./assets/main.css";
import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import App from "./App.vue";

const app = createApp(App);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
app.use(ElementPlus);

app.mount("#app");

修改 App.js，copy 关于 Button 的 Basic usage 全部代码：

// App.js
<template>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button plain>Plain</el-button>
    <el-button type="primary" plain>Primary</el-button>
    <el-button type="success" plain>Success</el-button>
    <el-button type="info" plain>Info</el-button>
    <el-button type="warning" plain>Warning</el-button>
    <el-button type="danger" plain>Danger</el-button>
  </el-row>

  <el-row class="mb-4">
    <el-button round>Round</el-button>
    <el-button type="primary" round>Primary</el-button>
    <el-button type="success" round>Success</el-button>
    <el-button type="info" round>Info</el-button>
    <el-button type="warning" round>Warning</el-button>
    <el-button type="danger" round>Danger</el-button>
  </el-row>

  <el-row>
    <el-button :icon="Search" circle />
    <el-button type="primary" :icon="Edit" circle />
    <el-button type="success" :icon="Check" circle />
    <el-button type="info" :icon="Message" circle />
    <el-button type="warning" :icon="Star" circle />
    <el-button type="danger" :icon="Delete" circle />
  </el-row>
</template>

<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
</script>

可以看到 icon 也能使用，页面上没有 error，查看官方网页时，url 里必须有 element-plus，否则看到的可能就是 for Vue-2 的…

在这里插入图片描述

测试工程对应的 package.json:

{
  "name": "vue-el-ui-10",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.1.0",
    "element-plus": "^2.3.4",
    "vue": "^3.3.2"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.3.5"
  }
}