Vue进阶——Element Ui

秋书一叶

55人浏览 · 2023-04-27 16:49:35

秋书一叶 · 2023-04-27 16:49:35 发布

前言

个人学习笔记，本篇主要讲解如何安装并使用ElementUi

一、定义

Element UI是一套基于Vue.js 2.0的UI组件库，主要用于快速构建Web页面。它提供了许多常见的UI组件，例如按钮、表单、表格、弹出框等，并且支持自定义主题。Element UI还提供了一些辅助功能，例如表单验证、国际化、响应式布局等。
而对于Vue 3，则有另一套面向设计师和开发者的组件库，称为Element Plus

二、安装

1.vue2

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

浏览器直接引入

目前可以通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。

<!-- 引入样式 -->
<link rel="stylesheet"
href="https://unpkg.com/elementui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js">
</script>

Vue Ui 安装插件

通过vue的可视化界面在创建项目的阶段直接添加element ui插件

详细可见Vue进阶——Vue Cli

vue3

建议使用包管理器（如 NPM、Yarn 或 pnpm）安装 Element Plus，然后您就可以使用打包工具，例如 Vite 或 webpack。

npm安装

$ npm install element-plus --save

如果您的网络环境不好，建议使用相关镜像服务 cnpm 或中国 NPM 镜像。

浏览器直接引入

直接通过浏览器的 HTML 标签导入 Element Plus，然后就可以使用全局变量 ElementPlus 了。

根据不同的 CDN 提供商有不同的引入方式，在这里以 unpkg 和 jsDelivr 举例。你也可以使用其它的 CDN 供应商。

unpkg

<head>
  <!-- Import style -->
  <link rel="stylesheet"
  href="//unpkg.com/elementplus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3">
  </script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus">
  </script>
</head>

jsDelivr

<head>
  <!-- Import style -->
  <link rel="stylesheet"
    href="//cdn.jsdelivr.net/npm/element-plus/dist/index.css"/>
  <!-- Import Vue 3 -->
  <script src="//cdn.jsdelivr.net/npm/vue@3">
  </script>
  <!-- Import component library -->
  <script src="//cdn.jsdelivr.net/npm/element-plus">
  </script>
</head>

Vue Ui 安装插件

通过vue的可视化界面在创建项目的阶段直接添加element plus插件

详细可见Vue进阶——Vue Cli

快速上手

element-ui

于main.js中添加

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

详细组件及使用方法：element ui

element-plus

于main.js中添加

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')