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

user_12402567 0
Viewed 2076

I already follow the instruction on the docs here.

This is what I did

vue create example-app
cd example-app

I choose the vue 3 preset.

then change the script in 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');

here's my App.js file

<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>

But why there is no Button component on the screen? all I got is blank screen

antd vue.js javascript
3 Answers

I've failed to reproduce what's mentioned here. the code works perfectly. I think probably there's something left out from your writing.

here's the working code. try compare this with yours.

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

For Vue 3, things are still pretty much the same. Vue 3 uses different plugin install method.

// 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')

this code isn't mine but it shows the same thing.

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

user_92927700
user_12166350

enter image description here

I just ran the project and this is the displayed result.

Steps I followed.

  1. npm install -g @vue/cli
  2. vue create antd-demo
  3. I selected the vue2 preset
  4. cd antd-demo
  5. npm install ant-design-vue
  6. modified src/main.js (as per docs)
  7. modified src/App.vue (as per docs)
  8. npm run serve
user_31603230
Related