# vite-vue-template

**Repository Path**: SuHangWeb/vite-vue-template

## Basic Information

- **Project Name**: vite-vue-template
- **Description**: 基于 vite 驱动的 vue3 集成模板 vue-router + i18n + Tailwindcss + Pinia + axios
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-06-05
- **Last Updated**: 2025-07-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite-vue-template

🚀 基于 vitejs 驱动的 vue3 集成模板

## 特点

- 🛣 Router: 使用 [vue-router](https://router.vuejs.org/zh/) ，并通过优化封装，扩展了拦截器、鉴权...
- 📊 Store: 使用 [Pinia](https://pinia.vuejs.org/zh/) 强力驱动，轻松实现应用状态管理，并且添加了数据持久化[pinia-plugin-persistedstate](https://prazdevs.github.io/pinia-plugin-persistedstate/zh/)。
- 🌏 i18n 国际化: 使用[vue-i18n](https://www.npmjs.com/package/vue-i18n) 进行优化 以及响应式切换
- 🌐 Request: 请求库使用 [axios](http://www.axios-js.com/) 。
- 💅 Tailwindcss: 使用原子化 CSS 引擎。
- 📝 NoTs: 在常见的业务场景以及人员水平差距甚为明显的情况下，TypeScript 不能提升开发体验，故而只是使用了 JavaScript 。

## 使用方法

### 安装项目依赖

```shell
npm install
or
yarn
```

### 运行项目

#### 任意编辑器直接运行本项目

```shell
npm run dev
or
yarn dev
```

## 目录

```base
┌─public 										静态资源
├─src											应用程序主要代码
│  ├─api										api接口
│  ├─components									自定义组件
│  ├─hooks										hooks
│  ├─i18n										i18n国际化 语言包
│  ├─views										页面
│  ├─router										路由
│  │	├─routes.js								路由集合统一管理
│  │  	└─index.js								入口 - 路由守卫
│  ├─assets										资源文件
│  ├─store										状态管理 Pinia
│  │	├─modules								模块化
│  │	│	├─auth.js							授权相关
│  │	│	├─system.js							系统相关
│  │	│  	└─user.js							用户相关
│  │  	└─index.js								入口
│  ├─utils										工具
│  │	├─request.js							网络请求拦截器
│  │  	└─crypto.js								加密解密工具
│  ├─App.vue									根组件	
│  └─main.js         							核心入口文件       
├─.env.development          					开发环境
├─.env.production           					生产环境
├─.gitignore                					git禁止上传配置文件
├─index.html         							主要模板文件
├─package.json              					模块包的描述
├─tailwind.config.js             				原子化 CSS 配置文件
├─vite.config.js            					vite主要配置文件
└─README.md                 					说明文档
```