文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

9个值得推荐的 VUE3 UI 框架

Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...Wave UI WaveUI 在Vue3 发布后进行了良好的定位，WaveUI 的开发是在 Vue3 仍处于alpha阶段时就开始了，其目标是在其API稳定后立即支持它，使其成为首批 Vue3 UI框架之一...这个定制的主题可以下载并轻松添加到应用程序中以覆盖默认值。...对 Vue3 支持也很迅速，而且 Quasar 已经发布了几乎所有的 v1 组件、插件和指令。此外，他们还发布了可组合组件，帮助开发人员更深入地了解 Quasar API。

5.9K30
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    9 个值得推荐的 VUE3 UI 框架

    Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...阶段时就开始了，其目标是在其API稳定后立即支持它，使其成为首批 Vue3 UI框架之一。...这个定制的主题可以下载并轻松添加到应用程序中以覆盖默认值。...对 Vue3 支持也很迅速，而且 Quasar 已经发布了几乎所有的 v1 组件、插件和指令。此外，他们还发布了可组合组件，帮助开发人员更深入地了解 Quasar API。

    7.1K30

    ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之表关系（六）

    基于Vue和Quasar的前端SPA项目实战之表关系（六） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，我们已经完成了元数据中动态表单设计功能，本文主要介绍表关系功能的实现...简介 在crudapi系统中，通过表关系(relation)管理将多个表连接起来，支持一对多，多对一，一对一，多对多等关系， 有关表关系基本概念参考之前文章 表关系 ，通过UI配置好表关系后，可以支持主子表的级联操作...，通过多次组合实现了所有类型的表关系。...axios": "^0.18.1", "core-js": "^3.6.5", "quasar": "^1.0.0", "vue-i18n": "^8.0.0" } 增删改查 通过列表页面，.../crudapi/crudapi-admin-web Gitee地址 https://gitee.com/crudapi/crudapi-admin-web 由于网络原因，GitHub可能速度慢，改成访问

    98040

    2021年最佳VUE3 UI框架推荐

    Vue3 上的 Ant Design 包更小，感觉更轻，并且支持 SSR（还包括组合API），Ant Design 拥有成熟的复杂组件，如数据表、统计框、pop确认、模态和弹出窗口。...BalmUI 发展非常迅速，如果想使用 Material Design 风格，使用复杂的内置指令（如 debouncing 和 UI 波纹）在创建自定义组件时能派上用场，那么它非常适合 Vue3 项目。...阶段时就开始了，其目标是在其API稳定后立即支持它，使其成为首批 Vue3 UI框架之一。...这个定制的主题可以下载并轻松添加到应用程序中以覆盖默认值。...对 Vue3 支持也很迅速，而且 Quasar 已经发布了几乎所有的 v1 组件、插件和指令。此外，他们还发布了可组合组件，帮助开发人员更深入地了解 Quasar API。

    4.7K20

    ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之用户登录（二）

    基于Vue和Quasar的前端SPA项目实战之用户登录（二） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之环境搭建（一）的介绍，我们已经搭建好本地开发环境并且运行成功了，今天主要介绍登录功能...虽然本地登录过了，但是可能过期了，这时候访问任意一个API时候，会自动根据返回结果判断是否登录。...状态管理，Vuex 是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享 配置文件 quasar.conf.js是全局配置文件，所有的配置相关内容都可以这个文件里面设置。...$q.loading.show({ message: "登录中" }); this....$q.loading.hide(); console.error(e); }); } submit方法中执行this.

    1.4K50

    「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战—环境搭建 （一）

    基于Vue和Quasar的前端SPA项目实战之环境搭建（一） 背景 crudapi增删改查接口系统的后台Java API服务已经全部可用，需要一套后台管理UI，主要用户为开发人员或者对计算机有一定了解的工作人员...node -v v12.16.1 安装@quasar/cli 需要全局安装脚手架，如果是直接下载已经创建好的工程，可以不安装，但是为了后续开发方便，建议安装一下。...crudapi/crudapi-admin-web gitee地址 https://gitee.com/crudapi/crudapi-admin-web 由于网络原因，github可能速度慢，改成访问...附demo演示 crudapi后台管理页面，框架采用Vue，控件库为Quasar，形式为SPA单页面应用。...[table] 表单对应不同的对象 [table] 表关系图显示不同对象之间的关系 [customer] 业务数据操作 官网地址：https://crudapi.cn 测试地址：https://demo.crudapi.cn

    1.3K80

    2023 年，这 9 个项目助你成为前端高手

    下图是这个 App 最终的样子。 你将学到什么 在构建这个 App 时，你将使用相对较新的 Hooks API，这有助于提高你的 React 技能。...这个示例项目使用 React 组件、Hooks、一个外部 API，当然，还使用 CSS 进行样式化。...这个项目看起来是这样的。 你将学到什么 在这个教程中，你将学习如何利用 Gatsby、React 和 GraphQL 构建一个出色的博客。...9 用 Quasar 构建一个类似 SoundCloud 的音频播放器 Quasar 是另一个 Vue 框架，也可以用来构建移动 App。 在这个项目中，你将构建这样的一个音频播放器。...耗时两周从 Vue 2 迁移到 Svelte 后：代码执行更快、体验更佳 (https://www.infoq.cn/article/F1F3Q7Ptb1jM2ptmGbOG ) 声明：本文为 InfoQ

    4.2K20

    「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之序列号自定义组件（四）

    基于Vue和Quasar的前端SPA项目实战之序列号（四） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之布局菜单（三）的介绍，我们已经完成了布局菜单，本文主要介绍序列号功能的实现...CPage/CPage.vue 用到了q-pagination控件 q-pagination unelevated v-model="pagination.page" :max="Math.ceil.../components/CPage"; export default async ({ Vue }) => { Vue.use(cPage); }; 然后，在quasar.conf.js里面boot...小结 本文主要介绍了元数据中序列号功能，用到了q-pagination分页控件，并且封装成自定义组件cpage, 然后实现了序列号的crud增删改查功能，下一章会介绍元数据中表定义功能。.../crudapi/crudapi-admin-web Gitee地址 https://gitee.com/crudapi/crudapi-admin-web 由于网络原因，GitHub可能速度慢，改成访问

    1.1K50

    「免费开源」基于Vue和Quasar的前端SPA项目后台管理系统实战之元数据导出导入（十五）

    基于Vue和Quasar的前端SPA项目实战之元数据导出导入（十五） 回顾 通过前一篇文章 基于Vue和Quasar的前端SPA项目实战之模块管理（十四）的介绍，通过模块管理将具有相同类型或属于同一业务的表单进行分类...$q.loading.show({ message: "导出中" }); try { const fileName = await metadataTableService.export...$q.notify("元数据表生成成功，请等待下载完成后查看！"); window.open("/api/file/" + fileName, "_blank"); this....crudapi简介 crudapi是crud+api组合，表示增删改查接口，是一款零代码可配置的产品。.../crudapi/crudapi-admin-web Gitee地址 https://gitee.com/crudapi/crudapi-admin-web 由于网络原因，GitHub可能速度慢，改成访问

    85400

    ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之模块管理（十四）

    基于Vue和Quasar的前端SPA项目实战之模块管理（十四） 回顾 通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之动态表单（五）的介绍，通过配置的方式可以零代码实现表单管理功能，但是所有表单都没有分类...模块配置 [module] 字典模块添加3个省，市，区三个表。 核心代码 说明 表单配置好之后，api自动生成了，直接通过模块api获取后台数据，首页展示模块，每个模块可以折叠。...crudapi简介 crudapi是crud+api组合，表示增删改查接口，是一款零代码可配置的产品。...无需编程，通过配置自动生成crud增删改查RESTful API，提供后台UI管理业务数据。基于主流的开源框架，拥有自主知识产权，支持二次开发。.../crudapi/crudapi-admin-web Gitee地址 https://gitee.com/crudapi/crudapi-admin-web 由于网络原因，GitHub可能速度慢，改成访问

    59810

    值得推荐的7个vue3 UI组件库

    本文推荐几款热门的vue3 UI组件库，排名不分前后。...Element Plus是Element UI的升级版，Element UI是基于Vue 2.x的界面框架，而Element Plus则基于Vue 3.x。.../quasar/ Quasar是一个基于Vue.js的开源前端框架，它允许开发者仅编写一次代码，然后就可以将应用部署到多个平台上，如网站、渐进式网页应用（PWA）、移动应用和Electron应用。...文档齐全的 API：Quasar 拥有全面且文档齐全的 API，易于学习和使用。这种清晰且结构化的文档简化了开发过程，使开发者能够有效地利用 Quasar 的特性和功能。...风格移动端组件库，全面拥抱Vue3生态，追求轻量的组件体积，简单的使用方式，最小的思维负担。

    12.5K10

    ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之数据导入（九）

    基于Vue和Quasar的前端SPA项目实战之数据导入（九） 回顾 通过之前一篇文章 基于Vue和Quasar的前端SPA项目实战之业务数据（七）的介绍，实现了业务数据基本crud功能，本文主要介绍业务数据批量导入相关内容...UI界面 [产品导入] 产品导入 API [业务数据导入API] 业务数据导入相关API，包括获取模板和导入两个功能，具体的通过swagger文档可以查看。...> q-file> 用到了q-file组件，用于上传EXCEL。...[product] 导入之后，查看发现3条数据已经导入成功。.../crudapi/crudapi-admin-web Gitee地址 https://gitee.com/crudapi/crudapi-admin-web 由于网络原因，GitHub可能速度慢，改成访问

    58310

    ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之业务数据（七）

    基于Vue和Quasar的前端SPA项目实战之业务数据（七） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之表关系（六）的介绍，元数据设计功能全部实现了，本文主要介绍业务数据的crud...简介 在crudapi系统中，通过配置表单的方式定义元数据。...[listapi] API为/api/business/{name}，其中name为对象名称复数形式（兼容对象名称），查询参数如下： 参数 类型 描述 select string 选择查询需要的字段和关联子表...操作符 字段2 Object 最终转换成mysql中=操作符 ........./crudapi/crudapi-admin-web Gitee地址 https://gitee.com/crudapi/crudapi-admin-web 由于网络原因，GitHub可能速度慢，改成访问

    98430

    VueConf China 2021 《Vue3生态进展-尤雨溪》 Reaction

    Quasar[4] Element Plus[5] And Design Vue[6] Vuetify[7] Nuxt 3[8] 开发体验改进 构建工具 Vite Vite 官方中文文档[9] “该知道的都知道了...目前文档在vue-compat[15]仓库里。public API 会尽可能的兼容，但是一些私有 API 确实没有办法完全兼容。文档中有详细的支持列表。...绝对需要 IE11 支持的话 请等待 2.7 预计在 Q3 2021 去做。 希望在 Q3 Vue2.7 发布之后，整个的 Vue2 到 Vue3 的升级过程会变得更加顺滑。...可以先基于 Vite 切换到 Vue2.7，Compsition API 会直接内置，再切换到 Vue3 会更加简单。...Vue3 成为默认版本 by end of Q2 2021 将会在 2021 年 6 月底，将 npm 默认安装指向 Vue3，文档也会默认指向 Vue3 的文档，希望新的用户会以 Vue3 作为基准。

    1.8K20

    Electron + vue搭建项目

    1、electron-quick-start + vue 2、vue cli + electron 3、vue-electron 4、quasar + electron 5、vue-cli + vue-cli-plugin-electron-builder...（electron安装缓慢，后续更新教程） 3、使用npm run start 就可以启动项目，测试是否安装成功 图片 4、使用vue-cli创建一个vue项目，然后打包到dist 目录下 5、修改main.js...使用vue cli 创建一个vue 项目 2、使用 npm install --save-dev electron electron-packager安装包 3、在根目录中添加一个render.js 4...my-project，配置好相关信息 图片 3、cd my-project 进入到项目 4、yarn 安装包 5、 yarn run dev 启动项目 图片 四、quasar + electron...这个方法使用的是quasar框架 1、npm install -g @quasar/cli 安装quasar脚手架 2、quasar create 创建一个工程 3、quasar

    2.1K10

    ​「免费开源」基于Vue和Quasar的crudapi前端SPA项目实战之布局菜单（三）

    基于Vue和Quasar的前端SPA项目实战之布局菜单（三） 回顾 通过上一篇文章 基于Vue和Quasar的前端SPA项目实战之用户登录（二）的介绍，我们已经完成了登录页面，今天主要介绍布局菜单的实现...布局 嵌套路由 通常由多层嵌套的组件组合而成。...同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如： 设置Setting页面和关于About页面切换的时候，导航和菜单部分都不变，变化的是主体部分，可以通过嵌套路由实现。...$store.state.config.isAllowBack; } } } MainLayout.vue中通过computed计算属性isAllowBack绑定q-btn，这样可以控制后退按钮是否显示.../crudapi/crudapi-admin-web Gitee地址 https://gitee.com/crudapi/crudapi-admin-web 由于网络原因，GitHub可能速度慢，改成访问

    1.1K30
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券