当前位置: 首页 > news >正文

Vue基础27之VueUI组件

Vue基础27

  • Vue UI组件库
    • 移动端常用 UI 组件库
    • PC 端常用 UI 组件库
    • Element-ui插件
      • 基本使用
        • 安装
        • 引入并使用
          • main.js
          • App.vue
      • 按需引入
        • 安装 babel-plugin-component
        • babel.config.js
        • main.js
        • App.vue

Vue UI组件库

移动端常用 UI 组件库

  1. Vant

https://youzan.github.io/vant

  1. Cube UI

https://didi.github.io/cube-ui

  1. Mint UI

http://mint-ui.github.io

PC 端常用 UI 组件库

  1. Element UI

https://element.eleme.cn

  1. IView UI

https://www.iviewui.co

Element-ui插件

基于Vue框架的国产UI组件(饿了么出品)

基本使用

安装

npm i element-ui

在这里插入图片描述

引入并使用

main.js
import Vue from 'vue'import App from './App'//引入ElementUI组件库
import ElementUI from 'element-ui'
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';//关闭vue的生产提示
Vue.config.productionTip = false//应用ElementUI
Vue.use(ElementUI)
new Vue({el: "#app",render: h => h(App),
})
App.vue
<template><div class="bg"><button>原生按钮</button><input type="text" placeholder="原生input框"><br> <br>
<!--    element-ui的引入--><el-button type="primary">主要按钮</el-button><div class="input"><el-input  placeholder="请输入内容"></el-input></div><br><el-button icon="el-icon-search" circle></el-button><br>
<!--    日期引入--><el-date-pickertype="daterange"align="right"unlink-panelsrange-separator=""start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></div>
</template><script>
export default {name: "App",
}
</script><style>
.input{width: 200px;margin-top: 10px;
}
</style>

在这里插入图片描述

按需引入

安装 babel-plugin-component

npm install babel-plugin-component -D

babel.config.js

module.exports = {presets: ['@vue/cli-plugin-babel/preset',["@babel/preset-env", { "modules": false }]],plugins: [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

main.js

import Vue from 'vue'import App from './App'// //引入ElementUI组件库
// import ElementUI from 'element-ui'
// //引入ElementUI全部样式
// import 'element-ui/lib/theme-chalk/index.css';//关闭vue的生产提示
Vue.config.productionTip = false//按需引入
import{Button,Row,DatePicker,Input} from "element-ui";// //应用ElementUI
// Vue.use(ElementUI)
Vue.component(Button.name,Button)
Vue.component(Row.name,Row)
Vue.component(Input.name,Input)
Vue.component('expecial-datePicker',DatePicker)new Vue({el: "#app",render: h => h(App),
})

App.vue

<template><div class="bg"><button>原生按钮</button><input type="text" placeholder="原生input框"><br> <br>
<!--    element-ui的引入--><el-row><el-button type="primary">主要按钮</el-button></el-row><div class="input"><el-input  placeholder="请输入内容"></el-input></div><el-row><el-button icon="el-icon-search" circle></el-button></el-row>
<!--    日期引入--><expecial-datePickertype="daterange"align="right"unlink-panelsrange-separator=""start-placeholder="开始日期"end-placeholder="结束日期"></expecial-datePicker></div>
</template><script>
export default {name: "App",
}
</script><style>
.input{width: 200px;margin-top: 10px;
}
</style>

在这里插入图片描述

相关文章:

Vue基础27之VueUI组件

Vue基础27Vue UI组件库移动端常用 UI 组件库PC 端常用 UI 组件库Element-ui插件基本使用安装引入并使用main.jsApp.vue按需引入安装 babel-plugin-componentbabel.config.jsmain.jsApp.vueVue UI组件库 移动端常用 UI 组件库 Vant https://youzan.github.io/vant Cube UI htt…...

第35篇:Java代码规范全面总结

编程规范目的是帮助我们编写出简洁、可维护、可靠、可测试、高效、可移植的代码,提高产品代码的质量。 适当的规范和标准绝不是消灭代码内容的创造性、优雅性,而是限制过度个性化, 以一种普遍认可的统一方式一起做事,提升协作效率,降低沟通成本。 代码的字里行间流淌的是软…...

Cookie和Session详解

目录 前言&#xff1a; Session详解 Cookie和Session区别和关联 服务器组织会话的方式 使用Tomcat实现登录成功跳转到欢迎页面 登录前端页面 登录成功后端服务器 重定向到欢迎页面 抓包分析交互过程 小结&#xff1a; 前言&#xff1a; Cookie之前博客有介绍过&#x…...

Linux之磁盘分区、挂载

文章目录一、Linux分区●原理介绍●硬盘说明查看所有设备挂载情况挂载的经典案例二、磁盘情况查询基本语法应用实例磁盘情况-工作实用指令一、Linux分区 ●原理介绍 Linux来说无论有几个分区&#xff0c;分给哪一目录使用&#xff0c;它归根结底就只有一个根目录&#xff0c;…...

web渗透之jwt 安全问题

前言JWT 全称 JSON Web Token&#xff0c;是一种标准化格式&#xff0c;用于在系统之间发送加密签名的 JSON 数据。原始的 Token 只是一个 uuid&#xff0c;没有任何意义。JWT 包含了部分业务信息&#xff0c;减少了 Token 验证等交互操作&#xff0c;效率更高JWT组成JWT 由三部…...

好用的5款国产低代码平台介绍

一、云程低代码平台 云程低代码平台是一款基于springboot、vue.js技术的企业级低代码开发平台&#xff0c;平台采用模型驱动、高低码融合、开放扩展等设计理念&#xff0c;基于业务建模、流程建模、表单建模、报表建模、大屏建模等可视化建模工具&#xff0c;通过拖拉拽零代码方…...

【前端学习记录】webpack学习之mini-css-extract-plugin插件

前言 最近在学习尚硅谷的webpack5课程&#xff0c;看到mini-css-extract-plugin这个插件的时候&#xff0c;感觉很有帮助&#xff0c;之前都没有在css这方面深入思考过&#xff0c;课程中的一些记录写在下面 为什么需要优化CSS Css 文件目前被打包到 js 文件中&#xff0c;当…...

FPGA基于RIFFA实现PCIE采集HDMI传输,提供工程源码和QT上位机

目录1、前言2、RIFFA理论基础3、设计思路和架构4、vivado工程详解5、上板调试验证并演示6、福利&#xff1a;工程代码的获取1、前言 PCIE是目前速率很高的外部板卡与CPU通信的方案之一&#xff0c;广泛应用于电脑主板与外部板卡的通讯&#xff0c;PCIE协议极其复杂&#xff0c…...

SpringBoot解析指定Yaml配置文件

再来个文章目录 文章目录前言1、自定义配置文件2、配置对象类3、YamlPropertiesSourceFactory下面还有投票&#xff0c;帮忙投个票&#x1f44d; 前言 最近在看某个开源项目代码并准备参与其中&#xff0c;代码过了一遍后发现多个自定义的配置文件用来装载业务配置代替数据库…...

C++基础算法③——排序算法(选择、冒泡附完整代码)

排序算法 1、选择排序 2、冒泡排序 1、选择排序 基本思想&#xff1a;从头至尾扫描序列&#xff0c;每一趟从待排序元素中找出最小(最大)的一个元素值&#xff0c;然后与第一个元素交换值&#xff0c;接着从剩下的元素中继续这种选择和交换方式&#xff0c;最终得到一个有序…...

《高质量C/C++编程》读书笔记一

前言 这本书是林锐博士写的关于C/C编程规范的一本书&#xff0c;我打算写下一系列读书笔记&#xff0c;当然我并不打算全盘接收这本书中的内容。   良好的编程习惯&#xff0c;规范的编程风格可以提高代码的正确性、健壮性、可靠性、效率、易用性、可读性、可扩展性、可复用性…...

【完美解决】python flask如何直接加载html,css,js,image等下载的网页模板

python flask如何直接加载下载的网页模板问题解决办法问题 本人网页开发小白&#xff0c;刚学了用flask&#xff0c;下载了一套网页模板&#xff0c;启动一个网页的确很简单&#xff0c;但是发现无论怎么改这里的 static_folder值都无法找到CSS,JS,IMAGE,FONT等资源 app Flas…...

2023美赛C题【分析思路+代码】

以下内容为我个人的想法与实现&#xff0c;不代表任何其他人。 文章目录问题一数据预处理时间序列模型创建预测区间单词的任何属性是否影响报告的百分比&#xff1f;如果是&#xff0c;如何影响&#xff1f;如果不是&#xff0c;为什么不是&#xff1f;问题二问题三难度评估模型…...

考研复试6 编译原理

第一章 编译器简介 1. 编译器的核心功能 把源代码翻译成目标代码 2. 编译器设计两个原则&#xff1a; 语义相同&#xff1b;以某种可察觉的方式改进输入程序 3. 编译器内部结构 前端&#xff1a;依赖于源语言&#xff0c;与目标机器无关。将输入的代码映射到 IR。包括分析部…...

uni-app:登录与支付--用户信息

用户信息 实现用户头像昵称区域的基本布局 在 my-userinfo 组件中&#xff0c;定义如下的 UI 结构&#xff1a; <template><view class"my-userinfo-container"><!-- 头像昵称区域 --><view class"top-box"><image src"…...

Docker 部署 MySQL

1. 进入下面路径下 -v 使用相对路径的方式挂载的目录docker会自动创建&#xff0c;路径为&#xff1a;/var/lib/docker/volumes/ cd /var/lib/docker/volumes/ 2. 指定版本5.7启动容器mysql docker run -p 3316:3306 --name mysql-master \ -v mysql-master-log:/var/log/mys…...

警惕,3月20日WOS目录更新,50本SCI/SSCI被剔除,这个出版社多达18本

2023年3月SCI、SSCI期刊目录更新 2023年3月20日&#xff0c;Web of Science核心期刊目录再次更新&#xff01;此次2023年3月SCIE & SSCI期刊目录更新&#xff0c;与上次更新&#xff08;2023年2月&#xff09;相比&#xff0c;共有50本期刊被剔除出SCIE & SSCI期刊目录…...

【 Linux入门 】之 手搓 命令行解释器 bash(带源码)

目的基本结构提取输入命令fgets的使用命令初步处理命令的本质创建子进程重要知识补充进程替换命令处理简单 bash 完成及演示优化bashls颜色输出颜色实现cd命令ecport 命令envecho $echo $&#xff1f;目的 主要目的在于进一步了解 Linux 系统下使用进程相关的系统调用 及 shel…...

【运维】运维常用命令

shell大全读取文件每一行内容文件是否存在数组定义和循环取值变量循环流程控制语句&#xff1a;case判断数值相等/大于/小于判断字符串相等awk求和、平均、最大、最小sed用法exprbc计算器读取文件每一行内容 while read line doecho $line done < a.txt文件是否存在 if [ …...

MYSQL常用命令大全

文章目录 基本语句链接数据库显示已有数据库创建数据库选择数据库显示数据库中的表显示当前数据库的版本信息,链接用户名删除数据库创建表表 增加将查询结果插入到新表中:表 删除表 修改表 查询in子查询between ~ and ~ 模糊查询模糊查询regexp中的OR:多个信息查询同义词:删…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1:执行计划绑定问题?尝试:SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库,并对 SQL 进行优化了,添加了强制索引。 UAT 环境已经生效,但 PROD 环境强制索…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...