说明
【Vue 开发实战】学习笔记。
解决 less 配置问题
main.js 文件添加配置
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import Antd from "ant-design-vue"; // 需要自定义样式主题，这里使用less import "ant-design-vue/dist/antd.less"; Vue.config.productionTip = false; Vue.use(Antd); new Vue({ router, store, render: h => h(App) }).$mount("#app");
https://github.com/ant-design/ant-motion/issues/44
这个问题有下面两种方式：第一种是降低less版本，另一个是配置css的 less-loader，我们使用第二种
查看 vuecli 的 官网配置https://cli.vuejs.org/zh/config/#css-loaderoptions
我们新建 vue.config.js 文件，添加下面的配置
module.exports = { css: { loaderOptions: { less: { javascriptEnabled: true }, } } }
然后重新启动一下，发现就没有报错了。
我们在 App.vue 组件里添加下面代码
<template> <div id="app"> <a-button>按钮</a-button> </div> </template> <style lang="less"></style>
按需引入 ant-design-vue 组件
我们可以看到全局注册所有组件会很大
我们可以使用到的时候在引入
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; // import Antd from "ant-design-vue"; // // 需要自定义样式主题，这里使用less // import "ant-design-vue/dist/antd.less"; import Button from "ant-design-vue/lib/button"; import 'ant-design-vue/lib/button/style'; Vue.config.productionTip = false; // Vue.use(Antd); Vue.use(Button); new Vue({ router, store, render: h => h(App) }).$mount("#app");
我们可以看到小了很多，但是这样还是很不方便，需要每个都这样去引入单个组件的东西
如果你使用了 babel，那么可以使用 babel-plugin-import 来进行按需加载。
具体可以参考https://1x.antdv.com/docs/vue/introduce-cn/
我们按照文档上的添加babel配置，修改 babel.config.js 配置
module.exports = { presets: ["@vue/cli-plugin-babel/preset"], "plugins": [ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true // 会加载 less 文件 }] ] };
安装依赖
npm i babel-plugin-import -D
修改 main.js 文件里的引入组件方式
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; // import Antd from "ant-design-vue"; // // 需要自定义样式主题，这里使用less // import "ant-design-vue/dist/antd.less"; // import Button from "ant-design-vue/lib/button"; // import 'ant-design-vue/lib/button/style'; import { Button } from "ant-design-vue"; Vue.config.productionTip = false; // Vue.use(Antd); Vue.use(Button); new Vue({ router, store, render: h => h(App) }).$mount("#app");
重启下服务，我们可以看到效果是一样的。
