Vexip UI Nuxt

用於 Vexip UI 的 Nuxt 模組

特色

🏆 根據需求自動導入元件、外掛、指令、圖示及其樣式

快速設定

將 @vexip-ui/nuxt 依賴項新增至您的專案

# Using pnpm
pnpm i -D @vexip-ui/nuxt

# Using yarn
yarn add -D @vexip-ui/nuxt

如果您想控制 Vexip UI 的版本，您也需要將 vexip-ui 依賴項新增至您的專案

# Using pnpm
pnpm i -D vexip-ui

# Using yarn
yarn add -D vexip-ui

將 @vexip-ui/nuxt 新增至 nuxt.config.ts 的 modules 區塊

export default defineNuxtConfig({
  modules: [
    '@vexip-ui/nuxt'
  ],
  vexipUI: {
    // Your module options
  }
})

就這樣！您現在可以在您的 Nuxt 應用程式中使用 Vexip UI 了

<template>
  <VButton :icon="IUser" @click="handleClick">
    Button
  </VButton>
  <VIcon>
    <ISackDollar></ISackDollar>
  </VIcon>
</template>

<script setup lang="ts">
function handleClick() {
  VMessage.success('Success!')
}
</script>

模組選項

請注意，每個選項都有預設值，您僅在變更時才需要指定。

import type { FilterPattern } from '@rollup/pluginutils'

export interface ModuleOptions {
  /**
   * Include files that need to automatically resolve
   *
   * @default
   * [
   *   /\.vue$/,
   *   /\.vue\?vue/,
   *   /\.vue\?v=/,
   *   /\.((c|m)?j|t)sx?$/
   * ]
   */
  include: FilterPattern,
  /**
   * Include files that don't need to automatically resolve
   *
   * @default
   * [
   *   /[\\/]node_modules[\\/]/,
   *   /[\\/]\.git[\\/]/,
   *   /[\\/]\.nuxt[\\/]/
   * ]
   */
  exclude: FilterPattern,
  /**
   * Import css or sass styles with components
   *
   * @default 'css'
   */
  importStyle: boolean | 'css' | 'sass',
  /**
   * Import the dark theme preset styles
   *
   * @default false
   */
  importDarkTheme: boolean,
  /**
   * Prefix for name of components
   *
   * @default 'V'
   */
  prefix: string,
  /**
   * Auto import for directives
   *
   * @default true
   */
  directives: boolean,
  /**
   * Resolve icon components from '@vexip-ui/icons'
   *
   * @default true
   */
  resolveIcon: boolean,
  /**
   * Prefix for name of icon components, same to `prefix` if undefined or null
   *
   * @default ''
   */
  iconPrefix: string
}

貢獻者

感謝他們的所有貢獻！

開發

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

授權條款

全部採用 MIT 授權。