Vue 3 + Element Plus 简单用法_vue3+elementplus

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 工程

1. npm init vue@latest 全部选 no， 创建工程 my-vue-el
2. cd my-vue-el 进入工程目录并运行 npm install
3. npm run dev 确认初始工程正常启动：
   
4. 安装 Element Plus: npm install element-plus
5. 修改 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");
1
2
3
4
5
6
7
8
9
10

6. 测试，在 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>
1
2
3
4
5
6
7
8
9
10
11

可以看到如下界面，没有 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");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

修改 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

可以看到 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"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19