arcro-vue

vue3、typescript、pinia、Arco Design

完全使用tsx，基本涵盖了vue3常用写法，欢迎补充

特点

TypeScript - 代码完全使用 TypeScript 书写。
Pinia
Arco Design - 字节出品的与阿里ant-design基本类似的vue版本的组件库。
@vueuse/core - 实用函数集
mitt - mitt封装eventBus hooks

用法

推荐使用yarn，node版本>16；
如需使用npm，自行排查处理vite-plugin-imagemin中的jpeg子库依赖问题，vite-plugin-imagemin此库为支持图片类型压缩而引入，无此需求可卸载

yarn:
$ npm i -g husky
$ yarn prepare
$ yarn
$ yarn dev


代码提交:
$ yarn lint-staged

风格修复完成后:

$ git commit -m "fix(): bug修复"

详细参照commitlint.config

已安装三方组件库

@vueuse/core（实用函数集）
@arco-design/web-vue (字节)
gsap（javascript动画库）
mitt（实现vue取消的eventbus（发布与订阅功能））

vite-plugin-imagemin 图片压缩

"resolutions": {
  "bin-wrapper": "npm:bin-wrapper-china"
}

unplugin-vue-components (按需导入组件)
vite-plugin-style-import （按需导入样式）
vite-plugin-compression （开启GZIP压缩）
vite-plugin-cdn-import （cdn引入）
@vitejs/plugin-legacy (传统浏览器支持)--->对vue3来说无意义，Proxy决定了vue3不支持ie11，但对react或其他可通过此实现支持
mockjs、vite-plugin-mock

踩坑记录

enmu type ts作用域与js作用域冲突

   'no-shadow': 'off',
   '@typescript-eslint/no-shadow': 'error',

tsx中的transtion、KeepAlive、动态组件创建（SFC写法无需考虑）

    import { Transition, KeepAlive, createVNode } from 'vue';
    <Transition name="fade" mode="out-in">
      <div key={route.path} style={{ height: '100%' }}>
        {route.meta.ignoreCache ? (
          createVNode(Component)
        ) : (
          <KeepAlive include={cacheList.value}>
            {createVNode(Component)}
          </KeepAlive>
        )}
      </div>
    </Transition>

v-slots两种写法（SFC写法无需考虑）

举例1：
   <a-button v-slot={{ default:() => VNode, title:() => VNode }} />
举例2：
   <a-button>
   {{
      default: () =>  VNode,
      title: () =>  VNode,
   }}
   </a-button>

tsx中的scoped作用域

一、vite内置.module方案，js形式导入css，生成附带随机变量的class
  定义使用*.module.less
     .layout {
         width: 100vw;
         height: 100vh;
         &-navbar {
           position: fixed;
           top: 0;
           left: 0;
           z-index: 100;
           width: 100%;
           height: @nav-size-height;
     }

     import style from *.module.less
     <div class={style.layout}>
        <div class={style.layoutNavbar}></div>
     </div>
二、命名特有class

wangguixing/arcro-vue

arcro-vue

vue3、typescript、pinia、Arco Design

特点

用法

已安装三方组件库

踩坑记录