【金秋打卡】第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';

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

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
      }
    }
  }
}

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