关于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 devyarn:$ 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

踩坑记录

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

源码地址：arcro-vue

vue3、typescript、pinia、Arco Design

特点

用法

已装置三方组件库

踩坑记录