基于 webpack+vue-loader+vux 可以快速开发移动端页面,配合 vux-loader 方便你在 WeUI 的基础上定制需要的样式。...特性: 基于 Vue 2.0 和 Bulma 0.3 技术 响应式和弹性布局 多种图表类型 丰富的组件或参见 vue-bulma 基于优秀的第三方库 官网:https://admin.vuebulma.com...特性: 多功能组件,使用无忧 自定义主题文件,更易扩展 基于 Vue 2.0,开发更加快速 官网:https://museui.github.io 示例 主题 ? 颜色 ?...8.vuematerial/vue-material tag:vue-material javascript vue material material-design star:3.9k link:https...://github.com/vuematerial/vue-material 简介 Vue Material is lightweight framework built exactly according
上搜索相关查看 可以使用的版本 效果:主题色改变 6.Vue-material npm install vue-material --save 安装 import...'vue-material/dist/vue-material.min.css' import 'vue-material/dist/theme/default-dark.css' // 暗色主题 import...VueMaterial from 'vue-material' Vue.use(VueMaterial) 引入 <link rel="stylesheet" href="https:/...自定义<em>主题</em>: @import "~vue-material/dist/theme/engine"; // Import the theme engine @include md-register-theme...The primary color of your brand accent: #1a11e8 // The secondary color of your brand )); @import "~vue-material
截至目前Vue在GitHub上的Star数已经高达152601,还有绝大数像笔者一样不经常star别人的Vue友们(可恨可气)。...你可以通过读代码并且在现有项目的基础上构建一些东西来学习,因为如果想提高你的 Vue 开发技术,那么花些时间来了解开源项目是很值得的。...Material Vue的常用Vue UI库之一,简单,轻巧,完全按照Google Material Design规范构建。...包含动态主题,按需组件以及所有易于使用的API。...网站: http://vuematerial.io GitHub: https://github.com/vuematerial/vue-material GitHub Stars: ★8376 vueOrgChart
一个material design vue 组件库 vue-material 同 Material 风格的组件库 Keen-UI 又一个 Material 风格的组件库 Vue Admin 基于Vue...Vue Material Star 数差不多 6K,是一个实现了谷歌 Material Design 的简单库。...Vuetify 是 Vue.js 的一个UI组件库,自2016年以来一直在积极开发。提供使用谷歌 Material Design 设计指南构建现代网站所需的一切 UI 能力。...第八条:Premium Themes,高级主题支持。 第九条:商业及企业支持。 2.2 vuetify 支持移动应用吗? vuetify 为移动设备而生。...以下是 vuetify 应用程序在桌面视图中的外观: 当调整浏览器大小时,应用程序应该会切换至移动视图: 2.3 基于 vuetify 后台 web 应用如何开发?
:基于 Vuejs 的开源 UI 组件库 Keen-UI:轻量级的基本UI组件合集 vue-material:通过Vue Material和Vue 2建立精美的app应用 muse-ui:三端样式一致的响应式...组件 vue-pull-to-refresh:Vue2的上拉下拉 vue-form-2:全面的HTML表单管理的解决方案 vue-side-nav:响应式的侧边导航 mint-indicator...qingcheng:qingcheng主题 vue-desktop:创建管理面板网站的UI库 vue-meta:管理app的meta信息 vue-axios:将axios整合到VueJS的封装...当元素在页面上可见或隐藏时检测 vue-ts-loader:在Vue装载机检查脚本 vue-pagination-2:简单通用的分页组件 vuex-i18n:定位插件 Vue.resize:检测...2的移动UI元素 iview – 基于 Vuejs 的开源 UI 组件库 Keen-UI – 轻量级的基本UI组件合集 vue-material – 通过Vue Material和Vue 2建立精美的
HTML CSS Support 自动完成 HTML 标签的 id 和 class 属性。...Material Theme Material 主题。 Material Theme Icons Material 主题图标。...Theme Sublime Text Material 主题。...Vetur 用于 VS Code 的 Vue 工具。 vscode-pdf 在 VSCode 中显示 pdf 文件。...Vue 3 Snippets Vue.js 3 和 Vue.js 2 代码片段扩展。 wechat-snippet 微信小程序代码辅助,代码片段自动补全。
Material Icon Theme Visual Studio Code 的 Material Design 图标,目录/文件图标等。 Material Theme Material 主题。...Material Theme Icons Material 主题图标。 minapp 微信小程序标签、属性的智能补全(同时支持原生小程序、mpvue 和 wepy 框架,并提供 snippets)。...Theme Sublime Text Material 主题。...Vetur 用于 VS Code 的 Vue 工具。 vscode-pdf 在 VSCode 中显示 pdf 文件。...Vue 3 Snippets Vue.js 3 和 Vue.js 2 代码片段扩展。 WakaTime 统计在 VS Code 里写代码的时间。
如果你是Vue.js框架的粉丝,那么这里可能是你获得灵感的地方。展示包括基于VueJS的主题,元素,仪表板等。 ?...该仪表板附带了预先构建的示例,因此开发过程是无缝的,从我们的页面切换到真实的网站非常容易。 ?...无论是个人博客还是你公司的网站,都可以使用Pagekit来为网络创建功能强大的内容,使其在每台设备上都能完美运行。它具有干净直观的界面,它也有一个很棒的内置市场。 ?...https://pagekit.com/ Vue Material Dashboard PRO Vue Material Dashboard PRO是一个出色的高级管理模板,建立在Vue Material...它有三种类型的笔记,你可以移动笔记或添加点到个别的笔记。 ?
Varlet 基于 Vue3 的 Material design 风格移动端组件库 Vue-devui 基于 DevUI Design 的 Vue3 组件库,使用 pnpm + vite + vue3...90%,提供稳定性保障 提供丰富的中英文文档和组件示例 提供 Sketch 和 Axure 设计资源 支持 Vue 2、Vue 3 和微信小程序 支持主题定制,内置 700+ 个主题变量 支持按需引入和...可以在支持 ES2018 和 ResizeObserver 的浏览器上运行。 如果您确实需要支持旧版本的浏览器,请自行添加 Babel 和相应的 Polyfill 。...开发的 Material 风格移动端组件库,全面拥抱 Vue3 生态,由社区建立起来的组件库团队进行维护。...特性: 提供50+个高质量通用组件 组件十分轻量 由国人开发,完善的中英文文档和后勤保障 支持按需引入 支持主题定制 支持国际化 支持 webstorm,vscode 组件属性高亮 支持 SSR 支持
(date-timepicker)组件在使用 Vue 框架开发中使用非常频繁。...如果 UI 上没有太多要求,直接上,没太多问题。 日期选择器 时间日期选择器 日期范围选择器 时间选择器 支持 pkg Module 2....日期范围 自定义语言 自定义日期格式 支持夜间模式 使用 CSS 变量自定义样式 3.Material Vue DateRange Picker - 内置时间范围选择,选择更快捷 03-all-Material-Vue-DateRange-Picker...多语言,支持 12/24小时制切换。...Vue MJ DateRange Picker 功能相当全,支持多语言,自定义主题以及自定义 UI 面板,一键范围选择,禁止显示过去时间。
在 Vue 模板内,JavaScript 表达式可以被使用在如下场景上: 在文本插值中 (双大括号) 在任何 Vue 指令 (以 v- 开头的特殊属性) 属性的值中 1.4.1、仅支持表达式 每个绑定仅支持单一表达式...我们并不推荐在一元素上同时使用这两个指令 — 查看列表渲染指南详情。 参考:条件渲染 - v-if 因为 v-if 是一个指令,他必须依附于某个元素。但如果我们想要切换不止一个元素呢?...参考: 数据绑定语法 - 插值 v-memo 1.5.18、v-memo 期望的绑定值类型:any[] 详细信息 缓存一个模板的子树。在元素和组件上都可以使用。...,如果它不存在则返回-1。.../vue-admin (6)vue-material为 Vue.js 打造的 Material 风格的组件 (Star:4550) https://github.com/vuematerial/vue-material
此可切换功能确实增加了额外的自定义层,可以使应用程序脱颖而出。 ? Vue Black Dashboard Pro建立在vue-cli和vue-router之上,且文档也写的很详细。...代码中已经添加了许多Vue库,例如vue-router和Vuex。 尽管它可能不是“现成的”,但它确实为开发人员在仪表板的布局,设计和结构上提供了额外的灵活性。...它建立在Element UI库的基础之上,Github上的有63K颗星,非常受欢迎。 对于免费工具,Vue Element Admin中包含大量的组件,页面和功能。...主要特点: 流畅的响应式设计 基于Vuetify和 Material Design 三种颜色主题和深色模式 Vuex和Vue-Router支持 15. Light Blue Vue Lite ?...浅蓝主题Vue管理模板(Light Blue Vue Admin)是一个免费的Vue.js和Bootstrap 4仪表板模板,设计独特、具有稍微透明的小部件和渐变背景。
在应用内为用户提供切换主题的开关选项 适配的方式也分为三种:自动适配、自定义适配、使用 Material Design Components 进行适配,为了方便说明,我这里写了一个实例代码,在没有开启适配前是这个样子的...如果您的应用采用浅色主题背景,则 Force Dark 会分析应用的每个视图,并在相应视图在屏幕上显示之前,自动应用深色主题背景。...所以在使用 Material Design Components 进行适配的时候,我们需要定义两种 theme,分别代表 light 和 night,通过分别定义两个主题中相同场景意义的颜色属性来实现暗黑模式的切换...而上一部分自定义适配则是,通过定义一份主题,在同一主题下通过控制 light 、night 两种颜色来实现切换。...切换主题 目前为止我们已经知道了如何适配暗黑模式,在完成适配之后,我们还需要为用户提供在运行时,切换主题的选项。
此可切换功能确实增加了额外的自定义层,可以使应用程序脱颖而出。 Vue Black Dashboard Pro建立在vue-cli和vue-router之上,且文档也写的很详细。...尽管它可能不是“现成的”,但它确实为开发人员在仪表板的布局,设计和结构上提供了额外的灵活性。 主要特点: 开源 高度可定制 内置Vue库 10....Vue Element Admin是另一个开源 Vue 后台模板。 它建立在Element UI库的基础之上,Github上的有63K颗星,非常受欢迎。...主要特点: 流畅的响应式设计 基于Vuetify和 Material Design 三种颜色主题和深色模式 Vuex和Vue-Router支持 15....Vue Material Dashboard Vue Material Dashboard是使用Vue Material的另一个免费资源。
Material Design,这么多内容,可见小编是多么有诚意,此时时刻,你是否迫不及待的想下载了。...注(一定要看到底,文末有送书福利,请不要错过哟): Vuetify: 一个vue ui库,提供vue组件供使用。...根据 Google Material Design 指南实现(https://material.io/)。...Vuely可以通过RTL支持多语言版本的切换,它还带有很多风格主题,自定义色彩搭配,更多使用体验,使用才知道,期待各位亲的使用分享 运用到的技术 项目特色 多种控制台风格 种类繁多的组件 个性化主题搭配...微信公众号留言有礼 文末发表留言,送纸质书 规则: 留言内容只要和本文内容相关,写下你的使用感受或者分享一些前端相关的话题、本公众号的建议、想学哪方面的前端内容,赞美小编通通都可以(其它类型的留言有可能不通过哟
注意一点的是,在原基础上直接加在后面(未按starts数排序)。 2021-03-06 推荐一些 Vue 常用后台管理系统模板。...,享受 Vue + Webpack 的开发体验,在 Markdown 中使用 Vue 组件,同时可以使用 Vue 来开发自定义主,VuePress 为每个页面预渲染生成静态的 HTML,同时在页面被加载的时候...基于 Vue.js ,使用 Vue-Cli3.0 脚手架,引用 Element UI 组件库,方便开发快速简洁好看的组件。分离颜色样式,支持手动切换主题色,而且很方便使用自定义主题色。.../#/login 预览效果: vue-material-admin (2.2k) vue-material-admin (github上的标星数为2.1k 2.2k)。...此可切换功能确实增加了额外的自定义层,可以使应用程序脱颖而出。
这些本质上都是 CSS 的动态渲染的需求。如果在开发过程中写死 CSS 样式的话在面对这样的需求的时候就会真·痛苦面具了。...│ └── old └── views ├── Home.vue // 主题切换页面 ├── List.vue └── Mine.vue 废话不多说。...可自定义其他主题 vue.config.js 配置项处理 我们不想每次都引入 CSS 变量,可以在配置项中利用 CSS 插件自动注入全局变量样式。...在 App.vue 文件下的 mounted 中将 body 添加一个自定义的 data-theme 属性,并将其设置为 default // App.vue mounted() { document...他通过在自定义属性之前加上前缀 -- 来实现。
如果不是,则返回App主题。 判断平台显示指定主题: /// defaultTargetPlatform在foundation包里。...ThemeData(Theme相关类型属性): accentIconTheme - IconThemeData类型,与突出颜色对照的图片主题。...floatingActionButtonTheme - FloatingActionButtonThemeData类型,FloatingActionButton的主题样式,也就是Scaffold属性的那个...bannerTheme - MaterialBannerThemeData类型,Material材质的Banner主题样式。...用于确定放置在突出颜色顶部的文本和图标的颜色(例如FloatingButton上的图标)。 brightness - Brightness类型,应用程序整体主题的亮度。
领取专属 10元无门槛券
手把手带您无忧上云