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

Nuxt-UI

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

我们欢迎任何形式的贡献,有任何建议或意见,请给我们提问。 QQ 群: Vue/Nuxt.js 或 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.

你可能感兴趣的:(nuxt-ui 一个高性能、高可用、高扩展客制化)