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

6次阅读

共计 1602 个字符，预计需要花费 5 分钟才能阅读完成。

文章结尾附源码

齐全应用 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

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

正文完