# z-vue3

**Repository Path**: ProgrammerZhong/z-vue3

## Basic Information

- **Project Name**: z-vue3
- **Description**: vue3 ts vite models z-admin 
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-07-12
- **Last Updated**: 2023-08-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, vite, TypeScript

## README

# ts配置文件

# 环境配置文件
1. 新建.env等文件
2. 修改vite.config.ts 文件，使用配置构建函数返回条件配置。
3. 引入 vite-plugin-html 插件，用来增加html里的模板变量，修改index.html，使用title模板变量和buildTime 构建时间模板变量。
4. 定义全局变量 __VUE_APP__ 保存环境相关值，新增 类型VUE_APP_TYPE 文件 ，在tsconfig.node.json 中 include上。
5. 引入inject.scss ,混入所有的scss中。针对全局引用scss样式或者scss变量。（取消全局scss变量，改直接用css变量实现。）

# eslint
1. 使用默认配置
2. 个人习惯使用缩进4空格
3. 取消自动--fix，要报错出来
2. vscode 缩进配置监测文档本身

# .prettierrc.json
1. formate 命令的配置，需要和eslint 的缩进等配合。
2. 缩进改为4，行宽为200.
3. 修改好执行format 命令修改初始代码

# vscode插件
1. volar (vue3)
2. indent-rainbow （非必须）
3. folder-alias （非必须）
4. 汉化
5. 禁用内置 的 javascript 和 typescript 语言功能

# 样式响应式
## 方案1 全局zoom （当前）
1. 缺点是火狐不支持
2. 优点是是字体支持无极缩放，类似scale的方案
3. 代码在main.ts中。

## 方案2 全局scale 

## 方案3 rem 响应式
1. 分为版心布局和全局比例
2. 确定是字体太小的时候无法同步变化

# 全局变量
全局变量统一贼 env.d.ts 中定义global
## $zModels，在 initModels 中定义.



# layout
layout的组件基本都在Router模块里
## 左侧导航
## 顶部菜单
## tagsView
## 主体mainView