nuxt-ui 一个高性能、高可用、高扩展客制化

Nuxt-UI

NuxtUI是由render函数渲染没有编译过程，相当于使用者直接将代码给程序，灵活性高，性能高。
并且使用 TailwindCss 高度可定制的基础层 CSS 框架，根据您的应用程序的独特设计进行定制。
因为使用的是TailwindCss，所以默认情况下使用的是它的类名，并且所有类名都是可配置的，从而使您可以完全自定义组件的外观。
完全可以通过只需要配置一次就可以设置主题类了。

我们欢迎任何形式的贡献，有任何建议或意见，请给我们提问。 QQ 群: 或 Discordapp 一起交流讨论

规范

tips常用屏幕尺寸规范

Size(大小尺寸)	Properties(属性)
None	width: 100%;
sm (640px)	max-width: 640px;
md (768px)	max-width: 768px;
lg (1024px)	max-width: 1024px;
xl (1280px)	max-width: 1280px;

安装和使用

1.安装依赖项

npm install nuxt-ui --save

或

yarn add nuxt-ui

::: tip
如果您使用的是默认主题，您需要先安装TailwindCSS

或直接下载nuxt.js 官方@nuxtjs/tailwindcss套件

yarn add @nuxtjs/tailwindcss

:::

使用

基础配置

::: tip
这里以 nuxt.js 中的使用例子
:::

步骤一：在plugins目录中创建nuxt-ui.js

import Vue from "vue";
import NuxtUI from "nuxt-ui";
Vue.use(NuxtUI);

步骤二：nuxt.config.js配置

{
  css: [
    //如果要使用 Icon 图标需要添加
    "nuxt-ui/dist/fonts/iconfont.css",
    "nuxt-ui/dist/main.css",
    "tailwindcss/dist/base.css",
    "tailwindcss/dist/components.css",
    "tailwindcss/dist/utilities.css"
  ],
  buildModules: ["@nuxtjs/tailwindcss"],
  plugins: [
    {
      src: "~plugins/nuxt-ui",
      ssr: false
    }
  ],
}

自定义主题

::: tip
在这里您只需要设置覆盖的类即可:
plugins/themes/default.js
:::

在plugins中添加您需要覆盖的主题文件，plugins/themes/newButton.js

const NButton = {
  // baseClass: 'border block rounded inline-flex items-center justify-center',
  baseClass: "rounded-lg border block inline-flex items-center justify-center",
  // primaryClass: 'text-white bg-blue-500 border-blue-500 hover:bg-blue-600 hover:border-blue-600',
  primaryClass:
    "text-white bg-purple-500 border-purple-500 hover:bg-purple-600 hover:border-purple-600"
};

const NewTheme = {
  NButton
};

export default NewTheme;

贡献

您喜欢这个项目吗？欢迎任何帮助。（我不是讲英语的人，因此也欢迎对我的评论有任何评论）。
在提出拉动请求之前，请确保已阅读贡献指南...
由于项目创建之初，还未制定好如何贡献指南，指南制定中....

贡献者

• Hom Wang
• 所有贡献者

License

The MIT License (MIT). Please see License File for more information.