当前位置：首页 > VUE

antd vue 实现

2026-03-27 09:34:08VUE

antd vue 实现步骤

安装ant-design-vue库：

npm install ant-design-vue

在main.js中引入并注册组件：

import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import App from './App.vue'

const app = createApp(App)
app.use(Antd)
app.mount('#app')

基础组件使用示例

按钮组件示例：

<template>
  <a-button type="primary">Primary Button</a-button>
</template>

表单组件示例：

<template>
  <a-form :model="formState" @finish="onFinish">
    <a-form-item label="Username" name="username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      formState: {
        username: ''
      }
    }
  },
  methods: {
    onFinish(values) {
      console.log('Success:', values)
    }
  }
}
</script>

主题定制方法

修改vue.config.js配置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px'
          },
          javascriptEnabled: true
        }
      }
    }
  }
}

按需加载配置

安装babel插件：

npm install babel-plugin-import -D

配置babel.config.js：

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: true
      }
    ]
  ]
}

国际化实现

设置语言包：

antd vue 实现

import { ConfigProvider } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import enUS from 'ant-design-vue/es/locale/en_US'

// 中文
<config-provider :locale="zhCN">
  <app />
</config-provider>

// 英文
<config-provider :locale="enUS">
  <app />
</config-provider>