Oruga

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 已经在所有主流浏览器中进行了测试

最新的✔	最新的✔	10+✔	最新的✔	6.1+✔	即 11 ✔

快速开始

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

设置 Oruga

Vue 2

1. 安装 Oruga。

npm install @oruga-ui/oruga

2. 导入组件：

• 要快速开始，请使用 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

2. 导入组件：

• 要快速开始，请使用 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 示例。

贡献

请参阅贡献指南。