vue3 ant design的按需引入

莉莉今天学习了咩

已于 2023-04-03 22:47:37 修改

阅读量640

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-04-03 22:40:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_68557949/article/details/129941518

版权

1.下载依赖包

npm i ant-design-vue --save

npm i babel-plugin-import --dev

npm i less less-loader --save-dev

2.在babel.config.js里配置

{
    "plugins": [
      ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件
    ]
  }

3.在vue.config.js里进行css解析配置

module.exports = {
    css: {
      loaderOptions: { // 向 CSS 相关的 loader 传递选项
        less: {
          javascriptEnabled: true
        }
      }
    }
  }

4.创建ant-design文件夹并创建index.ts文件，index.ts内容如下

import { 
    Button,
    TimePicker,
     Layout,
     Breadcrumb,
     Menu
    } from "ant-design-vue";

const components = [
    Button,
    TimePicker, 
    Layout,
    Breadcrumb,
    Menu
]

export default function Antd(app: any) {
  components.forEach((component) => {
    app.use(component)
  })
}

5.在main.ts里引入Antd

import 'ant-design-vue/dist/antd.css'
import Antd from "./ant-design/index";
const app = createApp(App)
Antd(app)
app.use(store).use(router).mount('#app')

6.就可在页面进行使用啦

<template>
  <div>
    <a-button type="primary" danger>Primary</a-button>
    <a-button danger>Default</a-button>
    <a-button type="dashed" danger>Dashed</a-button>
    <a-button type="text" danger>Text</a-button>
    <a-button type="link" danger>Link</a-button>
  </div>
</template>

如图展示：