第一次使用这个,组件直接就是,一个坑没有拉下,
- 使用第一步
确定你的Vue版本,然后,去下载指定版本的 Ant Design Vue
Vue2 下载版本 cnpm i --save [email protected]
这里说的只是 ,按需引入的 坑,全局引用 直接按照 官网的文本,做就可以
- 这里还需要一个插件
需要使用到 babel-plugin-import 插件:一个用于按需加载组件代码和样式的 babel 插件
下载 cnpm install --save babel-plugin-import
- babel.config.js 找到这个文件
添加下面代码 就可 这里的 plugins 就是用到,上面的插件
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' }
]
]
- 在main.js中
引入你所需的组件即可
import {
Button } from 'ant-design-vue' // 官方文档中组件去掉a,首字母大写如a-form-model, 按需引入组件就是 FormModel
Vue.use(Button)
5. 可以直接在页面中使用了
- 引入样式时,需要npm安装less-loader去解析,less-loader版本过高超过6.0后,会报错。
需手动设置javascriptEnabled。故我们在vue.config.js文件中设置(楼主当时设置了好多遍也没起效,最后发现是less-loader没安装完全,多安装几次就好了)
modules.exports = {
css: {
loaderOptions: {
less: {
javascriptEnabled: true
}
}
}
}
楼主只遇到了着一些问题,再有问题 可以去看 下面这篇 文章
努力和收获,都是自己的,与他人无关。最大的成就感,就是一直在朝着自己想要的方向前进。
每天进步一点点 By。。。。。。。。。。