/arcro-vue

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

Primary LanguageTypeScript

arcro-vue

完全使用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>
  1. v-slots两种写法(SFC写法无需考虑)
    举例1:
       <a-button v-slot={{ default:() => VNode, title:() => VNode }} />
    举例2:
       <a-button>
       {{
          default: () =>  VNode,
          title: () =>  VNode,
       }}
       </a-button>
    
  2. 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