作为一名前端开发者，从接触编程到能够独立开发项目，我一直对开源社区充满敬畏。那些免费分享、持续迭代的优质项目，不仅帮助无数开发者高效解决问题，更传递着协作共赢的技术精神。如今，我终于迈出了关键一步 —— 发布了自己的第一个开源项目 vue3-pc-template，希望能为同样在前端领域探索的伙伴提供一份实用的开发模板，也记录下这段从 0 到 1 的成长历程。

一、为什么要做这个项目？—— 源于实际开发的痛点

在日常开发中，我发现每次启动新的 PC 端 Vue 项目时，都会面临重复的 “基础搭建” 工作：配置 Vue Router 路由守卫、整合 Pinia 状态管理、设置 Axios 请求拦截、优化 ESLint 代码规范…… 这些工作虽不复杂，却占用了大量本可用于核心业务开发的时间。尤其是对于刚接触 Vue3 的开发者，还可能因配置不当导致后续开发踩坑。

于是我萌生了一个想法：能不能打造一个 “开箱即用” 的 Vue3 PC 端模板？它既要包含项目开发中最常用的功能模块，又要遵循最新的技术规范，让开发者拿到模板后，只需专注于业务逻辑，无需再为基础配置耗费精力。这便是 vue3-pc-template 最初的诞生契机。

二、项目核心功能与技术亮点

为了让模板兼具 “实用性” 和 “规范性”，我在技术选型和功能设计上反复打磨，最终确定了以下核心亮点：

1. 主流技术栈，适配现代前端开发

模板基于 Vue3 + Vite4 构建，相比 Vue2 和 Webpack，不仅开发热更新速度更快，还能充分利用 Vue3 的 Composition API、Teleport、Suspense 等新特性，提升代码的可维护性。同时整合了：

• Pinia：替代 Vuex 的状态管理工具，语法更简洁，支持 TypeScript，解决了 Vuex 在 TypeScript 下类型推断不友好的问题；

• Vue Router 4：适配 Vue3 的路由库，支持路由懒加载、动态路由，内置的导航守卫可轻松实现权限控制；

• Axios：封装了请求拦截、响应拦截、错误处理，支持请求取消、请求重试，同时配置了基础 URL 和超时时间，开发者只需关注接口调用；

• TypeScript：全程使用 TS 开发，提供完善的类型定义，减少运行时错误，提升代码可读性和可维护性；

• Element Plus：基于 Vue3 的组件库，提供丰富的 PC 端常用组件，满足大部分业务场景，同时支持按需引入，减少打包体积。

2. 实用功能模块，覆盖开发全流程

除了基础技术整合，模板还内置了多个高频使用的功能模块，开箱即可用：

• 权限控制：基于角色的权限管理（RBAC），通过路由守卫判断用户权限，动态生成可访问路由，同时控制按钮级别的权限显示；

• 请求封装：统一的 Axios 请求封装，支持 GET/POST/PUT/DELETE 等请求方式，自动添加请求头（如 Token），对 401（未登录）、403（无权限）等错误进行统一处理；

• 全局状态管理：基于 Pinia 封装了用户信息、权限信息、系统配置等全局状态，支持状态持久化（localStorage/sessionStorage）；

• 代码规范：集成 ESLint + Prettier + Husky + lint-staged，强制代码风格统一，在提交代码时自动检测并修复格式问题，避免团队协作中的代码风格冲突；

• 环境配置：区分开发环境（dev）、测试环境（test）、生产环境（prod），不同环境下的基础 URL、接口前缀等配置可通过.env 文件灵活切换；

• 基础页面模板：包含登录页、首页、权限配置、表格等常用页面，页面布局采用 “侧边栏 + 顶部导航 + 主内容区” 的经典 PC 端布局，支持侧边栏折叠、面包屑导航等交互。

3. 性能优化，提升用户体验

在注重功能的同时，我也关注项目的性能表现：

• 按需引入：Element Plus 组件和 Pinia 状态模块均支持按需引入，减少不必要的代码打包；

• 路由懒加载：通过 Vue Router 的动态 import 语法，实现路由组件懒加载，降低首屏加载时间；

• 图片优化：Vite 内置了图片压缩插件，自动对 png、jpg、svg 等图片进行压缩，同时支持图片懒加载；

• 打包优化：配置了 splitChunks，将第三方依赖（如 Vue、Element Plus）单独打包，减少主包体积，提升缓存命中率。

三、如何使用这个模板？—— 简单三步，快速启动

为了降低使用门槛，我在项目 README 中详细编写了使用指南，只需简单三步，即可快速搭建项目：

1. 克隆项目

首先从 Gitee 仓库克隆项目到本地：

git clone https://gitee.com/zunyi-gabe/vue3-pc-template.git

2. 安装依赖

进入项目目录，使用 npm 或 yarn 安装依赖（推荐使用 npm）：

cd vue3-pc-template

npm install

3. 启动项目

依赖安装完成后，执行以下命令启动开发环境：

npm run dev

启动成功后，在浏览器中访问 http://127.0.0.1:3000（默认端口为 3000，可在 vite.config.ts 中修改），即可看到项目的登录页面。

如果需要打包生产环境代码，执行：

npm run build:prod

打包后的代码会生成在 dist 目录下，可直接部署到服务器。

四、项目图片

五、开源路上的思考与未来规划

作为第一个开源项目，从构思到开发再到发布，我遇到了不少挑战：比如如何平衡模板的 “通用性” 和 “灵活性”（既要满足大部分场景，又不能过度封装导致扩展困难）、如何编写清晰的文档让其他开发者快速上手、如何处理可能出现的 issue 和 PR…… 但每当解决一个问题，看到项目逐渐完善，那种成就感是难以言喻的。

对于 vue3-pc-template 的未来，我有以下规划：

1. 功能迭代：后续将增加更多实用功能，如 Excel 导入导出、打印功能、主题切换、多语言支持等；

1. 文档完善：补充更详细的使用教程，包括权限控制、请求封装、状态管理的具体使用示例，帮助新手更快理解模板；

1. 问题修复：持续关注用户反馈，及时修复项目中可能存在的 bug，优化性能和用户体验；

1. 技术更新：随着 Vue3、Vite 等技术的更新，及时升级项目依赖，确保模板始终基于最新的技术规范。

五、写在最后

开源对我而言，不仅是分享代码，更是一种学习和成长的方式。通过这个项目，我不仅巩固了 Vue3、vue-router等技术知识，还学会了如何编写清晰的文档、如何规范代码风格、如何考虑项目的通用性和可扩展性。

如果这个模板能帮助到你，我会非常开心；如果在使用过程中遇到问题，或者有更好的建议，欢迎在 Gitee 仓库提交 issue 或 PR，让我们一起完善这个项目，为前端开源社区贡献一份小小的力量。vue3-pc-template: 一个纯前端的后台管理模板，采用 Vue3、JavaScript 和 Element Plus 进行开发，旨在为开发者提供一个高效、便捷的后台管理系统前端开发基础框架，具备动态路由、面包屑导航以及多页面打开等实用功能，可大大提升开发效率和用户体验。

最后，感谢每一位支持开源的开发者，也感谢自己勇敢迈出了这第一步。未来，我会继续在开源的路上探索，带来更多有价值的项目！