Vue项目如何ant-design-vue框架？

  1. 进入我们刚才创建的项目目录cd vue_ant
  2. 安装多个组件
cnpm i --save ant-design-vue moment

// 安装最新版的ant-design-vue,支持vue3
cnpm i --save ant-design-vue@next

这里我们使用的是淘宝的景象cnpm，因为npm在国内使用很慢，这里安装了两个组件分别是ant-design-vue和时间库moment,多个组件同时安装，只需要在中间以空格隔开即可！

  1. 启动项目
npm run serve

全局引入组件

在main.js文件中全局引入组件ant-design-vue

import { createApp } from "vue";
import Antd from 'ant-design-vue'
import App from "./App.vue";
// 引入css样式
// import 'ant-design-vue/dist/antd.css'

// 引入less样式,这里会报错
import 'ant-design-vue/dist/antd.less'

const app = createApp(App)

// 关闭生产模式下的提示
app.config.productionTip = false;

app.use(store)
   .use(router)
   .use(Antd)
   .mount("#app");

引入less样式后，项目会保存，解决方案是，在项目根目录创建一个vue.config.js的文件，插入如下配置：

官方文档：

https://cli.vuejs.org/zh/config/#css-loaderoptions

module.exports = {
    css: {
      loaderOptions: {
        less: {
          javascriptEnabled: true
        },
      }
    }
  }

必须开启webpack中javascript配置，重启项目即可解决！

按需引入组件

在main.js文件中按需引入组件ant-design-vue

// 按需引入
import { Button } from "ant-design-vue/lib/button"
import 'ant-design-vue/lib/button/style'

app.use(Button)

把相关的地方替换即可，引入哪一个加载哪一个！

如果我们要使用很多这样的组件，手动引入将是一个非常庞大的工程，也不够简洁，那么我们可以通过babel的一个插件去解决这个问题！

  • 在babel.config.js中引入以下内容即可！
plugins: [
    [
      "import",
      { 
        libraryName: "ant-design-vue", 
        libraryDirectory: "es", 
        style: true 
      }
    ]
  ]  // 'style: true' 会加载less文件， css的话直接设置为'style: css'

之后样式我们也不需要单独引入，只需要像下边这样引入即可,原来视频中的讲解这里有语法错误，plugins是一个数组，可以设置多个，如果要设置单个的话并且传入了自定义参数，那么这里也是一个数组，所以就是数组嵌套数组的写法！

import { Button } from "ant-design-vue"

还必须要安装babel-plugin-import

cnpm i --save-dev babel-plugin-import