wangguixing / arcro-vue

vue3 vite pinia ts tsx admin admin-template arco-design/vue template

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

踩坑记录

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

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

2. 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>

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

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

4. 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