VUE练习4 - 使用Ant Design

1 安装

npm i --save ant-design-vue@3.2.16

不要装最新版，变化比较大。

2 注册

**全局完整注册：**修改 main.js:

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import Antd from "ant-design-vue";
import "ant-design-vue/dist/antd.css";
import settings from '@/settings';

const app = createApp(App)
app.use(store).use(router).use(Antd).mount('#app')
app.config.globalProperties.$settings = settings

3 测试

修改 ShowCenterView.vue

<template>
  <div class="showcenter">
    <h1>show center  | 展示中心</h1>
    <a-row>
     <a-col :span="8" :offset="8">
        <a-input-search
          v-model:value="value"
          placeholder="input text"
          enter-button="Search"
          size="large"
          @search="onSearch"
        />
     </a-col>
    </a-row>
 </div>
</template>

效果：