Vue 3 搭建前端模板并集成 Ant Design Vue（2025）
一、环境安装
截止2025.2.6 ，官网发布的vue 3 稳定版本是 V 3.5.13
根据此时的官方文档要求，node 版本需要大于等于 V 18.3
于是使用 nvm 安装 v 20.18.0
二、创建项目
使用 Vue 官方推荐的脚手架 create-vue 快速创建 Vue3 的项目:
快速上手 | Vue.js
在终端中输入命令: npm create vue@latest 但若后续文档升级还想创建现在版本的框架的话，输入 npm create vue@3.12.1
接下来按照如下选项创建项目，脚手架会自动帮我们安装 Vue Router 路由、Pinia 全局状态管理等实用类库 :
然后用 Webstorm 打开项目，先在终端执行 npm install 安装依赖，然后执行 npm run dev
能访问网页就成功了。
运行项目之后，会发现Vue 脚手架提供了一个调试工具 devtools(http://localhost:5173/devtools/)，可以使用它来调试分析项目 :
三、前端工程化配置
脚手架已经帮我们整合了 Prettier 代码美化、ESLint 自动校验、TypeScript 类型校验，无需再自行整合。但是需要在 webstorm 里开启代码美化插件 :
在 vue 文件中执行格式化快捷键，不报错，表示配置工程化成功。如果发现格式化效果不好，也没关系，之后可以使用另外一种格式化快捷键
修改 eslint.config.js、.prettierrc.json、tsconfig.json 文件可以改变校验规则。如果不使用脚手架，就需要自己整合这些工具:
代码规范:https://eslint.org/docs/latest/use/getting-started
代码美化:https://prettier.io/docs/en/install.htm!
直接整合:https://github.com/prettier/eslint-plugin-prettier#recommended-configuration(包括https://github.com/prettier/eslint-config-prettier#installation)
对于前端新手来说，不需要深入了解这些，纯当工具去使用即可，尽快上手项目。
四、引入组件库
引入 Ant Design Vue 组件库，参考 官方文档 快速上手 - Ant Design Vue 快速上手。
注意，本教程使用的是 v4.2.6 的组件库版本，如果后续阅读本教程中发现有组件或语法不一致，以官方文档为主，或者在网站右上角切换对应版本的文档即可:
执行命令：
npm i --save ant-design-vue@4.x
改变主入口文件 main.ts，全局注册组件((为了方便)
import App from './App.vue'
import router from './router'
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";
const app = createApp(App)
app.use(Antd);
app.use(createPinia())
app.use(router)
app.mount('#app')
然后在 App.vue 中增加一个按钮组件，测试 Ant Design Vue 组件是否安装成功。
五、选择 API 风格
1、选项式 API (Options API)
使用选项式 API，可以用包含多个选项的对象来描述组件的逻辑，例如 data,methods 和 mounted。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。
<script>
export default {
// data() 返回的属性将会成为响应式的状态
// 并且暴露在 `this` 上
data() {
return {
count: 0
}
},
// methods 是一些用来更改状态与触发更新的函数
// 它们可以在模板中作为事件处理器绑定
methods: {
increment() {
this.count++
}
},
// 生命周期钩子会在组件生命周期的各个不同阶段被调用
// 例如这个函数就会在组件挂载完成后被调用
mounted() {
console.log(`The initial count is ${this.count}.`)
}
}
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>2、组合式 API (Composition API)
通过组合式 API，可以使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与 <script setup> 搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。比如，<script setup> 中的导入和顶层变量/函数都能够在模板中直接使用。
下面是使用了组合式 API 与 <script setup> 改造后和上面的模板完全一样的组件：
<script setup>
import { ref, onMounted } from 'vue'
// 响应式状态
const count = ref(0)
// 用来修改状态、触发更新的函数
function increment() {
count.value++
}
// 生命周期钩子
onMounted(() => {
console.log(`The initial count is ${count.value}.`)
})
</script>
<template>
<button @click="increment">Count is: {{ count }}</button>
</template>建议遵循 Vue3 的组合式 API(Composition API)，而不是 选项式 AP!,开发更自由高效一些。
六、页面信息修改
修改 html 文件中的 title 和 ico 部分，设置成适合自己项目的信息：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/bitbug_favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能云图库平台</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
还可以替换 public 目录下默认的 ico 图标为自己的，有很多 现成的网站（如：在线制作ico图标 | 在线ico图标转换工具 方便制作favicon.ico - 比特虫 - Bitbug.net） 可以制作 ico 图标。效果如图:
七、通用布局选择
1、基础布局结构
在 layouts 日录下新建一个布局 BasicLayout.vue，在 App.vue 全局页面入口文件中引入。App.vue 代码如下 :
<template>
<div id="app">
<BasicLayout/>
</div>
</template>
<script lang="ts" setup>
import BasicLayout from "@/layouts/BasicLayout.vue";
</script>
可以移除页面内的默认样式、并且移除 main.ts 中默认引入的 main.css，防止样式污染 :
<style>
#app {
}
</style>
选用 Ant Design 组件库的 Layout 组件 布局 Layout - Ant Design Vue，先把【上中下】布局编排好，然后再填充内容 :
<template>
<div id="basicLayout">
<a-layout style="min-height: 100vh">
<a-layout-header>Header</a-layout-header>
<a-layout-content>Content</a-layout-content>
<a-layout-footer>Footer</a-layout-footer>
</a-layout>
</div>
</template>
<script setup lang="ts"></script>
<style scoped>
#basicLayout {
}
</style>
2、全局底部栏
通常用于展示版权信息:
<a-layout-footer class="footer">
<a href="https://www.baidu.com" target="_blank">
智能云图库 by Asukabai
</a>
</a-layout-footer>
#basicLayout .footer {
background: #efefef;
padding: 16px;
position: fixed;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
3、动态替换内容
项目使用了 Vue Router 路由库，可以在 router/index.ts 配置路由，能够根据访问的页面地址找到不同的文件并加载渲染。修改 BasicLayout 内容部分的代码如下 :
<a-layout-content class="content">
<router-view />
</a-layout-content>
修改样式，要和底部栏保持一定的外边距，否则内容会被遮住
<style scoped>
#basicLayout .content {
background: linear-gradient(to right, #fefefe, #fff);
margin-bottom: 28px;
padding: 20px;
}
</style>
4、全局顶部栏
由于顶部栏的开发相对复杂，可以基于 Ant Design 的菜单组件 导航菜单 Menu - Ant Design Vue来创建 GlobalHeader 全局顶部栏组件，**组件统一放在 components 日录中 ** 。先直接复制现成的组件示例代码到 GlobalHeader 中即可