关于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