1回答

樱桃小胖子

2021-01-03

同学你好，关于同学的问题解答如下：

1、vue中使用ant design

（1）完整引入

①main.js中全局引入并注册

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)

②在页面中不再需要引入注册组件，可以直接使用所有的组件

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>
<script>
export default {}
</script>

（2）导入部分组件

①在main.js中导入并注册需要在项目中使用的组件

import { Button } from "ant-design-vue";
import 'ant-design-vue/lib/button/style/css'
Vue.component(Button.name, Button)

②在项目中可以直接使用这个已经注册的组件

<template>
    <div>
        <a-button type="primary">hello world</a-button>
    </div>
</template>
<script>
export default {}
</script>

（3）按需加载

ant-design-vue使用babel-plugin-import进行按需加载

①安装babel-plugin-import插件

npm i babel-plugin-import --save-dev

②修改.babelrc文件，在plugins节点下，添加下面这个配置项：

"plugins": ["transform-vue-jsx", "transform-runtime",
    [
        "import",
        {
            "libraryName": "ant-design-vue",
            "libraryDirectory": "lib",
            "style": "css"              
        }
    ]
]

③在需要使用相关组件的页面引入并注册即可按需加载

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>
<script>
import { Button } from 'ant-design-vue';
export default {
    components:{ AButton:Button },
}
</script>

2、关于在vue中修改ant默认样式，有2种方法，分别如下：

（1）打开ant官网，查看文档上面是否提供了可供修改的属性

（2）有的时候没提供这些可修改的属性，可以自己添加class进行修改，和写css一样，比如：

但是需要注意样式仅在当前标签生效，下面的子元素如果不是手动添加的而是ui框架提供的，通过该class去修改，子元素样式则不会生效。

页面结构如下

效果aaaaaaaaa生效，下面的子元素li不生效

​

祝学习愉快！

0