antd 安装

最新推荐文章于 2024-10-07 16:56:37 发布

lcqbug001

最新推荐文章于 2024-10-07 16:56:37 发布

阅读量2.5k

点赞数

文章标签： vue npm

本文链接：https://blog.youkuaiyun.com/andy_csdn007/article/details/115073286

版权

本文档详细介绍了在Vue3.0项目中使用Ant Design Vue的步骤，包括确保Node和npm环境，安装@vue/cli 5.0.0-alpha.7，创建工程，添加antd组件库，并在main.js和Home.vue中引入组件，最终实现antd设计库的搭建。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ant design of vue环境安装

本项目都是以最新版为准的,截止目前 vue3.0
脚手架 @vue/cli 5.0.0-alpha.7
node版本 v14.16.0

1.准备好 node环境,npm环境
2.安装脚手架

npm install -g @vue/cli@next

3 创建工程

vue create xxx

4 添加antd 版本组件库

npm i save ant-design-vue@next -S

然后用webstorm打开项目

cd xxx(项目名)
npm run serve

如果使用antd,全局引入组件

在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'#这里

createApp(App).use(store).use(Antd).use(router).mount('#app')#这里

在Home.vue组件中引入antd的组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    #这里
    <a-button type="primary">
      Primary
    </a-button>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  }
}
</script>