【源码】基于Vite、Vue3、Element Plus和TypeScript的现代开发模板

项目简介

本项目是一个基于 Vite、Vue3、Element Plus 和 TypeScript 的现代开发模板，为开发者提供了开箱即用的开发环境。集成了众多现代开发工具和库，能帮助开发者快速搭建高效、可维护的 Vue3 应用。

项目的主要特性和功能

1. 构建与框架：采用 Vite 构建工具，有快速开发和热更新功能；支持 Vue3 最新特性和 API。
2. UI 与类型：使用 Element Plus UI 组件库，提供丰富组件和样式；支持 TypeScript 提升代码质量。
3. 路由与布局：基于文件结构自动生成路由；支持默认布局和自定义布局。
4. 数据与请求：支持 Mock 数据模拟；自动引入 Vue、Pinia、VueUse 等库的 API；使用 SWR 请求库提供现代化数据请求方式。
5. 自动引入：自动引入 src/components 下的组件；支持从 Iconify 自动引入图标。
6. 其他特性：具备 VueUse 钩子库；支持一键切换暗黑模式；使用 Pinia 进行状态管理；页面跳转时显示进度条；支持查看项目依赖图谱；自动加载 src/modules 下的插件；支持 Vitest 单元测试；支持在 Vue 组件中渲染 Markdown 内容；使用 ~ 作为 src 目录别名；支持通过命令行快速创建和删除页面或组件；支持多语言切换；提供美观的 404 页面；支持在 Vue 组件中使用 tsx；生产环境下自动压缩资源。

安装使用步骤

1. 安装依赖

确保已安装 Node.js 和 npm 或 yarn 或 pnpm。在项目根目录下运行以下命令安装依赖： shell pnpm install

2. 启动开发服务器

运行以下命令启动开发服务器： shell pnpm dev

3. 预览项目

运行以下命令预览项目： shell pnpm preview

4. 构建生产环境项目

运行以下命令构建生产环境项目： shell pnpm build

5. 执行单元测试

运行以下命令执行单元测试： shell pnpm test

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】