javascript - 如何使用 vue-cli 和 vue 3 在 antdesign 中应用组件？

Question

我已经按照文档中的说明进行操作 here .

这是我做的

vue create example-app
cd example-app

我选择 vue 3 预设。

然后更改main.js中的脚本

import Vue from 'vue';
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
import App from './App';

Vue.component(Button.name, Button);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

这是我的 App.js 文件

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a-button type="primary">Button</a-button>
  </div>
</template>

<script>

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

<style>

</style>

但是为什么屏幕上没有Button组件呢？我得到的只是黑屏

Answer 1

我未能重现此处提到的内容。该代码完美运行。我认为您的写作中可能遗漏了一些内容。

这是工作代码。尝试将此与您的进行比较。

https://codesandbox.io/s/cocky-leftpad-hbi3i?file=/src/App.vue

---

对于 Vue 3，情况仍然非常相似。 Vue 3 使用不同的插件安装方法。

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

const app = createApp(App)

app.use(Antd) // same as Vue.use in Vue 2.X
app.mount('#app')

这段代码不是我的，但它显示了同样的东西。

https://codesandbox.io/s/vue3-antd-xzk1x?file=/src/main.js