前端框架ant-design-vue

Ant Design Vue 使用教程
项目初始化与安装
为了开始使用 Ant Design Vue，在项目中需先通过 npm 或 yarn 安装依赖包。完成环境搭建之后，可以在 Vue 项目的入口文件 main.js 中引入 Ant Design Vue 及样式文件[^2]。
import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

Vue.use(Antd);

此操作会全局注册所有组件，并加载默认主题样式。
项目目录结构
典型的 Ant Design Vue 项目遵循标准的 Vue CLI 构建工具所生成的基础架构，但针对特定需求进行了优化调整。通常情况下，项目根目录下会有如下重要部分：

src/: 存放源码的地方，包括页面、组件和其他资源。
public/: 放置静态资产的位置。
node_modules/: 第三方库和模块所在位置。
package.json: 记录项目元数据及脚本命令。

对于更复杂的业务场景，可以参考 ruoyi-ant 这样的成熟案例来构建自己的前端工程框架[^3]。
主要配置文件说明
在实际开发过程中，除了上述提到的内容外，还需要关注一些重要的配置项。例如，在 vue.config.js 文件里能够自定义 Webpack 配置选项，从而更好地满足个性化的需求[^4]。
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
};

以上设置指定了公共资源路径、打包后的输出目录以及其他相关参数。
示例代码展示
下面给出一段简单的例子用于快速体验 Ant Design Vue 的魅力：
<template>
<a-button type="primary">按钮</a-button>
</template>

<script>
export default {};
</script>

这段模板展示了如何利用 <a-button> 组件创建一个带有样式的按钮控件。