# EmptyTemplate__vite-vue3

**Repository Path**: ykxbc/empty-template__vite-vue3

## Basic Information

- **Project Name**: EmptyTemplate__vite-vue3
- **Description**: 包括router、vuex、axios
及windicss、lodash、sass等常用包
按照个人开发习惯创建的初始Demo

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-16
- **Last Updated**: 2025-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue3, Pinia, element-plus

## README

+ 使用 `Vue3` + `vite`
+ 使用 `TypeScript`，配置 `tsx`
+ 使用 `<script lang="ts" setup>`
+ 配置 `auto-import` 和 `auto-components` 
  + 基本上除了`lodash-es`和`api`，不需要手动引入
+ 使用 `pinia`，并配置 `plugin-persist`
+ 配置 `.prettierrc`
+ 使用 `tailwindcss`

+ 封装很多常用 [hook](#user-content-二hooks-钩子) 、[功能函数](#user-content-三utils) 和 [组件](#user-content-一components-组件)



#### 补充说明

暂时没有想到

- dom-to-image很久不维护了，用[modern-screenshot ](https://www.npmjs.com/package/modern-screenshot) **OK**
- moment换 [DayJs](https://dayjs.fenxianglu.cn/category/display.html)，或者date-fns **OK**

#### 可能出现的问题

- `@vitejs/plugin-vue-jsx` 下载失败：
  - 使用 yarn
- j/tsx中使用自定义组件，同时自定义组件中使用了 `useRouter`，可能会有指向问题导致：`router is undefined`
  - 直接引入router实例来做跳转：`import router from '@/router'`

#### arco的问题

- feat：color-picker（[github](https://github.com/arco-design/arco-design/pull/2383)）

  - 代替：https://aesoper101.github.io/vue3-colorpicker/

- bug：a-watermark（[github:pull-requests](https://github.com/arco-design/arco-design-vue/pull/2787)）

- \*\*的@arco-plugins/vite-vue有bug！打包前打包后css权重不一样...

  - 不用这个，手动引入一下样式，保持打包前后权重一致即可：**保持代码风格一致，统一采用:style={}的赋值方式，不用"!w-24"这种格式**
  - 我\*\*\*\*\*的！自定义样式/主题的权重也能变不一样我真服了：**组件自动引入，css手动引入，再手动添加自定义主题css**

    - ```json
      // vite.config.js
      Components.resolvers: [
          ArcoResolver({
              importStyle: false, // 注意要加这个！
          }),
      ]
      ```







#### 封装的功能

##### <a id="user-content-一components-组件">一、components 组件</a>

+ common
  + StatusTag   状态tag
+ layout
  + Capture  屏幕截图（按钮）
  + LoadingIcon  处理全局loading
  + Menu  递归渲染菜单
  + PiniaTabs  多标签页
  + Theme  切换主题（按钮）
+ loader 等待/占位dom
  + Bat 蝙蝠
  + Butterfly 蝴蝶
  + Flowers 花形
  
+ use
  + Code  代码输入
  + CodeInput  验证码|固定位数密码 
  + FileSelect  选择文件+预览
  + ImagePreview 图片预览（带插槽
  + Label
  + MouseSelection  鼠标框选
  + NProgress  隐藏式进度条
  + Select  各种复杂情景下的多选
  + TableSelect 表格多选操作模块 （更推荐对应的hooks
  + Touch  监听上下左右、wasd、移动端移动
  + Typed  打字机效果
  + UploadImage  上传图片（水印、api|base64

##### <a id="user-content-二hooks-钩子">二、hooks 钩子</a>

+ ues
  + EventSequence 按照顺序执行函数 （按顺序执行从多个位置触发的异步|同步事件
  + AutoScale  固定像素页面适配（自动缩放页面
  + ChannelMessage  页面通信
  + Driver 用户指引
  + GetData 获取表格数据（分页&过滤等
  + InfiniteScroll  无限滚动 \ 滚动加载
  + Loading 全局Loading
  + MoveByMouse 跟随鼠标在元素中的位置进行位置偏移
  + RandomColor 字符串计算颜色
  + StorageScroll 缓存滚动位置
  + Swiper 轮播图
  + TableSelect 表格的多选操作模块
  + ViewObServer 元素是否位于视窗中的监听
  + WindowUnload  阻止页面关闭

##### <a id="user-content-三utils">三、utils</a>

+ funcs
  + dateRange  时间范围
  + file 文件处理函数：文件类型相互转换及下载（blob、url、base64、File）
  + format  格式转换函数：shuffle、数组转对象、数组转置...
  + make 生成函数：生成随机字符串、生成form验证规则...
  + tools 功能函数：复制、等待、加载script...
+ AES 加密
+ comfirm 二次确认框
+ uaTools  userAgent的解析
+ verify 正则验证
+ watermark 水印
+ log
+ localstore
+ nprogress