vue項(xiàng)目引入antDesignUI組件實(shí)現(xiàn)
更新時(shí)間：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項(xiàng)目引入antDesignUI組件實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue 引入antDesignUI內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
作為一個(gè)全棧開發(fā)人員,前端UI框架和網(wǎng)絡(luò)請(qǐng)求都得有基本的掌握,我以最簡潔易懂的方式講解axios的使用和全局baseURL的配置2024-05-05
最近項(xiàng)目中有用到j(luò)son編輯器,我選用了這款vue的編輯器,看起來也是比較簡潔,接下來就具體介紹一下它,下面這篇文章主要給大家介紹了關(guān)于VUE3使用JSON編輯器的詳細(xì)圖文教程,需要的朋友可以參考下2023-04-04
詳解用vue-cli來搭建vue項(xiàng)目和webpack
本篇文章主要介紹了詳解用vue-cli來搭建vue項(xiàng)目和webpack，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
這篇文章主要介紹了總結(jié)vue映射的方法與混入的使用過程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽
這篇文章主要為大家介紹了使用vNode實(shí)現(xiàn)給列表字段打標(biāo)簽示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法，文中給大家提到了在vue-test-utils 中 mock 全局對(duì)象的相關(guān)知識(shí) ,需要的朋友可以參考下2018-11-11
Vue實(shí)現(xiàn)返回頂部按鈕實(shí)例代碼
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)返回頂部按鈕的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)的示例詳解
在Vue2.x中，編寫組件的方式是使用Options API，它的特點(diǎn)是在對(duì)應(yīng)的屬性中編寫對(duì)應(yīng)的功能模塊，這篇文章主要介紹了Vue組合式API--setup中定義響應(yīng)式數(shù)據(jù)詳解,需要的朋友可以參考下2022-10-10
在現(xiàn)代社會(huì)中,了解血型遺傳規(guī)律對(duì)于優(yōu)生優(yōu)育、醫(yī)療健康等方面都有重要意義,本文將介紹如何使用Uniapp開發(fā)一個(gè)跨平臺(tái)的血型遺傳查詢工具,幫助用戶預(yù)測孩子可能的血型,感興趣的朋友一起看看吧2025-04-04
vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式
這篇文章主要介紹了vue復(fù)雜表格單元格合并根據(jù)數(shù)據(jù)動(dòng)態(tài)合并方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02