vue项目引入antDesignUI组件实现
更新时间：2023年08月17日 14:57:28 作者：秋田君
本文介绍了如何以Vue引入antDesignUI,主要包括下载安装、配置和引入组件等步骤,通过本文,读者可以快速了解antDesignUI在Vue中的应用,感兴趣的可以了解一下
快速安装ant-design-vue并配置，vue2.0 + antDesign@1.7.8
第一步：安装ant-deisgn-vue 1.7.8
npm install ant-design-vue@1.7.8 --save
第二步：配置package.json文件，将依赖写入后，npm install 安装依赖
"dependencies": {
"ant-design-vue": "^1.7.8",
"less": "^4.1.3",
"less-loader": "^6.2.0",
},
"devDependencies": {
"babel-plugin-import": "^1.13.8",
}第三步：配置vue.config.js文件
css: {
requireModuleExtension: true,
loaderOptions: {
sass: {
sassOptions: { outputStyle: "expanded" }
},
less: {
lessOptions:{
javascriptEnabled: true,
modifyVars: {
//在此处设置，也可以设置直角、边框色、字体大小等
'primary-color': '#68BDA8',
},
}
}
}
},第四步：配置babel.config.js文件，加入plugins
module.exports = {
presets: [
// https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
}第五步：main引入antDesign ui 组件
//引入less
import "ant-design-vue/dist/antd.less"
//使用antDesign-vue中的tree组件
import { Tree } from 'ant-design-vue';
import { Table } from 'ant-design-vue';
import { Icon } from 'ant-design-vue';
// 全局组件挂载
Vue.component('ATree', Tree)
Vue.component('ATable', Table)
Vue.component('AIcon', Icon)引入成功，使用antDesign-vue 中tree组件效果如下：
到此这篇关于vue项目引入antDesignUI组件实现的文章就介绍到这了,更多相关vue 引入antDesignUI内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了Vue中使用Lodash的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了Vue如何使用fabric.js实现局部截图与el-image-viewer大图预览功能,文中的示例代码讲解详细,感兴趣的可以了解下2024-02-02
这篇文章主要为大家详细介绍了Vue3如何使用echarts实现绘制一些特殊样式的折线图和柱状图,文中的示例代码讲解详细,需要的小伙伴可以了解下2024-02-02
Reflect可以操作对象使用， proxy可以代理对象，但没有找到为啥有时一定要在Proxy代理方法中使用Reflect，这篇文章主要介绍了vue3中的Proxy一定要用Reflect的原因解析,需要的朋友可以参考下2023-04-04
这篇文章主要介绍了Vue 防止短时间内连续点击后多次触发请求的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
vue2.x中h函数(createElement)与vue3中的h函数详解
h函数本质就是createElement(),h函数其实是createVNode的语法糖,返回的就是一个Js普通对象,下面这篇文章主要给大家介绍了关于vue2.x中h函数(createElement)与vue3中h函数的相关资料,需要的朋友可以参考下2022-12-12
computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下2022-10-10
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
这篇文章主要介绍了父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了基于vue hash模式微信分享#号的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家介绍了页面tooltip组件的限制工具函数使用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
最新评论