关于vue3:附源码vue3vite4arcodegign-vue-tsx版本踩坑记录

文章结尾附源码

vue3、typescript、pinia、Arco Design

齐全应用 tsx，根本涵盖了 vue3 罕用写法，欢送补充

特点

• TypeScript – 代码齐全应用 TypeScript 书写。
• Pinia
• Arco Design – 字节翻版 ant-design，vue 组件库。
• @vueuse/core – 实用函数集

• mitt – mitt 封装 eventBus hooks

  用法

• npm run

  npm:
  $ npm run prepare
  $ npm i
  $ npm run dev
  yarn:
  $ yarn prepare
  $ yarn
  $ yarn dev
  
  代码提交:
  $ npm run lit-staged
  $ 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

   源码地址：arcro-vue