# simple_vue

**Repository Path**: zdl666zzz/simple_vue

## Basic Information

- **Project Name**: simple_vue
- **Description**: vue3+tsx 开箱即用脚手架
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-04-18
- **Last Updated**: 2024-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, TypeScript, tsx, vite, tailwindcss

## README

# simple_vue

## 介绍

一个使用 `vite` + `vue3` + `typescript` + `tsx`  + `pinia` + `element-plus` + `tailwindcss` + `mock` 开发的项目。

## 特性

- 使用**vite**进行构建项目
- 使用**vue3** + **typescript**进行开发
- 组合式api的逻辑 + **tsx**描述界面的开发模式
- 用**tailwindcss**作为`CSS`框架
- 用**Pinia**作为状态管理(setup写法)
- ui使用了**element-plus**
- 路由使用了`自动化路由` + `权限动态引入`的模式，功能齐全
- 项目使用了`类存储` + `本地存储`的加密双重存储模式，兼容了绝大多数的存储使用场景。
- 全面的功能封装，`校验全面`的同时具有`请求去重`、`请求重连`等功能。
- 自动监听页面变化，实现`响应式`处理
- 自动引入src/common下组件为`全局组件`，只需稍写类型即可使用
- 已支持**mockjs**, dev模式默认开启，可以在环境变量中控制 `VITE_USE_MOCK` 进行切换
- 已支持`项目文件占用可视化`，test环境默认开启，可以在环境变量中控制`VITE_OCCUPY_VISUALIZATION`进行切换，快去看看你吧
- 已支持`gzip、brotli压缩`，test环境默认开启，可以在环境变量中控制 `VITE_BUILD_COMPRESS` 进行切换与压缩模式的选择
- 已支持自动记录项目错误日志，默认开启，可以在环境变量中控制`VITE_GLOB_LOG`进行切换，会自动捕获浏览器错误，手动记录也可以用console.err、throw new Error() 等
- ...等等


## 项目主要目录

```js
├── .vscode                             // vscode配置文件
├── build                               // 项目构建逻辑
├── dist                                // 默认的 build 输出目录
├── logs                                // logs记录
├── mock                                // 前端数据mock
├── visualizer                          // 可视化占用输出文件夹
├── public                              // vite项目下的静态目录
└── src                                 // 源码目录
    ├── assets                          // 公共的文件（如image、css、font等）
    ├── common                          // 项目底层组件，在里面编写的组件会自动全局注册
    ├── components                      // 公共逻辑组件
    ├── config                          // 项目配置
        ├── data                        // 项目数据
        ├── enums                       // 枚举数据
        ├── settings                    // 配置数据
    ├── hooks                           // 自定义 hooks
        ├── core                        // 核心hooks
        ├── event                       // 事件hooks
        ├── project                     // 项目hooks
    ├── layout                          // 页面基础结构
    ├── logics                          // 逻辑
    ├── router                          // 项目路由
        ├── guard                       // 构建动态路由和路由拦截
        ├── helper                      // 路由工具
        ├── routes                      // 路由模块的核心
            ├── modules                 // 路由数据，在里面编写的路由会被自动注入vue-router中
            ├── basic.ts                // 初始路由数据
        ├── build.ts                    // 路由模块构建类
        ├── constant.ts                 // 路由模块核心参数
    ├── service                         // 接口
    ├── store                           // 状态管理
    ├── utils                           // 工具库
        ├── cache                       // 存储
            ├── metaStore.ts            // 存储功能类
            ├── storageInstance.ts      // class存储
            ├── webStorage.ts           // 本地存储
        ├── helper                      // 工具
        ├── http/axios                  // 请求
            ├── axios.ts                // 请求功能类
            ├── axiosCancel.ts          // 请求取消类
            ├── index.ts                // 请求拦截器与配置的初始化页面
            ├── request.ts              // 请求api暴露
        ├── lib                         // 第三方工具
    ├── views                           // 页面模块
    ├── App.tsx                         // vue顶层文件
    ├── main.ts                         // 项目初始化类
    ├── types                           // 项目type类型定义文件夹
```

## 使用说明

1. 克隆本项目

    ```sh
    git clone https://gitee.com/zdl666zzz/simple_vue.git
    ```

2. 安装依赖

    ```sh
    # 推荐使用 pnpm
    pnpm install
    # 没有安装的直接安装
    npm install -g pnpm
    ```

3. 启动项目

    ```sh
    pnpm dev
    ```