vue項目引入antDesignUI組件實(shí)現(xiàn)
更新時間：2023年08月17日 14:57:28 作者：秋田君
本文介紹了如何以Vue引入antDesignUI,主要包括下載安裝、配置和引入組件等步驟,通過本文,讀者可以快速了解antDesignUI在Vue中的應(yīng)用,感興趣的可以了解一下
快速安裝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: {
//在此處設(shè)置，也可以設(shè)置直角、邊框色、字體大小等
'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組件效果如下：
到此這篇關(guān)于vue項目引入antDesignUI組件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue 引入antDesignUI內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中使用Sortable的示例代碼,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了vue中遇到scrollIntoView無效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
在本篇文章里小編給大家整理的是關(guān)于VUE 項目初建和常見問題以及相關(guān)知識點(diǎn)內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-09-09
本文介紹了三種Vue開發(fā)中常用的深克隆實(shí)現(xiàn)方法,分別適用于不同場景,方案一適用于普通對象和數(shù)組,方案二適用于所有數(shù)據(jù)類型,方案三專門適配Vue的響應(yīng)式數(shù)據(jù),每種方案都有其優(yōu)點(diǎn)和缺點(diǎn),開發(fā)時可根據(jù)具體需求選擇合適的的方法,提高開發(fā)效率,需要的朋友可以參考下2026-04-04
vue環(huán)境如何實(shí)現(xiàn)div?focus?blur焦點(diǎn)事件
這篇文章主要介紹了vue環(huán)境如何實(shí)現(xiàn)div?focus?blur焦點(diǎn)事件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
elementui 開始結(jié)束時間可以選擇同一天不同時間段的實(shí)現(xiàn)代碼
這篇文章主要介紹了elementui 開始結(jié)束時間可以選擇同一天不同時間段的實(shí)現(xiàn)代碼,需要先在main.js中導(dǎo)入相應(yīng)代碼,代碼簡單易懂,需要的朋友可以參考下2024-02-02
elementUI中input回車觸發(fā)頁面刷新問題與解決方法
這篇文章主要給大家介紹了關(guān)于elementUI中input回車觸發(fā)頁面刷新問題與解決方法,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用elementUI具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2023-07-07
在Vue中實(shí)現(xiàn)不刷新的iframe頁面的方案
在Vue項目中,我們可能會遇到這樣的需求：需要在應(yīng)用中嵌入iframe頁面,并且要求在路由切換的過程中,iframe的內(nèi)容不會被刷新,本文將介紹如何解決這個問題,并給出具體的實(shí)現(xiàn)方案,需要的朋友可以參考下2025-01-01
快速解決electron-builder打包時下載依賴慢的問題
使用 Electron-builder 打包,有時會在下載Electron、nsis、winCodeSign的過程中 Timeout 導(dǎo)致打包失敗,本文給大家分享快速解決electron-builder打包時下載依賴慢的問題,感興趣的朋友一起看看吧2024-02-02
這篇文章主要介紹了vue實(shí)現(xiàn)打包添加二級目錄方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07