Vue进阶（幺幺零）：ant-design-vue，前端面试常用算法结尾正式学习前端大概 3 年多了，很早就想整理这个

结尾

正式学习前端大概 3 年多了，很早就想整理这个书单了，因为常常会有朋友问，前端该如何学习，学习前端该看哪些书，我就讲讲我学习的道路中看的一些书，虽然整理的书不多，但是每一本都是那种看一本就秒不绝口的感觉。

以下大部分是我看过的，或者说身边的人推荐的书籍，每一本我都有些相关的推荐语，如果你有看到更好的书欢迎推荐呀。

前端学习书籍导图-1 开源分享：docs.qq.com/doc/DSmRnRG…

ant-design-vue是蚂蚁金服 Ant Design 官方唯一推荐的Vue版UI组件库，它其实是Ant Design的Vue实现，组件的风格与Ant Design保持同步，组件的html结构和css样式也保持一致。用下来发现它的确称得上为数不多的完整VUE组件库与开发方案集成项目。

下面具体讲解下该组件库的应用实践。

二、组件库安装

npm install ant-design-vue --save

如果你的网络环境不佳，推荐使用 cnpm。

三、引入

在main.js中全局引入并注册。

3.1 全部引入

import ant from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

Vue.use(ant)

3.2 引入部分组件

import {Button} from 'ant-design-vue'
import 'ant-design-vue/dist/antd.less'

Vue.use(Button)

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

四、应用

直接在项目中可以使用，在antd官网复制即可。

<a-button type="primary">Primary</a-button>

注：请严格按照官方文档操作，否则会错的很离谱。

例如，应用icon图标时，正确使用方式如下：

<a-icon type="fullscreen"/>

而绝非如下方式：

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue进阶（幺幺零）：ant-design-vue，前端面试常用算法

结尾