0
539
VisualizaçõesHow to apply component in antdesign with vue-cli and vue 3?
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
3 Respostas
Responde à pergunta0
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.
0
I just ran the project and this is the displayed result.
Steps I followed.
npm install -g @vue/clivue create antd-demo- I selected the vue2 preset
cd antd-demonpm install ant-design-vue- modified src/main.js (as per docs)
- modified src/App.vue (as per docs)
npm run serve
0
In my case, my fault was that I chose vue3 and followed instructions in 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
(@next !)