antDesignVue 使用-持续更新

背景

vue3+vite+antdesignvue+vue-router

1,全局完整注册

1.1下载antdesignvue

npm i --save ant-design-vue

或者

npm install ant-design-vue@next --save

1.2在mian.ts中引入

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from '@/router'

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';


const app = createApp(App)

app.use(createPinia())
app.use(Antd)
app.use(router)
app.mount('#app')

注意：.css文件有更新，不再是

import App from './App';
import 'ant-design-vue/dist/antd.css';

而是

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';

可以具体看一下node_module中的文件。

1.3App.vue中进行使用

<script setup lang="ts">
...
</script>

<template>
  <h1>app</h1>

  <a-button type="text">Text Button</a-button>
  <a-button type="link">Link Button</a-button>
  
  
</template>

<style>

</style>

2,按需动态自动引入-

（下面改用pnpm包管理器，npm yarn pnpm 自选即可）

2.1下载antdesignvue

 pnpm i --save ant-design-vue

2.2下载 babel-plugin-import

pnpm i --save ant-design-vue

2.3配置babel.config.ts文件

没有babel.config.ts文件则新建一个即可

//babel.config.ts
module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins: [
        ["import",
            {
                libraryName: "ant-design-vue",
                libraryDirectory: "es",
                style: true,   // `style: true` 会加载 less 文件
            }
        ]
    ]
}

2.4main.js文件中注册所需组件

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import { Button } from 'ant-design-vue';

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(Button)

app.mount('#app')

2.5页面中使用Button组件

<script setup lang="ts">
</script>

<template>
  <a-button type="primary">Primary Button</a-button>
  <a-button>Default Button</a-button>
  <a-button type="dashed">Dashed Button</a-button>
  <a-button type="text">Text Button</a-button>
  <a-button type="link">Link Button</a-button>
</template>

<style scoped>
</style>

带有图标icon的按钮button

<script setup lang="ts">
import { SearchOutlined } from '@ant-design/icons-vue';

</script>

<template>
  <a-button type="primary">Primary Button</a-button>
  <a-button>Default Button</a-button>
  <a-button type="dashed">Dashed Button</a-button>
  <a-button type="text">Text Button</a-button>
  <a-button type="link">Link Button</a-button>
 
  <hr style="margin-top: 36px;">
  <div class="iconButton" style="margin-top: 36px;">
    <a-button type="primary" shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button type="primary" shape="circle">A</a-button>
  <a-button type="primary">
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
  <a-button shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button>
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
  <a-button shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button>
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
  <a-button type="dashed" shape="circle">
    <template #icon><SearchOutlined /></template>
  </a-button>
  <a-button type="dashed">
    <template #icon><SearchOutlined /></template>
    Search
  </a-button>
  <a-button href="https://www.google.com">
    <template #icon><SearchOutlined /></template>
  </a-button>
  
  </div>

</template>

<style scoped>

</style>