vue+antd前端入门-项目初始化

1、创建vue项目

vue create 项目名称

2、引入vue-router

npm install vue-router --save

3、引入ant-design-vue

npm i --save ant-design-vue

完整引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

const app = createApp(App)

app.use(Antd)
app.use(router)
app.mount('#app')

注意：样式文件需要单独导入

Ant Design Vue ——antd文档

4、按需加载：babel-plugin-import

引入babel-plugin-import: yarn add babel-plugin-import -D

变更babel.config.js配置文件：

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

使用按需加载：

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