Nuxt-ui NPM | npm.io

Nuxt-UI

NuxtUI是一个由 TailwindCss CSS开发的Vue组件，宗旨是根据您的应用程序的独特设计进行定制。

因为使用的是TailwindCss CSS，所以默认情况下使用的是它的类名，并且所有类名都是可配置的，从而使您可以完全自定义组件的外观。

完全可以通过只需要配置一次就可以设置主题类了。

如有建议的地方还请大家反应出来，我希望通过 QQ 群: 或 Discordapp 一起交流讨论

安装和使用

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配置

{
  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;