脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 引入antDesignUI

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中使用Sortable的示例代码

    Vue中使用Sortable的示例代码

    这篇文章主要介绍了Vue中使用Sortable的示例代码,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • vue中遇到scrollIntoView无效问题及解决

    vue中遇到scrollIntoView无效问题及解决

    这篇文章主要介绍了vue中遇到scrollIntoView无效问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • VUE项目初建和常见问题总结

    VUE项目初建和常见问题总结

    在本篇文章里小编给大家整理的是关于VUE 项目初建和常见问题以及相关知识点内容，有需要的朋友们学习下。
    2019-09-09
  • Vue中深克隆的3种实现方案

    Vue中深克隆的3种实现方案

    本文介绍了三种Vue开发中常用的深克隆实现方法,分别适用于不同场景,方案一适用于普通对象和数组,方案二适用于所有数据类型,方案三专门适配Vue的响应式数据,每种方案都有其优点和缺点,开发时可根据具体需求选择合适的的方法,提高开发效率,需要的朋友可以参考下
    2026-04-04
  • vue环境如何实现div focus blur焦点事件

    vue环境如何实现div focus blur焦点事件

    这篇文章主要介绍了vue环境如何实现div focus blur焦点事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • elementui 开始结束时间可以选择同一天不同时间段的实现代码

    elementui 开始结束时间可以选择同一天不同时间段的实现代码

    这篇文章主要介绍了elementui 开始结束时间可以选择同一天不同时间段的实现代码,需要先在main.js中导入相应代码,代码简单易懂,需要的朋友可以参考下
    2024-02-02
  • elementUI中input回车触发页面刷新问题与解决方法

    elementUI中input回车触发页面刷新问题与解决方法

    这篇文章主要给大家介绍了关于elementUI中input回车触发页面刷新问题与解决方法,文中通过实例代码介绍的非常详细,对大家学习或者使用elementUI具有一定的参考学习价值,需要的朋友可以参考下
    2023-07-07
  • 在Vue中实现不刷新的iframe页面的方案

    在Vue中实现不刷新的iframe页面的方案

    在Vue项目中,我们可能会遇到这样的需求：需要在应用中嵌入iframe页面,并且要求在路由切换的过程中,iframe的内容不会被刷新,本文将介绍如何解决这个问题,并给出具体的实现方案,需要的朋友可以参考下
    2025-01-01
  • 快速解决electron-builder打包时下载依赖慢的问题

    快速解决electron-builder打包时下载依赖慢的问题

    使用 Electron-builder 打包,有时会在下载Electron、nsis、winCodeSign的过程中 Timeout 导致打包失败,本文给大家分享快速解决electron-builder打包时下载依赖慢的问题,感兴趣的朋友一起看看吧
    2024-02-02
  • vue实现打包添加二级目录

    vue实现打包添加二级目录

    这篇文章主要介绍了vue实现打包添加二级目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07

最新评论