手记

【金秋打卡】第21天 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. 局部引入
    为了减小打包大小,提高加载速度,更推荐这种做法
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
      }
    }
  }
}

0人推荐
随时随地看视频
慕课网APP