• 日期: 2026-10-22
  • 标签: 程序员

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 vue3Admin

 

Install Dependencies（安装依赖）

# 安装依赖
pnpm install

 

Compile and Hot-Reload for Development（开发编译，含热重启）

# 开发编译，含热重启
pnpm dev

 

Type-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）


<title>%VITE_APP_TITLE%title>

 

VITE_APP_TITLE在.env文件中进行全局配置。本项目更多配置方式见环境变量配置。

网站图标（favicon）


<link rel="icon" href="/favicon.ico" />

 

网站描述（description）


<meta name="description" content="%VITE_APP_DESCRIPTION%" />

 

全局样式（style）


<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 router

 

home(首页)配置

# src/views/Home.vue

 

login(登录页)配置

# src/views/login/index.vue

 

register(注册页)配置

# src/views/login/components/Register.vue

 


原文地址: http://www.cveoy.top/t/topic/qHNa 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录