Ant Design Vue 局部引入样式使用 坑！！！

Posted 2023-02-19 啥也不会ln

第一次使用这个，组件直接就是，一个坑没有拉下，

1. 使用第一步

确定你的Vue版本，然后，去下载指定版本的 Ant Design Vue
Vue2 下载版本 cnpm i --save ant-design-vue@1.7.2

这里说的只是 ，按需引入的 坑，全局引用 直接按照 官网的文本，做就可以

1. 这里还需要一个插件

需要使用到 babel-plugin-import 插件：一个用于按需加载组件代码和样式的 babel 插件
下载 cnpm install --save babel-plugin-import

3. babel.config.js 找到这个文件

添加下面代码 就可 这里的 plugins 就是用到，上面的插件

plugins: [
        [
          "import",
           libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' 
        ]
      ]

4. 在main.js中

引入你所需的组件即可

import  Button  from 'ant-design-vue' // 官方文档中组件去掉a，首字母大写如a-form-model， 按需引入组件就是 FormModel
Vue.use(Button)

5. 可以直接在页面中使用了

6. 引入样式时，需要npm安装less-loader去解析，less-loader版本过高超过6.0后，会报错。
   需手动设置javascriptEnabled。故我们在vue.config.js文件中设置(楼主当时设置了好多遍也没起效，最后发现是less-loader没安装完全，多安装几次就好了)

modules.exports = 
  css: 
    loaderOptions: 
      less: 
        javascriptEnabled: true
      
    
  

楼主只遇到了着一些问题，再有问题 可以去看 下面这篇 文章

努力和收获，都是自己的，与他人无关。最大的成就感，就是一直在朝着自己想要的方向前进。

ant-design-vue使用之路

每天进步一点点 By。。。。。。。。。。