ant-design-vue使用之路

最新推荐文章于 2024-08-11 15:33:20 发布

菜鸟中的菜菜鸟

最新推荐文章于 2024-08-11 15:33:20 发布

阅读量2.6w

点赞数 5

分类专栏：菜鸡啄食——Vue 文章标签： vue js webpack

本文链接：https://blog.csdn.net/qq_39692513/article/details/111468260

版权

本文介绍了如何在Vue项目中引入和使用ant-design-vue，强调了局部引入以减小打包体积。内容涵盖全局和局部引入，包括组件和图标的引入。接着，文章讲解了message的使用方法，日期范围组件的本地化配置，以及组件化的实用技巧，如list和form的处理。最后，探讨了利用webpack分析插件进行性能优化，特别是针对强依赖如moment的处理。

摘要由CSDN通过智能技术生成

引入ant-design-vue

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

局部引入图标

按需采用吧，而且要注意ant-design-vue组件中，自带的图标，也要引用进来，不然组件图标会消失。

1 在项目中创建文件icons.ts ，引入并导出你需要的图标
export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill'
export { default as QuestionCircleTwoTone } from '@ant-design/icons/lib/twotone/QuestionCircleTwoTone'
export { default as ForkOutline } from '@ant-design/icons/lib/outline/ForkOutline'
2 在vue.config.js中配置将从npm包中导入映射从你创建的文件中导入
module.exports = {
 configureWebpack: {
    resolve: {
      alias: {
        '@ant-design/icons/lib/dist$