0
542
Views¿Cómo aplicar el componente en antdesign con vue-cli y vue 3?
Ya sigo las instrucciones en los documentos aquí .
Esto es lo que hice
vue create example-app cd example-appElijo el preajuste vue 3.
luego cambie el script en 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'); aquí está mi archivo 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>Pero, ¿por qué no hay un componente de botón en la pantalla? todo lo que tengo es una pantalla en blanco
3 answers
Answer question0
No he podido reproducir lo que se menciona aquí. el código funciona perfectamente. Creo que probablemente hay algo dejado fuera de su escritura.
aquí está el código de trabajo. intenta comparar esto con el tuyo.
https://codesandbox.io/s/cocky-leftpad-hbi3i?file=/src/App.vue
Para Vue 3, las cosas siguen siendo prácticamente iguales. Vue 3 utiliza un método de instalación de complemento diferente.
// 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')este código no es mío pero muestra lo mismo.
0
Acabo de ejecutar el proyecto y este es el resultado que se muestra.
Pasos que seguí.
-
npm install -g @vue/cli -
vue create antd-demo - Seleccioné el preajuste vue2
-
cd antd-demo -
npm install ant-design-vue - src/main.js modificado (según documentos)
- src/App.vue modificado (según documentos)
-
npm run serve
0
En mi caso, mi culpa fue que elegí vue3 y seguí las instrucciones en https://antdv.com/docs/vue/getting-started/ , pero tuve que seguir https://2x.antdv.com/docs/vue/ empezando
npm i --save ant-design-vue@next
(@próximo !)