不管前方的路有多苦，只要走的方向正确，不管多么崎岖不平，都比站在原地更接近幸福。

在学习技术的道路上：落后又要被挨打。这是现实

常用到的组件库:下面的网站在自己空闲时间去看看 下面的资源只需要ctrl+c ctrl+a ctr+v

Border 边框 | Element Plus (element-plus.org)

Icon 图标 - Vant Weapp (youzan.github.io)

组件总览 - Ant Design

Layui 开发使用文档 - 入门指南

Icon 图标 - Semi Design

CSS Reset — Vuetify (vuetifyjs.com)

Icon 图标 | Element Plus (element-plus.org)  

以上面的组件为案例介绍:

设计 | Element Plus (element-plus.org)

上面是官方的指南

Element Plus 目前还处于快速开发迭代中。

使用包管理器

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

# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus

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

浏览器直接引入

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

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

unpkg

jsDelivr

以npm为例

注意在Vue3.0基础上使用elementul组件

第一步 ：导入文件的依赖  

$ npm install element-plus --save

第二步 :在main.js文件中导入依赖  如下图所示

// main.ts
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')

main,js文件截图

 第三步 Ctrl+c Ctrl+a Ctrl+v

 代码:

文档对组件的解释:

Button API#

Button 属性#

Button 插槽#

Button 对外暴露的方法#

ButtonGroup API#

Button Group 属性#

ButtonGroup 插槽#

其他的组件也是一样操作的关键在自己多去学习