127

0

Oruga

Oruga 是一个轻量级的Vue.js UI 组件库,不依赖 CSS 框架。

Oruga UI 就像一只毛毛虫,简约而实用。它在你手中变成蝴蝶

(🐛) =>🦋

Oruga 是一个轻量级的Vue.js UI 组件库,没有 CSS 框架依赖

Vue 3.x 的 Oruga 下一个版本

特征

  • CSS 框架不可知论 :不依赖于特定的 CSS 框架/库,但您可以轻松地将组件与其中之一集成,因为它们可以以不同的方式完全自定义
  • 类固醇组件 :大多数组件不是原生元素的简单包装,但它们添加了新的和自定义的功能
  • 轻量级 :没有其他内部依赖,只导入您需要的组件

Oruga 不依赖于任何特定的样式或 CSS 框架(如 Bootstrap、Bulma、TailwindCSS 等),它不提供任何网格系统或 CSS 实用程序,它只是提供一组易于定制的组件。Oruga 希望您只关注应用程序的 UI/UX 方面,并完全灵活地应对未来的变化,而无需接触一行 JavaScript。

文档

在此处浏览在线文档

💅有关组件定制的更多信息,请仔细阅读文档中的“定制”部分。

🕹要查看 Oruga 的实际效果,请转到文档中的示例部分

注意:文档源代码在 docs目录中,它也用作演示。

浏览器支持

🌎Oruga 已经在所有主流浏览器中进行了测试

铬合金 火狐 IE 歌剧 苹果浏览器 IE浏览器
最新的✔ 最新的✔ 10+✔ 最新的✔ 6.1+✔ 即 11 ✔

快速开始

🐛Oruga 可用于Vue.js 版本 2.6+版本 3.x

设置 Oruga

Vue 2

  1. 安装 Oruga。
npm install @oruga-ui/oruga
  1. 导入组件:
  • 要快速开始,请使用 Oruga注册所有组件:

    import Vue from 'vue';
    import Oruga from '@oruga-ui/oruga';
    import '@oruga-ui/oruga/dist/oruga.css';
    
    Vue.use(Oruga);
  • 要使用摇树,请手动注册组件:

    import Vue from 'vue';
    import { OField, OInput } from '@oruga-ui/oruga';
    import '@oruga-ui/oruga/dist/oruga.css';
    
    Vue.component(OField);
    Vue.component(OInput);
  • 将它们导入您的 SFC

Vue 3

  1. 安装 Oruga。
npm install @oruga-ui/oruga-next
  1. 导入组件:
  • 要快速开始,请使用 Oruga注册所有组件:

    import { createApp } from 'vue'
    import Oruga from '@oruga-ui/oruga-next';
    import '@oruga-ui/oruga-next/dist/oruga.css';
    
    createApp(...).use(Oruga);
  • 要使用摇树,请手动注册组件:

    import Vue from 'vue'
    import { OField, OInput } from '@oruga-ui/oruga'
    import '@oruga-ui/oruga/dist/oruga.css'
    
    createApp(...)
      .component(OField)
      .component(OInput)
  • 将它们导入您的 SFC

定制

仔细阅读 Oruga 文档中的“自定义”部分

如果您想查看使用 、 或 CSS 框架的完全自定义注册表单的示例,请查看 Tailwind官方的Oruga Bulma多框架示例(源代码可在此处获得),或者如果您更熟悉 TailwindCSS 2,请给我们的官方TailwindCSS Demo试试(这里有源代码)Bootstrap``Material

将 Oruga 与 Nuxt 一起使用

Oruga 提供了一个Nuxt.js模块,可以轻松地将库集成到您的 Nuxt.js 应用程序中。

添加 @oruga-ui/oruga/nuxt到文件的 modules部分 nuxt.config.js

module.exports = {
  modules: ['@oruga-ui/oruga/nuxt']
}

您还可以在本节中扩展和/或覆盖类(请参阅如何在 Oruga中添加新类覆盖现有类)

module.exports = {
  modules: [
    [
      '@oruga-ui/oruga/nuxt',
      {
        button: {
          override: true
        }
      }
    ]
  ]
}

或者,您可以使用 Nuxt.js 插件系统 oruga.js在您的文件夹中添加一个文件(例如),plugins其中包含

import Vue from 'vue'
import Oruga from '@oruga-ui/oruga'
import '@oruga-ui/oruga/dist/oruga.css'

Vue.use(Oruga)

要使此插件在您的应用程序中可用,请将此文件添加到 plugins您的数组中 nuxt.config.js

plugins: [{ src: '~plugins/oruga.js' }]

要了解插件如何与 Nuxt.js 一起使用,请查看NuxtJS 插件文档

看看官方的 NuxtJS + Oruga 示例

贡献

请参阅贡献指南