快速安裝ant-design-vue并配置，vue2.0 + antDesign@1.7.8文章來源：http://www.zghlxwxcb.cn/news/detail-662321.html
第一步：安裝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組件效果如下：
完結~文章來源地址http://www.zghlxwxcb.cn/news/detail-662321.html
到了這里，關于vue項目引入antDesignUI組件的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
