教程介绍

本教程是基于vite8，使用vue官方初始模板，逐步搭建一个完整的中后台管理系统框架。

使用vite初始化项目

cd E:/project/
# 使用create-vue创建项目
# pnpm create vue@latest -- --help  # 帮助文档
pnpm create vue@latest vue-admin-template
pnpm add -D vite@8.0.0-beta.5  # 更新vite为8版本。 (`-D`安装到开发依赖区域)

cd vue-admin-template
pnpm install

准备工作

官方文档：https://hooray.gitee.io/fantastic-admin/guide/ready.html

教程使用的框架说明：node.js 18 pnpm vite Vue 3 Vue Router 4 Pinia Element Plus

下载框架最新源码：

• 专业版：https://github.com/fantastic-admin/pro/releases
• 基础版：https://github.com/hooray/fantastic-admin/releases

layout布局

layout布局分为：

1. 左侧的侧边栏Sidebar，高度为100%整个屏幕高度
2. 顶部的导航栏NavBar
3. 中间的标签栏TagsView
4. 下面内容区域Main

侧边栏sidebar布局

导航栏布局

标签栏布局

请注意看TagsView.vue监听路由变化的代码，如果是路由白名单的页面是不会添加到标签栏的

路由配置

登录鉴权

本章总结

教程到此还无法正常启动项目，因为有一些依赖文件还没有创建。
依赖文件有：

• src/store/index.js
• src/store/user.js

安装svg插件

默认情况下vite无法处理svg矢量图标，需要安装vite插件

npm i --save-dev vite-plugin-svg-icons@latest

构建登录页面

本章总结

本章到此可以正常启动项目登录

完整项目地址：xhwy-v3-ts-elementplus

系列文章：

手把手带你用 vue 建后台 系列一（项目介绍篇)

完整项目地址：xhwy-v3-ts-elementplus

系列文章：

手把手带你用 vue 建后台 系列一（项目介绍篇)

完整项目地址：xhwy-v3-ts-elementplus

系列文章：

手把手带你用 vue 建后台 系列一（项目介绍篇)

完整项目地址：xhwy-v3-ts-elementplus

系列文章：

手把手带你用 vue 建后台 系列一（项目介绍篇)