vue3Admin
这个模板应该能帮助你开始在Vite中使用Vue3进行开发。
参照vue3-element-admin，点击查看官网。技术栈包括TypeScript、JSX、Vue Router、Pinia。 UI框架采用element-plus 2.14.7
Project Setup（初始化）
# 创建名为vue3Admin的项目
pnpm create vue@latest vue3Admin# 初始化项目选择
pnpm create vue@latest vue3Admin
TypeScript → Yes
JSX → No（除非你需要，例如动态性极高的场景。比如你要写一个高度可配置的动态表单生成器。属于进阶选择。）
Vue Router → 按需（本项目Yes）
Pinia → 按需 （本项目Yes）
Vitest / E2E → No（基础脚手架可先跳过）
ESLint / Prettier → 按需 （本项目Yes）# 进入项目目录
cd vue3AdminInstall Dependencies（安装依赖）
# 安装依赖
pnpm installCompile and Hot-Reload for Development（开发编译，含热重启）
# 开发编译，含热重启
pnpm devType-Check, Compile and Minify for Production（生产编译，含检查、压缩）
# 生产编译，含检查、压缩
pnpm build开发实录
这是一个空白模板，从零开始搭建后台系统。
项目结构
vue3Admin
├── index.html
├── README.md
├── .env.development
├── .env.production
├── public
│ ├── favicon.ico
│ └──
├── src
│ ├── router
│ │ └── index.ts
│ ├── views
│ │ ├── Home.vue
│ │ ├── login
│ │ │ ├── index.vue
│ │ │ └── components
│ │ | ├── Register.vue
│ │ | ├── QrCodeLogin.vu
| │ | └── ResetPwd.vue入口 HTML 文件
index.html 是 Vite 项目的入口 HTML 文件，也是浏览器加载应用时第一个请求的页面。
网站标题（title）
<!-- index.html -->
<title>%VITE_APP_TITLE%</title>VITE_APP_TITLE在.env文件中进行全局配置。本项目更多配置方式见环境变量配置。
网站图标（favicon）
<!-- index.html -->
<link rel="icon" href="/favicon.ico" />网站描述（description）
<!-- index.html -->
<meta name="description" content="%VITE_APP_DESCRIPTION%" />全局样式（style）
<!-- index.html -->
<style>
/* 全局样式 */
</style>环境变量配置（.env）
.env文件是 Vite 项目的环境变量配置文件，用于在不同的开发、测试、生产环境中设置不同的配置。更多配置方式见官方文档环境变量配置。
开发环境（.env.development）
# .env.development
VITE_APP_TITLE=Vue3Admin
VITE_APP_DESCRIPTION=这是一个Vue3Admin项目生产环境（.env.production）
# .env.production
VITE_APP_TITLE=Vue3Admin
VITE_APP_DESCRIPTION=这是一个Vue3Admin项目应用入口文件main.ts配置
main.ts(路径:/src/main.ts) 是 Vue 3 + Vite 项目的应用入口文件，负责创建 Vue 应用实例、安装全局插件、挂载根组件。它和 index.html 分工明确：index.html 提供页面骨架和入口脚本引用，main.ts 则是真正的应用启动逻辑。
路由配置
文件路径:src/router/index.ts
import { createRouter, createWebHistory, type RouteRecordRaw } from 'vue-router'
// 静态路由
export const constantRouters: RouteRecordRaw[] = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'),
},
{
path: '/login',
name: 'Login',
component: () => import('@/views/login/index.vue'),
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: constantRouters,
// 刷新时，滚动条位置还原
scrollBehavior: () => ({ left: 0, top: 0 }),
// 路由守卫
// beforeEach: (to, from, next) => {}
})
export default routerhome(首页)配置
# src/views/Home.vue
<template>
<div>
<h1>花花工作室</h1>
<p>欢迎来到花花工作室！</p>
</div>
<div>
<!-- 登录 -->
<el-button type="primary" @click="handleLogin">登录</el-button>
</div>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const handleLogin = () => {
// 跳转到登录页面
router.push('/login');
};
</script>login(登录页)配置
# src/views/login/index.vue
<template>
<div>登录页面</div>
<!-- 登录 -->
<div>用户名：admin</div>
<div>密码：123456</div>
<!-- 注册 -->
<el-button type="primary" @click="register">注册</el-button>
<!-- 忘记密码 -->
<el-button type="primary" @click="forgetPwd">忘记密码</el-button>
</template>
<script setup>
import { useRouter } from 'vue-router';
const router = useRouter();
// 注册
const register = () => {
router.push('./components/Register.vue');
}
// 忘记密码
const forgetPwd = () => {
router.push('/ForgetPwd');
}
</script>register(注册页)配置
# src/views/login/components/Register.vue
<!-- 注册组件 -->
<template>
<div class="register-container">
<h2>注册</h2>
<form @submit.prevent="handleRegister">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" v-model="username" required />
</div>
<div class="form-group">
<label for="email">邮箱</label>
<input type="email" id="email" v-model="email" required />
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" v-model="password" required />
</div>
<button type="submit">注册</button>
</form>
</div>
</template>
<script setup>
import { ref } from 'vue';
const username = ref('');
const email = ref('');
const password = ref('');
const handleRegister = () => {
// 处理注册逻辑
};
</script>