Ant Design Vue Nuxt
Ant Design Vue 模組，適用於 Nuxt
功能
- ✨ 自動按需引入組件。
- ✨ 自動從 @ant-design/icons-vue 引入圖示。
- ✨ 自動引入 message、notification 和 Modal 方法。
快速設定
- 新增
@ant-design-vue/nuxt依賴到您的專案
npx nuxi@latest module add ant-design-vue
- 新增
@ant-design-vue/nuxt到nuxt.config.ts的modules區段
export default defineNuxtConfig({
modules: [
'@ant-design-vue/nuxt'
],
antd:{
// Options
}
})
完成！您現在可以在您的 Nuxt 應用程式中使用 ant-design-vue 了 ✨
使用方式
<script lang="ts" setup>
const handleMessage = () => {
message.info("This is a normal message");
}
</script>
<template>
<a-button @click="handleMessage">
button
</a-button>
</template>
參考 Nuxt 文件 和 playground 用法。
選項
components
- 類型：
array| 'false'
如果有些組件沒有從 Ant Design Vue 自動引入，您需要在此處新增組件名稱。
例如：['Button']
imports
- 類型：
array
如果您希望從 Ant Design Vue 自動引入內容，您可以在此處新增。
icons
- 類型：
array| 'false'
如果有些組件沒有從 @ant-design/icons-vue 自動引入，您需要在此處新增組件名稱。
extractStyle (1.4.1)
- 類型：
boolean
解決頁面 CSS 閃爍問題
按需提取和注入 CSS，預設為 false
<!-- If the extractStyle option is enabled, we can use a-extract-style on the outermost level of the template in app.vue -->
<template>
<a-extract-style>
<!-- Your page or component -->
</a-extract-style>
</template>
開發
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Build for production
npm run build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release