Ant-Design-Vue快速上手指南+排坑

《Ant Design Vue快速上手指南》

一、环境搭建

1. Node.js安装：确保你的电脑上已经安装了Node.js，推荐版本为14以上。你可以通过在终端输入node -v来检查你的Node.js版本。

2. 创建项目：使用Vue CLI创建一个新的Vue项目，打开终端，执行以下命令：

   vue create my-project
   在交互式命令中选择Manually select features，然后勾选Babel，Router，Vuex等你需要的选项。
   

    3.安装Ant Design Vue：在项目目录下，使用npm或yarn安装Ant Design Vue： npm install ant-design-vue
# 或
yarn add ant-design-vue

二、引入Ant Design Vue

在main.js或main.ts文件中引入Ant Design Vue，并使用它。 

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');

三、使用组件

在你的组件中，你可以直接使用Ant Design Vue的组件，例如Button：

<template>
  <div>
    <a-button type="primary">按钮</a-button>
  </div>
</template>

四、自定义主题

Ant Design Vue支持自定义主题，你可以在src目录下创建一个styles目录，然后在该目录下创建一个variables.less文件，将以下代码复制到该文件中：

// 自定义主题
@import '~ant-design-vue/lib/style/themes/default.less';
@primary-color: #1890ff;
@link-color: @primary-color;
然后在main.js中引入这个文件：

import './styles/variables.less';

五、排坑指南

问题1：样式未加载
确保你已经正确引入了Ant Design Vue的样式，即在main.js中引入'ant-design-vue/dist/antd.css'。

问题2：组件未显示
检查是否正确引入了Ant Design Vue，并在Vue实例中使用了Vue.use(Antd);。

问题3：国际化问题
Ant Design Vue支持国际化，你可以在src目录下创建一个i18n.js文件，然后在该文件中定义你的语言包。

以上就是Ant Design Vue的快速上手指南，希望对你有所帮助。