# vue-template

**Repository Path**: Karrty/vue-template

## Basic Information

- **Project Name**: vue-template
- **Description**: Vite + Vue3 + Ts 开发模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-11-30
- **Last Updated**: 2025-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Frame From Vue3

## Vite + Vue3 + Ts 开发模板

# 项目启动

node 版本：>=17.6.0

npm 版本：>=8.5.1

```
// 安装依赖
npm install
// 运行项目
npm run dev
// 打包项目
npm run build
// 启动打包后的项目
npm run preview
```

# 一、项目目录结构

    1. src/assets：图片存放处
    2. src/axios：请求的封装
    3. src/common/constants：一些常量的定义
    4. src/common/helper：自定义常用js方法的封装
    5. src/common/model：所有类型的定义
    6. src/common/router：路由
    7. src/common/services：api接口的请求方法
    8. src/common/stores：Pinia状态管理
    9. src/common/styles：全局样式
    10. src/components：公共组件
    11. src/layouts：自定义封装布局
    12. src/views：页面
    13. src/auto-imports.d.ts：自动引入vue3方法
    14. src/components.d.ts：自动引入组件
    15. src/extendProperties.d.ts：扩展类型定义
    16. src/vite-env.d.ts：环境变量类型声明
    17. src/.env、src/.env.development、src/.env.production：环境变量
    18. src/tailwind.config.cjs：tailwind的配置
    18. src/vite.config.ts：vite的配置

# 二、开发流程

    1. 将本模板多余代码清除（src/view/Demo、路由）
    2. 根据UI设计图，选好主题配色，在src/common/styles/index.scss设置好主题配色（rgb色）以及src/common/styles/theme/colorLibrary.scss的配色
    3. 设置好主题配色后，可根据自己自定义一些默认色做为css变量（如：字体颜色、背景色等）和ui组件库的颜色（如：primary、warning等）
    4. 根据UI设计图，分好布局，在src/layouts里设置自定义布局，如头部、顶部、侧边栏
    5. 设置好布局后，可在路由表里的meta.layout进行配置使用哪种布局
    6. 进行常规的view和components的开发
    7. 如果已有接口，需要在src/.env.production进行设置baseUrl，之后在src/common/constants/APIConst.ts进行设置api请求地址以及在src/common/services封装api请求方法
    8. 根据接口入参要求以及返回的数据进行定义类型，在src/common/model文件下进行定义
    9. 进行常规接口对接（注意生命周期以及调用时机）