记录ant design Vue的按需引入配置过程

最新推荐文章于 2024-04-11 10:40:50 发布

原创最新推荐文章于 2024-04-11 10:40:50 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

前端学习专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中通过官方文档步骤，安装less-loader和babel-plugin-import，配置vue.config.js、postcss.config.js以及babel.config.js，实现Ant Design Vue组件的按需引入，并包括全局CSS的加载。重点涉及模块配置和代码示例。

按照官方文档给的说明，没有成功按需引入组件，查了一些资料后，总结为以下过程：

需要安装less-loader，命令为：npm install less --save-dev (版本可能是4.1.1)
安装babel-plugin-import插件，命令为：npm i babel-plugin-import
在项目根目录，新建文件vue.config.js文件，文件内容为：

module.exports = {
    css: {
      loaderOptions: {
        css: {
          // 这里的选项会传递给 css-loader
        },
        postcss: {
          // 这里的选项会传递给 postcss-loader
        },
        less:{
           // 这里的选项会传递给 less-loader
            javascriptEnabled: true,
        }
      }
    }
  }

新建postcss.config.js文件，文件内容为：

module.exports = { 
    plugins: { 
      'autoprefixer': {browsers: 'last 5 version'} 
    } 
  }

修改babel.configs.js文件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
 plugins: [
    [
      "import",
        { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
   ]
 ]
}

修改src/main.js，直接使用以下代码引入：

import { Button } from 'ant-design-vue';

如果要全局引入，代码如下：

import Antd from 'ant-design-vue/es';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);