zat-vue3-snippets是一个专门为Vue3开发者打造的代码片段集合，旨在通过提供高效的代码片段，帮助开发者快速搭建和优化Vue3项目。无论您是初学者还是经验丰富的开发者，都能从中受益。

核心功能：

• Vue3基础模版： 提供包括zat-vbase在内的多种Vue3页面模版，帮助您快速启动项目。
• 组件开发： 通过zat-vbase-com等片段，简化组件开发过程，提高代码重用率。
• 路由管理： 使用zat-vroute快速设置Vue3项目中的路由，提升导航体验。
• 设计令牌： 特别为H5设计提供的zaui-h5系列令牌，涵盖背景色、文字色、按钮样式等，确保您的项目在移动端的视觉一致性和美观性。

详细代码片段：

• Vue3片段：

  • zat-vbase：用于创建Vue3 setup 页面模版，支持SCSS。
  • zat-vbase-com：专为Vue3 setup Component设计的页面模版。
  • zat-vroute：快速设置Vue3路由的snippet。
  • zat-vsrc：用于图片资源的snippet。
  • zat-vclass：Vue3中class绑定相关的snippet。
  • zat-vreactive-setup：Vue3 Composition API的Reactive Script。
  • zat-vemit-child：从子组件中emit事件的snippet。
  • zat-vmounted：Vue3生命周期钩子onMounted。
  • zat-vonunmounted：Vue3生命周期钩子onUnmounted。
  • zat-vonbeforeunmount：Vue3生命周期钩子onBeforeUnmount。
  • zat-vwatch：Vue3中watch的snippet。
  • zat-vcomputed：Vue3中Computed属性的snippet。

• H5设计令牌：

  • zaui-h5-global-bg：设置全局背景色。
  • zaui-h5-global-bg-white：设置全局背景返白色，默认值为#ffffff。
  • zaui-h5-base-bg：设置H5标准区块背景色，适用于二三级页面，默认值为#ffffff:#eeeff4。
  • zaui-h5-dividing-line：设置H5分割线颜色，默认值为#eeeff4。
  • zaui-h5-brand：设置H5品牌色，默认值为#0d6efe。
  • zaui-h5-price：设置金额色，默认值为#0d6efe。
  • zaui-h5-text：用于订单、保单等详细信息描述的文字色，默认值为#818899。
  • zaui-h5-text-collateral：用于订单、保单等详细信息描述的文字色，默认值为#818899。
  • zaui-h5-text-weak：弱化的正文信息文字色，默认值为#99a9c0。
  • zaui-h5-aide-text：辅助文本颜色，默认值为#99a9c0。
  • zaui-h5-link：强链接按钮的文本颜色，默认值为#bcc7da。
  • zaui-h5-aide-text-stress：文本强调色，默认值为#0d6efe。
  • zaui-h5-danger：错误、告警色，默认值为#ff5050。
  • zaui-h5-disabled-bg：主要按钮的禁用背景色，默认值为#0d6efe。
  • zaui-h5-border-radius-picture：图片圆角设置，默认值为12px。
  • zaui-h5-border-radius-primary-button：主要按钮圆角设置，默认值为8px。
  • zaui-h5-border-radius-searchBar：搜索框圆角设置，默认值为8px。
  • zaui-h5-border-radius-tag-small：小标签圆角设置，默认值为8px。
  • zaui-h5-border-radius-tag-big：大标签圆角设置，默认值为12px。
  • zaui-h5-border-radius-card：区块圆角设置，默认值为20px。
  • zaui-h5-border-radius-feedback：临时层圆角设置，默认值为12px。
  • zaui-h5-font-size-xl：超大控件文字大小，默认值为34px。
  • zaui-h5-font-size-l：大控件文字大小，默认值为32px。
  • zaui-h5-font-size-m：中控件文字大小，默认值为30px。
  • zaui-h5-font-size-normal：常规控件文字大小，默认值为28px。
  • zaui-h5-font-size-s：小控件文字大小，默认值为26px。
  • zaui-h5-font-size-xs：超小控件文字大小，默认值为24px。
  • zaui-h5-font-size-assist：辅助控件文字大小，默认值为22px。
  • zaui-h5-space-home-card：首页、我的、名片区块行间距，默认值为30px。
  • zaui-h5-space-card：内页区块行间距，默认值为20px。
  • zaui-h5-page-border：区块距页面边距，默认值为30px。
  • zaui-h5-card-border：内容距区块边距，默认值为30px。
  • zaui-h5-space-border-big：内页区块与内容间距大，默认值为30px。
  • zaui-h5-space-border-small：内页区块与内容间距小，默认值为20px。
  • zaui-h5-button-primary-highlight-text：主要按钮上的高亮文字色，默认值为#0d6efe。
  • zaui-h5-button-secondary-highlight-text：次要按钮上的文字色，默认值为#0d6efe。
  • zaui-h5-button-assist：辅助按钮背景色，默认值为rgba(13, 110, 254, 0.1)。
  • zaui-h5-popup-button-text：弹窗按钮未选中文字色，默认值为#515865。
  • zaui-h5-popup-button-highlight-text：弹窗按钮选中文字色，默认值为#0D6EFE。
  • zaui-h5-text-title：标题文字色（第一层级），一般用于卡片标题，默认值为#393d46。
  • zaui-h5-icon-fill：图标填充色，默认值为#515865。
  • zaui-h5-icon-highlight-white：按钮填充色反白颜色，默认值为#ffffff。
  • zaui-h5-button-primary：主要按钮颜色，默认值为#0d6efe。
  • zaui-h5-button-secondary：次要按钮颜色，默认值为#ffffff。
  • zaui-h5-button-secondary-line：次要按钮边框色，默认值为#0D6EFE。
  • zaui-h5-popup-button：弹窗按钮未选中背景色，默认值为#f6f7fc。
  • zaui-h5-popup-highlight-button：弹窗按钮选中背景色，默认值为#0d6efe。
  • zaui-h5-popup-highlight-button-line：弹窗按钮选中边框色，默认值为#0d6efe。
  • zaui-h5-disabled-button：按钮禁用背景颜色，默认值为#8fbbfc。
  • zaui-h5-disabled-button-text：按钮禁用文字颜色，默认值为#ffffff。
  • zaui-h5-shadow-length-base：阴影长度设置，默认值为0px 0px 16px 0px #e7eafa。

总结：

zat-vue3-snippets为Vue3开发者提供了一套完整的代码片段和设计令牌，帮助您快速搭建高效、美观的Vue3项目。无论是基础模版、组件开发，还是H5设计令牌，都能在此找到您所需的资源，提升开发效率，优化项目质量。