写在前面
大家，我是叔牙，一个后端查表仔～
前一段时间在开发一个物联网项目，用到了管理后台，由于之前在公司开发项目都是提供接口给前端，自己很少写前端的东西，现在独立写自己的项目了，没有前端配合，找了一圈管理后台的模板，说实话都很好看，但是太复杂了，想做一些改动很难，所以就有了打造一个属于自己的管理后台的想法，花了一些时间研究了一下vue3，搭建了一个自己的管理后台，最终系统也成功落地生产。
通过这个从0到1的系列是想记录一下自己完成整个管理后台搭建的过程，也希望对有跟我同样想法的后端同学有一个参考（前端大佬们肯定也用不到），提供一个思路。
项目源码
技术选型
vue3 + Ant Design Vue（单纯觉得Ant Design的风格很好看，大家也可以选择自己喜欢的组件库）
开始
以下步骤来自Ant Design Vue官方文档
创建项目
这里我们使用vite构建
cnpm init vite@latest
执行之后输入项目名称并选择框架和语言，这里选择了vue和JavaScript，也可以根据自己的喜好选择TypeScript
安装依赖库 & 启动项目
创建完成，根据提示，进入项目目录并运行npm install 和 npm run dev命令，在安装时如果慢的话，也可以用cnpm替换npm
# 安装依赖库
cnpm install
# 启动项目，也可以通过 yarn dev 命令启动
npm run dev
项目启动之后在浏览器中打开http://localhost:5173/可以看到项目已经启动:
初始化代码仓库
git init
这个是必须的，后边每一篇文章对应的 commit-hash 也都会附在文末，方便我们check到指定位置去查看源码
使用AntDesign组件库
安装 ant-design-vue@4.x 组件库
cnpm i --save ant-design-vue@4.x
安装 vue-router
cnpm install vue-router
页面
配置页面布局，这里我们直接使用
antd提供的a-layout组件来布局
*后续提到的文件路径都是基于src目录，比如说main.ts文件，其实就是src/main.ts，基本所有文件都在src目录下，所以直接省略掉src
修改App.vue文件：
<template>
<router-view></router-view>
</template>
新增router/index.js文件：
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(''),
routes: [
{
path: '',
name: 'basic',
component: () => import('../layout/layout.vue'),
children: []
}
]
})
export default router
修改 main.js文件：
import { createApp } from 'vue'
import router from './router'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import App from './App.vue'
createApp(App).use(router).use(Antd).mount('#app')
新增layout/Layout.vue文件：
<template>
<a-layout>
<a-layout-sider :style="{ overflow: 'auto', height: '100vh' }" v-model:collapsed="collapsed">
<div class="logo">
<img src="/vite.svg" class="logo_img" alt="Vite logo" />
<span class="logo_text" v-show="!collapsed">Ant Design</span>
</div>
<a-menu v-model:selectedKeys="selectedKeys" :theme="state.theme" mode="inline">
<a-menu-item key="1">
<UserOutlined />
<span>nav 1</span>
</a-menu-item>
<a-menu-item key="2">
<VideoCameraOutlined />
<span>nav 2</span>
</a-menu-item>
<a-menu-item key="3">
<UploadOutlined />
<span>nav 3</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header style="background: #fff; padding: 0; height: 50px;">
<MenuUnfoldOutlined
v-if="collapsed"
class="trigger"
@click="() => (collapsed = !collapsed)"
/>
<MenuFoldOutlined v-else class="trigger" @click="() => (collapsed = !collapsed)" />
</a-layout-header>
<a-layout-content
:style="{ margin: '12px 10px', padding: '18px', background: '#fff', minHeight: '280px', borderRadius: '4px' }"
>
Content
</a-layout-content>
</a-layout>
</a-layout>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const selectedKeys = ref(['1']);
const collapsed = ref(false);
const state = ref({
theme: 'dark'
})
import {
UserOutlined,
MenuUnfoldOutlined,
MenuFoldOutlined,
DownOutlined,
DeleteOutlined,
LogoutOutlined,
AppstoreOutlined,
UploadOutlined,
VideoCameraOutlined,
} from '@ant-design/icons-vue'
</script>
<style>
.trigger {
display: block;
font-size: 18px;
width: 40px;
line-height: 50px;
padding: 2px 16px 0 16px;
cursor: pointer;
transition: color 0.3s;
}
.trigger:hover {
color: #1890ff;
}
.logo {
height: 32px;
margin: 9px;
overflow: hidden;
}
.logo_img {
margin-left: 12px;
display: block;
width: 32px;
height: 32px;
float: left;
}
.logo_text {
display: block;
float: left;
line-height: 32px;
text-align: center;
color: #fff;
font-size: 20px;
margin-left: 8px;
font-weight: 900;
}
.site-layout .site-layout-background {
background: #fff;
}
</style>
然后再运行项目，就可以看到后台系统的布局框架已经搭建起来了：
功能区划分如下图：
到这里，一个简易的后台系统的布局就完成了
总结
- 项目初始化
- 依赖库的加载
- 实现了简单的页面布局
- 左侧栏点击收放效果
commit-hash: 4d757ccb
