第2讲：VUE3集成ant-design-vue第3版，配置使用自定义主题。

为什么选择V3，引用官方说明。

2.x 版本是为了兼容 Vue 3 开发的兼容版本，他并没有带来很多新的特性，大多数的 API 改变也只是为了更好的兼容 Vue 3。 3.x 版本在性能、易用性、功能上都有了很大的提升，3.x 版本稳定后，我们会归档 2.x 版本，建议您尽快升级 3.x 版本。虽然有很多改动，但基本都做了兼容，你可以按照控制台给出的警告逐步升级。

cd dvtop-designer
npm install [email protected] --save

注意：此刻ant-design-vue V3还是alpha版，注意关注下面版本，及时更新。ant-design-vue - npmAn enterprise-class UI design language and Vue-based implementationhttps://www.npmjs.com/package/ant-design-vue

开发工具推荐选用Visual Studio Code，针对antdv可以安装Ant Design Vue helper。Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/

 定制antdv主题，首先将less-loader从5升级到6

npm uninstall less-loader
npm install less-loader@6 -D

新增vue.config.js配置，如下内容。

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
				  javascriptEnabled: true
        }
      }
    },
  },
};

新增项目主题文件theme-default.less，如下内容。

// 引入官方提供的 less 样式入口文件
@import '~ant-design-vue/dist/antd.less';

// 以下为项目自定义主题样式
@primary-color: red;

在 main.ts文件中集成antdv

const app = createApp(App);

//引入antd所有组件的样式和定制主题
import './assets/css/theme-default.less'; // 用于覆盖上面定义的变量
//完整引入antd组件；也可按官方说明按需加载
import Antd from 'ant-design-vue';
app.use(Antd);

app.config.performance = true;
app.use(store).use(router).mount('#app')

运行如下代码，在浏览器中打开http://127.0.0.1:8080/即可访问。

cd dvtop-designer 
npm run serve