Closed mapsgeek closed 5 years ago
How are you using it in the template?
here's what i do
<template>
<section class="container">
<div>
<a-button type="primary">Primary</a-button>
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="danger">Danger</a-button>
</div>
</section>
</template>
<script>
import Button from 'ant-design-vue/lib/button';
export default {
components: {
Button
}
}
</script>
i figured it out working by adding
export default {
components: {
'a-button' : Button
}
}
but i want to confirm if i'm doing it right
If you use
export default {
components: {
Button
}
}
you should use it like
<Button type="primary">Primary</Button>
You can use default name by
export default {
components: {
[Button.name]: Button
}
}
thank you for making it clear, i also tried to use babel-plugin-import so it import style file automatically, instead of me defining each single style file like this for every component
css: ['ant-design-vue/lib/button/style/css']
i created a .bablerc and put
{
"plugins": [
[
"import",
{
"libraryName": "ant-design-vue",
"libraryDirectory": "es",
"style": "true"
}
]
]
}
as in documentation but i don't know what should i add to the nuxt.config, build object
when i user antd in nuxt2, i got 'TypeError: 对象不支持“remove”属性或方法' error, seems it is caused in a (react.element). anyone has idea?
@mapsgeek Nuxt doesn’t read the .babelrc file. Instead, you have to place the snippet into the build
option inside nuxt.config.js like so:
export default {
...
css: [
{ src: 'ant-design-vue/dist/antd.less', lang: 'less' },
],
plugins: [
{ src: '@/plugins/antd.js' },
],
build: {
babel: {
plugins: [ // Must exclude "style: true"
['import', { libraryName: 'ant-design-vue' }, 'ant-design-vue'],
],
},
loaders: {
less: {
javascriptEnabled: true,
modifyVars: {
'font-size-base': '15px', // Example overwrite
},
},
},
},
...
}
Ensure that you npm i less less-loader
and npm i -D babel-plugin-import
for the above code to work. The antd.js plugin can look like this: https://github.com/vueComponent/ant-design-vue/blob/master/site/components.js
css: [ { src: 'ant-design-vue/dist/antd.less', lang: 'less' }, ], plugins: [ { src: '@/plugins/antd.js' }, ], build: { babel: { plugins: [ // Must exclude "style: true" ['import', { libraryName: 'ant-design-vue' }, 'ant-design-vue'], ], }, loaders: { less: { javascriptEnabled: true, modifyVars: { 'font-size-base': '15px', // Example overwrite }, }, }, },
Do you mean npm i less less-loader
?
Do you mean
npm i less less-loader
?
@loganpowell Oops, I amended my reply. Thanks!
This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
importing ant-design-vue works fine using plugins by importing either all the library
import Antd from 'ant-design-vue';
orimport Button from 'ant-design-vue/lib/button';
which will import a a single component but this import is global to all pages what i have been trying to do is to import certain components in certain pages only to take advantage of lazy loading i tried<script> import Button from 'ant-design-vue/lib/button'; export default { components: { Button } } </script>
in the specific page i want but it doesn't work with an error that component isn't registered