我要评论前言
市面上前端UI框架可以说是很多很多，今天想和大家一起聊一聊如何在vue项目中使用antd UI框架（因为之前在react项目中一直是用的antd UI框架，感觉整体风格挺不错），接下来就从安装脚手架-》创建项目-》安装antd框架-》引用antd一步一步来探索吧
1、安装vue脚手架
cnpm install -g @vue/cli
//如果之前已经安装过请跳过2、创建vue项目（antd-demo）
vue create antd-demo
//我使用的是vue 2.x版本3.安装antd
cnpm install ant-design-vue --save
//注意：需要安装ant-design-vue（区别于在react项目中的安装命令 antd --save）4、安装过程中报错处理
按照提示安装vue-template-compiler和core-js@3
cnpm install vue-template-compiler@>=2.6.0
cnpm install core-js@3
5.引入antd组件
a、全局引入并注册（main.js）
修改main.js
import Vue from 'vue';
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
import App from './App';Vue.component(Button.name, Button);
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
}).$mount('#app');
修改 src/App.vue的 template 内容
//注意：由于是全局引用，所以不需要在页面单独引用
<template>
<div id="app">
<a-button type="primary">Button></a-button>
</div>
</template><script>
export default {
name: "App",
components: {},
};
</script><style>
</style>
b、按需加载引用 （推荐）
使用cnpm安装babel-plugin-import包
cnpm install babel-plugin-import --dev修改babel.config.js文件，配置 babel-plugin-import
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
}
然后删除main.js 里全局引用的 import 'ant-design-vue/dist/antd.css'; 样式代码，最终main.js内容如下
import Vue from 'vue'
import App from './App.vue'
import { Button } from 'ant-design-vue';
Vue.component(Button.name, Button);
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
6、启动项目
运行npm run serve ，奇了怪了，有报错了，好吧，先看报错信息（没有报错的请忽略）
那就乖乖的先按照提示安装less-loader
cnpm install less-loader
执行后，又出现了依赖包的问题，如下
怎么办呢，接着安装吧，运行cnpm install less
安装完成后，再次运行npm run serve, 错误又来了，如下
出现此问题的原因是因为less的版本太高，可以通过降低less版本到2.x，也可以通过增加less-loader里面的配置来解决
找到node_modules\less-loader\dist\index.js文件，然后在对象lessOptions下行添加如下代码即可
lessOptions.javascriptEnabled=true;
再次运行npm run serve，正常运行
说明：目前页面中只有一个antd button组件
总结
以上就是今天要讲的内容，虽然有些坎坷，不过也是一种积累过程吧，哈哈（自我安慰一下下），如上若有错漏的地方，请大家及时指出,多谢
本文地址：https://blog.csdn.net/liuzhenhe1988/article/details/108842220
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论