第三节：AntDisgn安装与导入

最新推荐文章于 2024-01-29 12:47:54 发布

战斗中的老段

最新推荐文章于 2024-01-29 12:47:54 发布

阅读量400

点赞数

分类专栏： Vue3企业项目任务协同管理文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_48203828/article/details/133672437

版权

Vue3企业项目任务协同管理专栏收录该内容

4 篇文章 0 订阅

订阅专栏

AntDisgn官网
1.安装：npm install -g @vue/cli或者 yarn global add @vue/cli
2.导入(我这进行的是全局使用在main.js里边进行配置)

import { createApp } from 'vue'
import './style.css'
import App from '@/App.vue'
import router from '@/router/index' 导入路由
import store from '@/store/index'//导入状态管理
import Antd from 'ant-design-vue';//全局引入 Ant Design Vue
import 'ant-design-vue/dist/reset.css';

 //创建并挂载根实例
 const app =createApp(App)
 app.use(router)//整个应用支持路由
 app.use(store)//整个应用支持状态管理
 app.use(Antd)//整个应用 Ant Design Vue
//  挂载根应用
 app.mount('#app')

测试一下看有没有配置成功

<template>
    <div>
        <h1>用户页面</h1>   
        <a-space wrap>
            <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>
        </a-space>
    </div>
</template>

在这里插入图片描述