从零开始的学习日记——Vue of Antd

全局注册

全局注册比较容易

Ant Design Vue        ⬅️官网地址

我使用的是@vue/cli3，直接搭建脚手架、之后下载antd

npm install ant-design-vue 

随后在main.js里面全局注册

import Vue from 'vue'
import App from './App.vue'

import antd from "ant-design-vue"
import 'ant-design-vue/dist/antd.css'


Vue.use(antd)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

我们就可以在组件中使用官网的Components了

像官网中写的那样

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a-button type="primary">Button></a-button>
  </div>
</template>

下载的时候一定要注意版本问题。我是@vue/cli3    less3.0.4   less-loader5.0.0

版本不一样，less过高也会造成报错！！！

局部注册

局部注册就全是坑了朋友们

首先要下载babel-plugin-import 

这是一个实现按需加载的插件

接下来在我们的babel.config.js文件中修改配置（若没有则是在搭建的时候没选babel）

module.exports = {
  presets: ["@vue/app"],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
    ]
  ]
};

我们的main.js中就可以不注册东西

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

在App.vue中注册

<template>
  <div>
    <a-button type="primary">hello world</a-button>
  </div>
</template>
 
<script>
import { Button } from 'ant-design-vue';
 
export default {
    components:{ AButton:Button },
}
</script>

同时我们需要配置vue.config.js（若无则创建）

module.exports = {
    publicPath: "./", //  构建时的输出目录
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true,
            }
        }
    }
};

至此，局部注册完成

 其中注意less和less-loader版本问题、config配置问题、babel配置问题以及各种依赖的安装

非常感谢老哥的文章助我填坑

附上链接～Vue-cli2和cli3下antd按需引入和解决前端跨域时遇到的问题_三月三-CSDN博客_antdv vue3 按需引入