# vip

**Repository Path**: liqw2017/vip

## Basic Information

- **Project Name**: vip
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-11-18
- **Last Updated**: 2024-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center">
    <img src="https://img.shields.io/badge/-Vue3-34495e?logo=vue.j" />
    <img src="https://img.shields.io/badge/-Vite2.7-646cff?logo=vite&logoColor=white" />
    <img src="https://img.shields.io/badge/-TypeScript-blue?logo=typescript&logoColor=white" />
    <img src="https://img.shields.io/badge/-Pinia-yellow?logo=picpay&logoColor=white" />
    <img src="https://img.shields.io/badge/-ESLint-4b32c3?logo=eslint&logoColor=white" />
    <img src="https://img.shields.io/badge/-Axios-008fc7?logo=axios.js&logoColor=white" />
    <img src="https://img.shields.io/badge/-Prettier-ef9421?logo=Prettier&logoColor=white" alt="Prettier">
    <img src="https://img.shields.io/badge/-Less-1D365D?logo=less&logoColor=white" alt="Less">
    <img src="https://img.shields.io/badge/-Tailwind%20CSS-06B6D4?logo=Tailwind%20CSS&logoColor=white" alt="Taiwind">
</p>

## 目录结构

以下是系统的目录结构

```
├── src
│    ├── api             // api请求
│    ├── assets          // 静态文件
│    ├── components      // 业务通用组件
│    ├── page            // 业务页面
│    ├── router          // 路由文件
│    ├── store           // 状态管理
│    ├── utils           // 工具类
│    ├── App.vue         // vue模板入口
│    ├── main.ts         // vue模板js
├── tailwind.config.js   // tailwind全局配置
├── tsconfig.json        // ts配置
└── vite.config.ts       // vite全局配置
```

## 🎸UI 组件按需加载，自动导入

```typescript
//模块化写法
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
	plugins: [
		vue(),
		Components({
			resolvers: [VantResolver()],
		})
	]
})
```

## 📱 支持`Pinia` ,下一代`Vuex5`

创建文件`src/store/modules/user/index.ts`

```typescript
import { defineStore } from 'pinia';
export const useUserStore = defineStore(
  // 唯一ID
  'user',
  {
    state: () => ({}),
    getters: {},
    actions: {},
  },
);
```

## 📦 支持`axios(ts版)`

已封装了主流的拦截器，请求调用等方法，区分了模块`index.ts`/`status.ts`/`type.ts`

```typescript
//封装src/api/user/index.ts
import { get, post } from '@/utils/http/axios'
import { LoginData } from './types'

enum URL {
  login = '/login',
  getUserProfile = '/getLoginUser',
}

export const login = async (data: LoginData) => post<any>({ url: URL.login, data })
export const getUserProfile = async () => get<any>({ url: URL.getUserProfile })
```

```typescript
//调用
import { getUserProfile } from '@/api/user/index'
// setup模式下组件可以直接引用
const res = await getUserProfile();
```

## 👽 自动生成`router`，过滤`components`组件

支持`vue-router4.0`的模块化，通过检索 pages 文件夹可自动生成路由，并支持动态路由

```typescript
import { createRouter, createWebHashHistory } from 'vue-router'
import routes from '~pages'

const router = createRouter({
  history: createWebHashHistory(),
  routes
})
```

## 🧬 tailwindcss 一行 css 不写，3 分钟出一个页面

<img src="https://camo.githubusercontent.com/c02a39d2807941f4e4870b94836ea2f21bed61291a60c763db4b51274c2a617b/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f67682f4d616c655765622f706963747572652f696d616765732f74656368626c6f672f7461696c77696e646373732d322e676966" />

## 🎉 其他

- 🏗 支持`vw/vh`移动端布局兼容
- 📦 多环境打包配置