如何使用 vue-cli 和 vue 3 在 ant design 中应用组件？

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

Answer 2

我只是运行项目，这是显示的结果。

我遵循的步骤。

npm install -g @vue/cli
vue create antd-demo
我选择了vue2预设
cd antd-demo
npm install ant-design-vue
修改 src/main.js（根据文档）
修改 src/App.vue（根据文档）
npm run serve

Answer 3

就我而言，我的错误是我选择了 vue3 并遵循了 https://antdv.com/docs/vue/getting-started/, but had to follow https://2x.antdv.com/docs/vue/getting-started

中的说明

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

(@下一个!)

如何使用 vue-cli 和 vue 3 在 ant design 中应用组件？

How to apply component in antdesign with vue-cli and vue 3?

javascript

vue.js

antd