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

项目简介

本项目是一个基于 Vite + Vue3 + TypeScript 的开箱即用现代开发模板，专注于 Naive-UI。它集成了多种现代前端开发工具和插件，旨在为开发者提供一个高效、现代化的开发环境，减少项目配置时间，提升开发效率。

项目的主要特性和功能

1. 构建与框架：采用 Vite 作为构建工具，支持最新的 Vue3 框架与 TypeScript 开发。
2. 路由与布局：基于文件系统的路由配置，支持默认布局和自定义布局。
3. 开发调试：内置 Mock 数据支持，方便前端开发调试；支持依赖图谱的调试。
4. 自动引入：自动引入 Vue、Pinia、VueUse 等库的 API、src/components 下的组件以及图标库。
5. 功能集成：集成 VueUse 库、Windi CSS、SWR 请求库、Pinia 状态管理。
6. 特色模式：支持暗黑模式的切换。
7. 包管理：推荐使用 pnpm 作为包管理器。
8. 用户体验：页面跳转时显示进度条，提供美观的 404 页面。
9. 测试与渲染：集成 Vitest 进行单元测试，支持 Markdown 文件的渲染。
10. 其他特性：支持路径别名 ~ 指向 src 目录；支持通过命令行自动创建和删除页面或组件；支持多语言国际化；支持使用 tsx 文件编写组件；生产环境下自动进行 gzip 压缩。

安装使用步骤

假设用户已经下载了本项目的源码文件，以下是具体操作步骤：

1. 安装依赖

推荐使用 pnpm 作为包管理器： ```shell pnpm install

```

2. 开发

```shell pnpm dev

pnpm dev:host

pnpm dev:open

```

3. 预览

```shell pnpm preview

pnpm preview:host

pnpm preview:open

```

4. 打包

```shell pnpm build

```

5. 单元测试

```shell pnpm test

```

6. 单元测试报告生成

```shell pnpm coverage

```

7. 样式报告预览

```shell pnpm analysis

```

8. 样式报告打包

```shell pnpm analysis:build

```

9. 类型检查

```shell pnpm typecheck

```

10. 自动创建

```shell pnpm auto:create

```

11. 自动移除

```shell pnpm auto:remove

```

12. 依赖更新

```shell pnpm deps:fresh

pnpm deps:fresh:major

pnpm deps:fresh:minor

pnpm deps:fresh:patch

shell pnpm i

```

下载地址

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