Vue框架常用组件的快速构建项目Ctrl+c Ctrl+a Ctrl+v第十四课)

news2024/12/25 12:34:27

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

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

常用到的组件库:下面的网站在自己空闲时间去看看 下面的资源只需要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

<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 属性#

属性名说明类型默认值
size尺寸string—
type类型string—
plain是否为朴素按钮booleanfalse
text2.2.0是否为文字按钮booleanfalse
bg2.2.0是否显示文字按钮背景颜色booleanfalse
link 2.2.1是否为链接按钮booleanfalse
round是否为圆角按钮booleanfalse
circle是否为圆形按钮booleanfalse
loading是否为加载中状态booleanfalse
loading-icon自定义加载中状态图标组件string / ComponentLoading
disabled按钮是否为禁用状态booleanfalse
icon图标组件string / Component—
autofocus原生 autofocus 属性booleanfalse
native-type原生 type 属性stringbutton
auto-insert-space自动在两个中文字符之间插入空格boolean—
color自定义按钮颜色, 并自动计算 hover 和 active 触发后的颜色string—
darkdark 模式, 意味着自动设置 color 为 dark 模式的颜色booleanfalse

Button 插槽#

插槽名说明
default自定义默认内容
loading自定义加载中组件
icon自定义图标组件

Button 对外暴露的方法#

属性名说明类型
ref按钮 html 元素Object
size按钮尺寸Object
type按钮类型Object
disabled按钮已禁用Object
shouldAddSpace是否在两个字符之间插入空格Object

ButtonGroup API#

Button Group 属性#

插槽名说明类型默认值
size用于控制该按钮组内按钮的大小string—
type用于控制该按钮组内按钮的类型string—

ButtonGroup 插槽#

插槽名说明子标签
default自定义按钮组内容Bu

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/59021.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

业务：财务软件之会计六要素

业务：财务软件之会计六要素

一、引言 会计六要素是资产、负债、所有者权益、收入、费用、利润。资产随处可见&#xff0c;比如房屋、机器设备、运输工具、仓库里的货物等。负债确认必须具备以下条件&#xff1a;负债是企业承担的现时义务&#xff1b;负债预期会导致经济利益流出企业&#xff1b;负债是由…
阅读更多...
[附源码]计算机毕业设计JAVA学生宿舍设备报修

[附源码]计算机毕业设计JAVA学生宿舍设备报修

[附源码]计算机毕业设计JAVA学生宿舍设备报修 项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybati…
阅读更多...
MobileOne实战：使用MobileOne实现图像分类任务(二）

MobileOne实战：使用MobileOne实现图像分类任务(二）

文章目录训练导入项目使用的库设置全局参数图像预处理与增强读取数据设置模型定义训练和验证函数训练函数验证函数调用训练和验证方法再次训练再次训练的模型为什么只保存model.state_dict()关于加入EMA后验证集不得分的问题测试总结在上一篇文章中完成了前期的准备工作&#x…
阅读更多...
C# 反射（一）基础概念

C# 反射（一）基础概念

一、C# 反射&#xff08;refection&#xff09;基础概念 反射指程序可以访问、检测和修改它本身状态或行为的一种能力。 程序集包含模块&#xff0c;而模块包含类型&#xff0c;类型又包含成员。 反射则提供了封装程序集、模块和类型的对象。 您可以使用反射动态地创建类型…
阅读更多...
Spring框架（七）：Spring的Web配置应用

Spring框架（七）：Spring的Web配置应用

Spring的Web配置应用引子JavaWeb的三大组件模拟Spring的web开发组件spring-webSpring的web开发组件spring-web引子 痛定思痛&#xff0c;主要问题出现在自己雀氏不熟悉框架底层、一些面试题&#xff0c;以及sql的一些情况淡忘了。 本章节的开始是对于过去的重新回顾&#xff0…
阅读更多...
MFC绘制二维图形【1】—— 使用映射模式函数自定义坐标系

MFC绘制二维图形【1】—— 使用映射模式函数自定义坐标系

目录 一、创建Test工程 二、自定义坐标系 三、映射模式&#xff08;MapMode&#xff09; 四、映射模式函数 1&#xff09;设置映射模式函数 2&#xff09;设置窗口范围函数 3)设置视区范围函数 4&#xff09;设置视区原点函数 5&#xff09;偏移矩形函数 五、 不改变…
阅读更多...
MyTinySTL学习笔记：迭代器iterator（一）

MyTinySTL学习笔记：迭代器iterator（一）

前言 本系列文章所学习的Github上基于C11的开源项目MyTinySTL&#xff0c;项目地址为:&#xff08;https://github.com/Alinshans/MyTinySTL&#xff09;&#xff0c;感谢Alinshans大佬开源这个优质的学习项目。 一、什么是迭代器 无论是序列容器还是关联容器&#xff0c;最…
阅读更多...
useWindowPrint 自定义的打印HOOK

useWindowPrint 自定义的打印HOOK

useWindowPrint 自定义的打印HOOK 1 介绍 useWindowPrint 用于实现页面的打印&#xff0c;打印的效果相对来说比较好。useWindowPrint 支持 onBeforePrint、onBeforePrintContent、onAfterPrint 等回调&#xff0c;可以很方便地在不同阶段进行操作&#xff0c;如果觉得使用回…
阅读更多...
基于PHP+MySQL蛋糕甜点销售网站的设计与开发

基于PHP+MySQL蛋糕甜点销售网站的设计与开发

现如今先进科学技术高速发展&#xff0c;计算机技术已经被社会的各个领域广泛应用。随着计算机技术和通信技术的迅猛发展&#xff0c;互联网的规模也逐步增大&#xff0c;互联网的元素也随之逐渐增加&#xff0c;可以利用其发展通信&#xff0c;也可以利用其进行商业用途&#…
阅读更多...
scratch小老鼠偷面包 电子学会图形化编程scratch等级考试二级真题和答案解析2022年9月

scratch小老鼠偷面包 电子学会图形化编程scratch等级考试二级真题和答案解析2022年9月

目录 scratch小老鼠偷面包 一、题目要求 1、准备工作 2、功能实现 二、案例分析 <
阅读更多...
Vue Class与Style绑定

Vue Class与Style绑定

Vue Class与Style绑定1 Class绑定1.1 字符串写法1.2 数组写法1.3 对象写法2 Style绑定2.1 对象写法2.2 数组写法1 Class绑定 在Vue中&#xff0c;如果要为某个元素动态添加某个类&#xff0c;并不会使用document.getElementById等选择器将该元素获得&#xff0c;而是使用v-bin…
阅读更多...
Tomcat突然停止运行/Server Tomcat v8.5 Server at localhost fail

Tomcat突然停止运行/Server Tomcat v8.5 Server at localhost fail

Server Tomcat v8.5 Server at localhost failed to start./org.apache.catalina.startup.Catalina start 严重: 所必需的服务组件启动失败&#xff0c;所以无法启动Tomcat 1.使用eclipse写系统时突然无法运行jsp文件 2.查看任务管理器&#xff0c;将其启动&#xff0c;依旧不…
阅读更多...
101-115-hive-优化执行计划表优化

101-115-hive-优化执行计划表优化

101-压缩存储-优化&#xff1a; 执行计划&#xff08;Explain&#xff09; 1&#xff09;基本语法 EXPLAIN [EXTENDED | DEPENDENCY | AUTHORIZATION] query &#xff08;2&#xff09;查看详细执行计划 hive (default)> explain extended select * from emp; hive (de…
阅读更多...
OpenGL 图像绿幕抠图

OpenGL 图像绿幕抠图

目录 一.OpenGL 图像绿幕抠图 1.IOS Object-C 版本1.Windows OpenGL ES 版本2.Windows OpenGL 版本 二.OpenGL 图像绿幕抠图 GLSL Shader三.猜你喜欢 零基础 OpenGL ES 学习路线推荐 : OpenGL ES 学习目录 >> OpenGL ES 基础 零基础 OpenGL ES 学习路线推荐 : OpenGL E…
阅读更多...
Linux 内核（Kernel）组成分析

Linux 内核（Kernel）组成分析

【好文推荐】 需要多久才能看完linux内核源码&#xff1f; 浅析linux内核网络协议栈--linux bridge 深入理解SR-IOV和IO虚拟化 一文了解Linux上TCP的几个内核参数调优 概述Linux内核驱动之GPIO子系统API接口 一、Linux内核简介 Linux 内核采用宏内核架构&#xff0c;即 Linux …
阅读更多...
Springboot利用Security做OAuth2授权验证

Springboot利用Security做OAuth2授权验证

OAuth2获取授权令牌&#xff08;token&#xff09;通常有四种方式&#xff1a;授权码模式&#xff0c;简化模式&#xff0c;客户端模式&#xff0c;和密码模式。针对自己系统内用户的登录&#xff0c;通常使用密码模式进行授权。 我们利用Spring Security OAuth2来制作一个授权…
阅读更多...
[附源码]Python计算机毕业设计Django健身生活系统论文

[附源码]Python计算机毕业设计Django健身生活系统论文

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…
阅读更多...
【Java】从源码分析fail-fast和fail-safe是如何产生的

【Java】从源码分析fail-fast和fail-safe是如何产生的

文章目录fail-fastfail-safe这个问题出现在使用Iterator迭代器的时候。如果某一个集合在使用的时候&#xff0c;另一个线程修改了这个集合&#xff0c;会出现什么情况呢&#xff1f;因此就出现了两种解决策略fail-fast 一旦发现遍历的同时其它人来修改&#xff0c;则立刻抛异常…
阅读更多...
【微信小程序】页面跳转、组件自定义、获取页面参数值

【微信小程序】页面跳转、组件自定义、获取页面参数值

&#x1f3c6;今日学习目标&#xff1a;第十七期——页面跳转、组件自定义、获取页面参数值 &#x1f603;创作者&#xff1a;颜颜yan_ ✨个人主页&#xff1a;颜颜yan_的个人主页 ⏰预计时间&#xff1a;25分钟 &#x1f389;专栏系列&#xff1a;我的第一个微信小程序 文章目…
阅读更多...
推荐系统相关论文阅读整理

推荐系统相关论文阅读整理

文章题目 基于协同过滤的微信点餐推荐系统的设计与实现 作者 张彭飞 吉林大学 期刊论文在线阅读—中国知网 (cnki.net)摘要关键词协同过滤;推荐系统;Docker;PXC;RedisCluster;名词解释文献研究目的推荐系统应用现状 在1990 年代&#xff0c;为了解决邮件过载问题&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023