- 进入我们刚才创建的项目目录
cd vue_ant
- 安装多个组件
cnpm i --save ant-design-vue moment
// 安装最新版的ant-design-vue,支持vue3
cnpm i --save ant-design-vue@next
这里我们使用的是淘宝的景象cnpm,因为npm在国内使用很慢,这里安装了两个组件分别是ant-design-vue
和时间库moment
,多个组件同时安装,只需要在中间以空格隔开即可!
- 启动项目
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