【金秋打卡】第21天 Web前端架构师2022版

课程名称：Web前端架构师2022版

课程章节： 第9周 项目整体搭建

主讲老师：张轩

课程内容：

今天学习的内容包括：

4-1 安装 ant-design-vue 组件库
4-2 使用 ant-design-vue 搭建页面框架

课程收获：

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

特性

• 提炼自企业级中后台产品的交互语言和视觉风格。
• 开箱即用的高质量 Vue 组件。
• 共享 Ant Design of React 设计工具体系。

支持环境

• 现代浏览器和 IE9 及以上（需要 polyfills）。
• 支持服务端渲染。

安装

1.全局引入

1. 命令行使用npm安装
npm install ant-design-vue --save
2. main.ts文件中导入
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

2. 局部引入
   为了减小打包大小，提高加载速度，更推荐这种做法

1. 命令行安装ant-design-vue包
npm install ant-design-vue --save

2 创建antPlugin.js文件，按需引入组件都可在这个文件中写，以button组件为例
import Vue from 'vue'
import {Button} from 'ant-design-vue' // 官方文档中组件去掉a，首字母大写如a-form-model， 按需引入组件就是 FormModel
Vue.use(Button)

3 main.ts 导入此文件
import ‘@/util/antPlugin’

4 babel.config.js 添加import插件，自动引入组件对应样式
module.exports = {
  // ...
  plugins: [
    [
      'import',
      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }
    ]
  ]
}

5 坑
引入样式时，需要npm安装less-loader去解析，less-loader版本过高超过6.0后，会报错。
需手动设置javascriptEnabled。故我们在vue.config.js文件中设置(*楼主当时设置了好多遍也没起效，最后发现是less-loader没安装完全，多安装几次就好了*)
modules.exports = {
  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}