vue項目引入antDesignUI組件實現(xiàn)

更新時間：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組件實現(xiàn)的文章就介紹到這了,更多相關vue 引入antDesignUI內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue中使用Sortable的示例代碼
這篇文章主要介紹了Vue中使用Sortable的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-04-04
vue中遇到scrollIntoView無效問題及解決
這篇文章主要介紹了vue中遇到scrollIntoView無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
VUE項目初建和常見問題總結
在本篇文章里小編給大家整理的是關于VUE 項目初建和常見問題以及相關知識點內容，有需要的朋友們學習下。
2019-09-09
Vue中深克隆的3種實現(xiàn)方案
本文介紹了三種Vue開發(fā)中常用的深克隆實現(xiàn)方法,分別適用于不同場景,方案一適用于普通對象和數(shù)組,方案二適用于所有數(shù)據(jù)類型,方案三專門適配Vue的響應式數(shù)據(jù),每種方案都有其優(yōu)點和缺點,開發(fā)時可根據(jù)具體需求選擇合適的的方法,提高開發(fā)效率,需要的朋友可以參考下
2026-04-04
vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件
這篇文章主要介紹了vue環(huán)境如何實現(xiàn)div?focus?blur焦點事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
elementui 開始結束時間可以選擇同一天不同時間段的實現(xiàn)代碼
這篇文章主要介紹了elementui 開始結束時間可以選擇同一天不同時間段的實現(xiàn)代碼,需要先在main.js中導入相應代碼,代碼簡單易懂,需要的朋友可以參考下
2024-02-02
elementUI中input回車觸發(fā)頁面刷新問題與解決方法
這篇文章主要給大家介紹了關于elementUI中input回車觸發(fā)頁面刷新問題與解決方法,文中通過實例代碼介紹的非常詳細,對大家學習或者使用elementUI具有一定的參考學習價值,需要的朋友可以參考下
2023-07-07
在Vue中實現(xiàn)不刷新的iframe頁面的方案
在Vue項目中,我們可能會遇到這樣的需求：需要在應用中嵌入iframe頁面,并且要求在路由切換的過程中,iframe的內容不會被刷新,本文將介紹如何解決這個問題,并給出具體的實現(xiàn)方案,需要的朋友可以參考下
2025-01-01
快速解決electron-builder打包時下載依賴慢的問題
使用 Electron-builder 打包,有時會在下載Electron、nsis、winCodeSign的過程中 Timeout 導致打包失敗,本文給大家分享快速解決electron-builder打包時下載依賴慢的問題,感興趣的朋友一起看看吧
2024-02-02
vue實現(xiàn)打包添加二級目錄
這篇文章主要介紹了vue實現(xiàn)打包添加二級目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07