脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 axios的使用和全局baseURL配置方式

    Vue axios的使用和全局baseURL配置方式

    作为一个全栈开发人员,前端UI框架和网络请求都得有基本的掌握,我以最简洁易懂的方式讲解axios的使用和全局baseURL的配置
    2024-05-05
  • VUE3使用JSON编辑器的详细图文教程

    VUE3使用JSON编辑器的详细图文教程

    最近项目中有用到json编辑器,我选用了这款vue的编辑器,看起来也是比较简洁,接下来就具体介绍一下它,下面这篇文章主要给大家介绍了关于VUE3使用JSON编辑器的详细图文教程,需要的朋友可以参考下
    2023-04-04
  • 详解用vue-cli来搭建vue项目和webpack

    详解用vue-cli来搭建vue项目和webpack

    本篇文章主要介绍了详解用vue-cli来搭建vue项目和webpack，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-04-04
  • 总结vue映射的方法与混入的使用过程

    总结vue映射的方法与混入的使用过程

    这篇文章主要介绍了总结vue映射的方法与混入的使用过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • 使用vNode实现给列表字段打标签

    使用vNode实现给列表字段打标签

    这篇文章主要为大家介绍了使用vNode实现给列表字段打标签示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • 在vue中使用express-mock搭建mock服务的方法

    在vue中使用express-mock搭建mock服务的方法

    这篇文章主要介绍了在vue中使用express-mock搭建mock服务的方法，文中给大家提到了在vue-test-utils 中 mock 全局对象的相关知识 ,需要的朋友可以参考下
    2018-11-11
  • Vue实现返回顶部按钮实例代码

    Vue实现返回顶部按钮实例代码

    这篇文章主要给大家介绍了关于Vue实现返回顶部按钮的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • Vue组合式API--setup中定义响应式数据的示例详解

    Vue组合式API--setup中定义响应式数据的示例详解

    在Vue2.x中，编写组件的方式是使用Options API，它的特点是在对应的属性中编写对应的功能模块，这篇文章主要介绍了Vue组合式API--setup中定义响应式数据详解,需要的朋友可以参考下
    2022-10-10
  • 如何用 Deepseek 写的uniapp血型遗传查询工具

    如何用 Deepseek 写的uniapp血型遗传查询工具

    在现代社会中,了解血型遗传规律对于优生优育、医疗健康等方面都有重要意义,本文将介绍如何使用Uniapp开发一个跨平台的血型遗传查询工具,帮助用户预测孩子可能的血型,感兴趣的朋友一起看看吧
    2025-04-04
  • vue复杂表格单元格合并根据数据动态合并方式

    vue复杂表格单元格合并根据数据动态合并方式

    这篇文章主要介绍了vue复杂表格单元格合并根据数据动态合并方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02

最新评论