常用到的组件库:下面的网站在自己空闲时间去看看 下面的资源只需要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)
Button 按钮 | UI组件库 (qq.com)
Button 按钮 - Vant Weapp (youzan.github.io)
Icon 图标 | Element Plus (element-plus.org)
设计 | Element Plus (element-plus.org)
上面是官方的指南
使用包管理器
我们建议您使用包管理器（如 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
<head> <!-- Import style --> <link rel="stylesheet" href="//unpkg.com/element-plus/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>
以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
这组件的效果好看吧
将文本内容改变
代码:
<template> <div> <h1>使用组件第一个常用的组件为按钮</h1> <el-row class="mb-4"> <el-button>我是组件</el-button> <el-button type="primary" style="background: red">我是组件</el-button> <el-button type="success">Success我是组件10023</el-button> <el-button type="info">Info我是组件10023</el-button> <el-button type="warning">Warning我是组件10023</el-button> <el-button type="danger">Danger我是组件10023</el-button> </el-row> <br /> <br /> <el-row class="mb-4"> <el-button plain>Plain我是组件10023</el-button> <el-button type="primary" plain>Primary我是组件10023</el-button> <el-button type="success" plain>Success我是组件10023</el-button> <el-button type="info" plain>Info我是组件10023</el-button> <el-button type="warning" plain>Warning我是组件10023</el-button> <el-button type="danger" plain>Danger我是组件10023</el-button> </el-row> <br /> <br /> <el-row class="mb-4"> <el-button round>Round我是组件10023</el-button> <el-button type="primary" round>Primary我是组件10023</el-button> <el-button type="success" round>Success我是组件10023</el-button> <el-button type="info" round>Info我是组件10023</el-button> <el-button type="warning" round>Warning我是组件10023</el-button> <el-button type="danger" round>Danger我是组件10023</el-button> </el-row> <br /> <br /> <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> <br /> <br /> <div class="flex"> <el-button type="primary" :icon="Edit" /> <el-button type="primary" :icon="Share" /> <el-button type="primary" :icon="Delete" /> <el-button type="primary" :icon="Search">Search</el-button> <el-button type="primary"> Upload<el-icon class="el-icon--right"><Upload /></el-icon> </el-button> </div> </div> </template> <style scoped> el-button{ width: 200px; background-color: black; } </style> <script setup> import { Check, Delete, Edit, Message, Search, Star, } from "@element-plus/icons-vue"; </script>
文档对组件的解释:
Button API#
Button 属性#
Button 插槽#
| 插槽名 | 说明 |
| default | 自定义默认内容 |
| loading | 自定义加载中组件 |
| icon | 自定义图标组件 |
Button 对外暴露的方法#
ButtonGroup API#
Button Group 属性#
| 插槽名 | 说明 | 类型 | 默认值 |
| size | 用于控制该按钮组内按钮的大小 | string |
— |
| type | 用于控制该按钮组内按钮的类型 | string |
— |
ButtonGroup 插槽#
| 插槽名 | 说明 | 子标签 |
| default | 自定义按钮组内容 | Bu |
其他的组件也是一样操作的关键在自己多去学习
