From aa21eb5df7076d0aff0dc5df52975d38e26359b9 Mon Sep 17 00:00:00 2001 From: fonghehe Date: Mon, 11 Nov 2024 09:04:53 +0000 Subject: [PATCH] deploy: 4dee78d00c96b643833dc940308636bdcb2f9d00 --- 404.html | 4 ++-- ...99.js => guide_about_index.md.3268f72f.js} | 2 +- ... => guide_about_index.md.3268f72f.lean.js} | 2 +- assets/guide_edit.md.4c959ba5.js | 11 ---------- assets/guide_edit.md.4c959ba5.lean.js | 1 - assets/guide_edit.md.7944bd49.js | 11 ++++++++++ assets/guide_edit.md.7944bd49.lean.js | 1 + ...3a64f07e.js => guide_index.md.46287c77.js} | 2 +- ...ean.js => guide_index.md.46287c77.lean.js} | 2 +- ...47.js => guide_other_index.md.5aef07ec.js} | 2 +- ... => guide_other_index.md.5aef07ec.lean.js} | 2 +- ...18fddbf4.js => guide_start.md.634b98ba.js} | 2 +- ...ean.js => guide_start.md.634b98ba.lean.js} | 2 +- ...3fa.js => guide_vue2_alias.md.c0d9e31c.js} | 2 +- ...s => guide_vue2_alias.md.c0d9e31c.lean.js} | 2 +- ...18e.js => guide_vue2_axios.md.f273628e.js} | 4 ++-- ...s => guide_vue2_axios.md.f273628e.lean.js} | 2 +- ...66ed.js => guide_vue2_base.md.bd933227.js} | 2 +- ...js => guide_vue2_base.md.bd933227.lean.js} | 2 +- ...fb.js => guide_vue2_bundle.md.73aeb293.js} | 2 +- ... => guide_vue2_bundle.md.73aeb293.lean.js} | 2 +- ...b3.js => guide_vue2_chunks.md.93504c3d.js} | 2 +- ... => guide_vue2_chunks.md.93504c3d.lean.js} | 2 +- ...0.js => guide_vue2_console.md.68673d37.js} | 2 +- ...=> guide_vue2_console.md.68673d37.lean.js} | 2 +- ...0a293.js => guide_vue2_env.md.71078dec.js} | 6 ++--- ....js => guide_vue2_env.md.71078dec.lean.js} | 2 +- ...js => guide_vue2_externals.md.6744fb41.js} | 2 +- ... guide_vue2_externals.md.6744fb41.lean.js} | 2 +- ...d021b7.js => guide_vue2_ie.md.f5d567e9.js} | 2 +- ...n.js => guide_vue2_ie.md.f5d567e9.lean.js} | 2 +- ...0d4f.js => guide_vue2_lint.md.94bcc728.js} | 2 +- ...js => guide_vue2_lint.md.94bcc728.lean.js} | 2 +- ...403.js => guide_vue2_proxy.md.0d483f53.js} | 2 +- ...s => guide_vue2_proxy.md.0d483f53.lean.js} | 2 +- ...a5fda.js => guide_vue2_rem.md.05f1a99e.js} | 4 ++-- ....js => guide_vue2_rem.md.05f1a99e.lean.js} | 2 +- ...e7.js => guide_vue2_router.md.369637ff.js} | 2 +- ... => guide_vue2_router.md.369637ff.lean.js} | 2 +- ...4859.js => guide_vue2_sass.md.3616d11c.js} | 6 ++--- ...js => guide_vue2_sass.md.3616d11c.lean.js} | 2 +- assets/guide_vue2_start.md.e13e8546.js | 11 ---------- assets/guide_vue2_start.md.e13e8546.lean.js | 1 - assets/guide_vue2_start.md.f6e40312.js | 11 ++++++++++ assets/guide_vue2_start.md.f6e40312.lean.js | 1 + ...795d.js => guide_vue2_vant.md.4ed27c84.js} | 2 +- ...js => guide_vue2_vant.md.4ed27c84.lean.js} | 2 +- ...30b5.js => guide_vue2_vuex.md.399839b6.js} | 2 +- ...js => guide_vue2_vuex.md.399839b6.lean.js} | 2 +- ...9fc79f.js => guide_vue2_vw.md.f3d8795c.js} | 2 +- ...n.js => guide_vue2_vw.md.f3d8795c.lean.js} | 2 +- ...c16.js => guide_vue3_alias.md.6e50bff0.js} | 2 +- ...s => guide_vue3_alias.md.6e50bff0.lean.js} | 2 +- ...fa2.js => guide_vue3_axios.md.0778382b.js} | 2 +- ...s => guide_vue3_axios.md.0778382b.lean.js} | 2 +- ...e433.js => guide_vue3_base.md.462dbdb9.js} | 2 +- ...js => guide_vue3_base.md.462dbdb9.lean.js} | 2 +- ...f2a7e.js => guide_vue3_env.md.b928542e.js} | 2 +- ....js => guide_vue3_env.md.b928542e.lean.js} | 2 +- ...062d.js => guide_vue3_i18n.md.51f27eff.js} | 4 ++-- ...js => guide_vue3_i18n.md.51f27eff.lean.js} | 2 +- assets/guide_vue3_lint.md.18663aed.js | 1 + assets/guide_vue3_lint.md.18663aed.lean.js | 1 + assets/guide_vue3_lint.md.b9504b63.js | 1 - assets/guide_vue3_lint.md.b9504b63.lean.js | 1 - ...07c.js => guide_vue3_pinia.md.0d738d45.js} | 4 ++-- ...s => guide_vue3_pinia.md.0d738d45.lean.js} | 2 +- ...ab3.js => guide_vue3_proxy.md.94d7124b.js} | 2 +- ...s => guide_vue3_proxy.md.94d7124b.lean.js} | 2 +- ...b2.js => guide_vue3_router.md.84936a90.js} | 2 +- ... => guide_vue3_router.md.84936a90.lean.js} | 2 +- assets/guide_vue3_start.md.6f88b41c.js | 8 +++++++ assets/guide_vue3_start.md.6f88b41c.lean.js | 1 + assets/guide_vue3_start.md.f354f662.js | 8 ------- assets/guide_vue3_start.md.f354f662.lean.js | 1 - ...6ae98b.js => guide_vue3_ui.md.385fc808.js} | 2 +- ...n.js => guide_vue3_ui.md.385fc808.lean.js} | 2 +- ....js => guide_vue3_viewport.md.0ef62fba.js} | 4 ++-- ...> guide_vue3_viewport.md.0ef62fba.lean.js} | 2 +- ...c052.js => guide_vue3_vite.md.7a4b4162.js} | 2 +- ...js => guide_vue3_vite.md.7a4b4162.lean.js} | 2 +- ....bd639346.lean.js => index.md.b1dbb931.js} | 2 +- ....bd639346.js => index.md.b1dbb931.lean.js} | 2 +- ...{style.82cfa615.css => style.16a63e98.css} | 2 +- guide/about/index.html | 8 +++---- guide/edit.html | 22 +++++++++---------- guide/index.html | 8 +++---- guide/other/index.html | 8 +++---- guide/start.html | 8 +++---- guide/vue2/alias.html | 8 +++---- guide/vue2/axios.html | 12 +++++----- guide/vue2/base.html | 8 +++---- guide/vue2/bundle.html | 8 +++---- guide/vue2/chunks.html | 8 +++---- guide/vue2/console.html | 8 +++---- guide/vue2/env.html | 12 +++++----- guide/vue2/externals.html | 10 ++++----- guide/vue2/ie.html | 8 +++---- guide/vue2/lint.html | 10 ++++----- guide/vue2/proxy.html | 8 +++---- guide/vue2/rem.html | 10 ++++----- guide/vue2/router.html | 10 ++++----- guide/vue2/sass.html | 12 +++++----- guide/vue2/start.html | 22 +++++++++---------- guide/vue2/vant.html | 8 +++---- guide/vue2/vuex.html | 8 +++---- guide/vue2/vw.html | 10 ++++----- guide/vue3/alias.html | 8 +++---- guide/vue3/axios.html | 8 +++---- guide/vue3/base.html | 10 ++++----- guide/vue3/env.html | 8 +++---- guide/vue3/i18n.html | 10 ++++----- guide/vue3/lint.html | 10 ++++----- guide/vue3/pinia.html | 10 ++++----- guide/vue3/proxy.html | 8 +++---- guide/vue3/router.html | 10 ++++----- guide/vue3/start.html | 18 +++++++-------- guide/vue3/ui.html | 10 ++++----- guide/vue3/viewport.html | 10 ++++----- guide/vue3/vite.html | 8 +++---- hashmap.json | 2 +- index.html | 6 ++--- 122 files changed, 298 insertions(+), 298 deletions(-) rename assets/{guide_about_index.md.9cd5ee99.js => guide_about_index.md.3268f72f.js} (52%) rename assets/{guide_about_index.md.9cd5ee99.lean.js => guide_about_index.md.3268f72f.lean.js} (52%) delete mode 100644 assets/guide_edit.md.4c959ba5.js delete mode 100644 assets/guide_edit.md.4c959ba5.lean.js create mode 100644 assets/guide_edit.md.7944bd49.js create mode 100644 assets/guide_edit.md.7944bd49.lean.js rename assets/{guide_index.md.3a64f07e.js => guide_index.md.46287c77.js} (97%) rename assets/{guide_index.md.3a64f07e.lean.js => guide_index.md.46287c77.lean.js} (84%) rename assets/{guide_other_index.md.0962dd47.js => guide_other_index.md.5aef07ec.js} (51%) rename assets/{guide_other_index.md.0962dd47.lean.js => guide_other_index.md.5aef07ec.lean.js} (84%) rename assets/{guide_start.md.18fddbf4.js => guide_start.md.634b98ba.js} (96%) rename assets/{guide_start.md.18fddbf4.lean.js => guide_start.md.634b98ba.lean.js} (84%) rename assets/{guide_vue2_alias.md.306b63fa.js => guide_vue2_alias.md.c0d9e31c.js} (98%) rename assets/{guide_vue2_alias.md.306b63fa.lean.js => guide_vue2_alias.md.c0d9e31c.lean.js} (70%) rename assets/{guide_vue2_axios.md.a682218e.js => guide_vue2_axios.md.f273628e.js} (93%) rename assets/{guide_vue2_axios.md.a682218e.lean.js => guide_vue2_axios.md.f273628e.lean.js} (85%) rename assets/{guide_vue2_base.md.7d4266ed.js => guide_vue2_base.md.bd933227.js} (99%) rename assets/{guide_vue2_base.md.7d4266ed.lean.js => guide_vue2_base.md.bd933227.lean.js} (85%) rename assets/{guide_vue2_bundle.md.2fe1a9fb.js => guide_vue2_bundle.md.73aeb293.js} (98%) rename assets/{guide_vue2_bundle.md.2fe1a9fb.lean.js => guide_vue2_bundle.md.73aeb293.lean.js} (85%) rename assets/{guide_vue2_chunks.md.0130f8b3.js => guide_vue2_chunks.md.93504c3d.js} (99%) rename assets/{guide_vue2_chunks.md.0130f8b3.lean.js => guide_vue2_chunks.md.93504c3d.lean.js} (86%) rename assets/{guide_vue2_console.md.51b49cb0.js => guide_vue2_console.md.68673d37.js} (99%) rename assets/{guide_vue2_console.md.51b49cb0.lean.js => guide_vue2_console.md.68673d37.lean.js} (85%) rename assets/{guide_vue2_env.md.c800a293.js => guide_vue2_env.md.71078dec.js} (86%) rename assets/{guide_vue2_env.md.c800a293.lean.js => guide_vue2_env.md.71078dec.lean.js} (70%) rename assets/{guide_vue2_externals.md.69c0669f.js => guide_vue2_externals.md.6744fb41.js} (93%) rename assets/{guide_vue2_externals.md.69c0669f.lean.js => guide_vue2_externals.md.6744fb41.lean.js} (86%) rename assets/{guide_vue2_ie.md.83d021b7.js => guide_vue2_ie.md.f5d567e9.js} (98%) rename assets/{guide_vue2_ie.md.83d021b7.lean.js => guide_vue2_ie.md.f5d567e9.lean.js} (84%) rename assets/{guide_vue2_lint.md.d5070d4f.js => guide_vue2_lint.md.94bcc728.js} (98%) rename assets/{guide_vue2_lint.md.d5070d4f.lean.js => guide_vue2_lint.md.94bcc728.lean.js} (85%) rename assets/{guide_vue2_proxy.md.f5f5a403.js => guide_vue2_proxy.md.0d483f53.js} (98%) rename assets/{guide_vue2_proxy.md.f5f5a403.lean.js => guide_vue2_proxy.md.0d483f53.lean.js} (70%) rename assets/{guide_vue2_rem.md.769a5fda.js => guide_vue2_rem.md.05f1a99e.js} (70%) rename assets/{guide_vue2_rem.md.769a5fda.lean.js => guide_vue2_rem.md.05f1a99e.lean.js} (70%) rename assets/{guide_vue2_router.md.d35b25e7.js => guide_vue2_router.md.369637ff.js} (89%) rename assets/{guide_vue2_router.md.d35b25e7.lean.js => guide_vue2_router.md.369637ff.lean.js} (70%) rename assets/{guide_vue2_sass.md.723a4859.js => guide_vue2_sass.md.3616d11c.js} (90%) rename assets/{guide_vue2_sass.md.723a4859.lean.js => guide_vue2_sass.md.3616d11c.lean.js} (70%) delete mode 100644 assets/guide_vue2_start.md.e13e8546.js delete mode 100644 assets/guide_vue2_start.md.e13e8546.lean.js create mode 100644 assets/guide_vue2_start.md.f6e40312.js create mode 100644 assets/guide_vue2_start.md.f6e40312.lean.js rename assets/{guide_vue2_vant.md.9252795d.js => guide_vue2_vant.md.4ed27c84.js} (99%) rename assets/{guide_vue2_vant.md.9252795d.lean.js => guide_vue2_vant.md.4ed27c84.lean.js} (85%) rename assets/{guide_vue2_vuex.md.618230b5.js => guide_vue2_vuex.md.399839b6.js} (98%) rename assets/{guide_vue2_vuex.md.618230b5.lean.js => guide_vue2_vuex.md.399839b6.lean.js} (70%) rename assets/{guide_vue2_vw.md.ca9fc79f.js => guide_vue2_vw.md.f3d8795c.js} (86%) rename assets/{guide_vue2_vw.md.ca9fc79f.lean.js => guide_vue2_vw.md.f3d8795c.lean.js} (84%) rename assets/{guide_vue3_alias.md.d777bc16.js => guide_vue3_alias.md.6e50bff0.js} (98%) rename assets/{guide_vue3_alias.md.d777bc16.lean.js => guide_vue3_alias.md.6e50bff0.lean.js} (84%) rename assets/{guide_vue3_axios.md.cd29cfa2.js => guide_vue3_axios.md.0778382b.js} (99%) rename assets/{guide_vue3_axios.md.cd29cfa2.lean.js => guide_vue3_axios.md.0778382b.lean.js} (85%) rename assets/{guide_vue3_base.md.732de433.js => guide_vue3_base.md.462dbdb9.js} (77%) rename assets/{guide_vue3_base.md.732de433.lean.js => guide_vue3_base.md.462dbdb9.lean.js} (85%) rename assets/{guide_vue3_env.md.83cf2a7e.js => guide_vue3_env.md.b928542e.js} (97%) rename assets/{guide_vue3_env.md.83cf2a7e.lean.js => guide_vue3_env.md.b928542e.lean.js} (84%) rename assets/{guide_vue3_i18n.md.0436062d.js => guide_vue3_i18n.md.51f27eff.js} (96%) rename assets/{guide_vue3_i18n.md.0436062d.lean.js => guide_vue3_i18n.md.51f27eff.lean.js} (85%) create mode 100644 assets/guide_vue3_lint.md.18663aed.js create mode 100644 assets/guide_vue3_lint.md.18663aed.lean.js delete mode 100644 assets/guide_vue3_lint.md.b9504b63.js delete mode 100644 assets/guide_vue3_lint.md.b9504b63.lean.js rename assets/{guide_vue3_pinia.md.4c51a07c.js => guide_vue3_pinia.md.0d738d45.js} (96%) rename assets/{guide_vue3_pinia.md.4c51a07c.lean.js => guide_vue3_pinia.md.0d738d45.lean.js} (70%) rename assets/{guide_vue3_proxy.md.b05cbab3.js => guide_vue3_proxy.md.94d7124b.js} (96%) rename assets/{guide_vue3_proxy.md.b05cbab3.lean.js => guide_vue3_proxy.md.94d7124b.lean.js} (70%) rename assets/{guide_vue3_router.md.bf1ddfb2.js => guide_vue3_router.md.84936a90.js} (87%) rename assets/{guide_vue3_router.md.bf1ddfb2.lean.js => guide_vue3_router.md.84936a90.lean.js} (70%) create mode 100644 assets/guide_vue3_start.md.6f88b41c.js create mode 100644 assets/guide_vue3_start.md.6f88b41c.lean.js delete mode 100644 assets/guide_vue3_start.md.f354f662.js delete mode 100644 assets/guide_vue3_start.md.f354f662.lean.js rename assets/{guide_vue3_ui.md.cc6ae98b.js => guide_vue3_ui.md.385fc808.js} (90%) rename assets/{guide_vue3_ui.md.cc6ae98b.lean.js => guide_vue3_ui.md.385fc808.lean.js} (70%) rename assets/{guide_vue3_viewport.md.ad1a10ef.js => guide_vue3_viewport.md.0ef62fba.js} (80%) rename assets/{guide_vue3_viewport.md.ad1a10ef.lean.js => guide_vue3_viewport.md.0ef62fba.lean.js} (85%) rename assets/{guide_vue3_vite.md.9ec8c052.js => guide_vue3_vite.md.7a4b4162.js} (96%) rename assets/{guide_vue3_vite.md.9ec8c052.lean.js => guide_vue3_vite.md.7a4b4162.lean.js} (84%) rename assets/{index.md.bd639346.lean.js => index.md.b1dbb931.js} (95%) rename assets/{index.md.bd639346.js => index.md.b1dbb931.lean.js} (95%) rename assets/{style.82cfa615.css => style.16a63e98.css} (99%) diff --git a/404.html b/404.html index 0377d3d..216ce4a 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ 404 | Vue-H5-Template - + @@ -13,7 +13,7 @@
Skip to content

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.

Released under the MIT License.

- diff --git a/assets/guide_about_index.md.9cd5ee99.js b/assets/guide_about_index.md.3268f72f.js similarity index 52% rename from assets/guide_about_index.md.9cd5ee99.js rename to assets/guide_about_index.md.3268f72f.js index 81740e2..4341d83 100644 --- a/assets/guide_about_index.md.9cd5ee99.js +++ b/assets/guide_about_index.md.3268f72f.js @@ -1 +1 @@ -import"./chunks/theme.c4d303ac.js";import{_ as o,o as s,c as a,O as n,Q as c,z as t}from"./chunks/framework.6241eaf2.js";const d=e=>(n("data-v-77d3d7d2"),e=e(),c(),e),p=d(()=>t("p",{style:{"margin-bottom":"50px"}},[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/account.jpg",width:"300"})],-1)),_=d(()=>t("p",null,[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/group.jpg",width:"300"})],-1)),i=[p,_],x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"guide/about/index.md","filePath":"guide/about/index.md","lastUpdated":1687776555000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(u,h)=>(s(),a("div",null,i))}}),f=o(l,[["__scopeId","data-v-77d3d7d2"]]);export{x as __pageData,f as default}; +import"./chunks/theme.c4d303ac.js";import{_ as o,o as s,c as d,O as n,Q as c,z as t}from"./chunks/framework.6241eaf2.js";const a=e=>(n("data-v-72ad4494"),e=e(),c(),e),p=a(()=>t("p",{style:{"margin-bottom":"50px"}},[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/account.jpg",width:"300"})],-1)),_=a(()=>t("p",null,[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/group.jpg",width:"300"})],-1)),i=[p,_],x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"guide/about/index.md","filePath":"guide/about/index.md","lastUpdated":1731315864000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(u,h)=>(s(),d("div",null,i))}}),f=o(l,[["__scopeId","data-v-72ad4494"]]);export{x as __pageData,f as default}; diff --git a/assets/guide_about_index.md.9cd5ee99.lean.js b/assets/guide_about_index.md.3268f72f.lean.js similarity index 52% rename from assets/guide_about_index.md.9cd5ee99.lean.js rename to assets/guide_about_index.md.3268f72f.lean.js index 81740e2..4341d83 100644 --- a/assets/guide_about_index.md.9cd5ee99.lean.js +++ b/assets/guide_about_index.md.3268f72f.lean.js @@ -1 +1 @@ -import"./chunks/theme.c4d303ac.js";import{_ as o,o as s,c as a,O as n,Q as c,z as t}from"./chunks/framework.6241eaf2.js";const d=e=>(n("data-v-77d3d7d2"),e=e(),c(),e),p=d(()=>t("p",{style:{"margin-bottom":"50px"}},[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/account.jpg",width:"300"})],-1)),_=d(()=>t("p",null,[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/group.jpg",width:"300"})],-1)),i=[p,_],x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"guide/about/index.md","filePath":"guide/about/index.md","lastUpdated":1687776555000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(u,h)=>(s(),a("div",null,i))}}),f=o(l,[["__scopeId","data-v-77d3d7d2"]]);export{x as __pageData,f as default}; +import"./chunks/theme.c4d303ac.js";import{_ as o,o as s,c as d,O as n,Q as c,z as t}from"./chunks/framework.6241eaf2.js";const a=e=>(n("data-v-72ad4494"),e=e(),c(),e),p=a(()=>t("p",{style:{"margin-bottom":"50px"}},[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/account.jpg",width:"300"})],-1)),_=a(()=>t("p",null,[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/group.jpg",width:"300"})],-1)),i=[p,_],x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"guide/about/index.md","filePath":"guide/about/index.md","lastUpdated":1731315864000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(u,h)=>(s(),d("div",null,i))}}),f=o(l,[["__scopeId","data-v-72ad4494"]]);export{x as __pageData,f as default}; diff --git a/assets/guide_edit.md.4c959ba5.js b/assets/guide_edit.md.4c959ba5.js deleted file mode 100644 index bcae589..0000000 --- a/assets/guide_edit.md.4c959ba5.js +++ /dev/null @@ -1,11 +0,0 @@ -import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"参与编辑","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","filePath":"guide/edit.md","lastUpdated":1687776555000}'),t={name:"guide/edit.md"},l=e(`

参与编辑

欢迎有意愿参与到开源的朋友,加入到本文档的编写,书写文档不仅是教会别人知识,更是用自己的表达方式概括自己所学习知识的一种方式,这对个人来说是不可多得的成长机会。

js
// 拉取项目
-git clone https://github.com/sunniejs/vue-h5-template
-
-// 切换分支
-git checkout -b docs origin/docs
-
-// 安装依赖
-yarn install
-
-// 启动项目
-yarn start
`,3),p=[l];function o(c,i,r,d,_,y){return a(),n("div",null,p)}const C=s(t,[["render",o]]);export{u as __pageData,C as default}; diff --git a/assets/guide_edit.md.4c959ba5.lean.js b/assets/guide_edit.md.4c959ba5.lean.js deleted file mode 100644 index 6c82649..0000000 --- a/assets/guide_edit.md.4c959ba5.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"参与编辑","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","filePath":"guide/edit.md","lastUpdated":1687776555000}'),t={name:"guide/edit.md"},l=e("",3),p=[l];function o(c,i,r,d,_,y){return a(),n("div",null,p)}const C=s(t,[["render",o]]);export{u as __pageData,C as default}; diff --git a/assets/guide_edit.md.7944bd49.js b/assets/guide_edit.md.7944bd49.js new file mode 100644 index 0000000..c73cea8 --- /dev/null +++ b/assets/guide_edit.md.7944bd49.js @@ -0,0 +1,11 @@ +import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const h=JSON.parse('{"title":"参与编辑","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","filePath":"guide/edit.md","lastUpdated":1731315864000}'),e={name:"guide/edit.md"},t=l(`

参与编辑

欢迎有意愿参与到开源的朋友,加入到本文档的编写,书写文档不仅是教会别人知识,更是用自己的表达方式概括自己所学习知识的一种方式,这对个人来说是不可多得的成长机会。

bash
# 拉取项目
+git clone https://github.com/sunniejs/vue-h5-template
+
+# 切换分支
+git checkout -b docs origin/docs
+
+# 安装依赖
+yarn install
+
+# 启动项目
+yarn start
`,3),p=[t];function o(c,i,r,d,y,C){return a(),n("div",null,p)}const A=s(e,[["render",o]]);export{h as __pageData,A as default}; diff --git a/assets/guide_edit.md.7944bd49.lean.js b/assets/guide_edit.md.7944bd49.lean.js new file mode 100644 index 0000000..a740065 --- /dev/null +++ b/assets/guide_edit.md.7944bd49.lean.js @@ -0,0 +1 @@ +import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const h=JSON.parse('{"title":"参与编辑","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","filePath":"guide/edit.md","lastUpdated":1731315864000}'),e={name:"guide/edit.md"},t=l("",3),p=[t];function o(c,i,r,d,y,C){return a(),n("div",null,p)}const A=s(e,[["render",o]]);export{h as __pageData,A as default}; diff --git a/assets/guide_index.md.3a64f07e.js b/assets/guide_index.md.46287c77.js similarity index 97% rename from assets/guide_index.md.3a64f07e.js rename to assets/guide_index.md.46287c77.js index 9eb2508..b5fde9f 100644 --- a/assets/guide_index.md.3a64f07e.js +++ b/assets/guide_index.md.46287c77.js @@ -1 +1 @@ -import{_ as e,o as a,c as t,R as i}from"./chunks/framework.6241eaf2.js";const m=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md","lastUpdated":1687776555000}'),r={name:"guide/index.md"},l=i('

Vue-H5-Template

Vue-H5-Template,是基于 vite3 + vue3 + pinia + ( Vant or Varlet or NutUI ) + viewport 适配方案 ,构建移动端快速开发脚手架

特点

最新技术栈

基于 TypeScript

轻量级

通俗易懂的文档

',11),o=[l];function n(s,h,u,d,c,p){return a(),t("div",null,o)}const f=e(r,[["render",n]]);export{m as __pageData,f as default}; +import{_ as e,o as a,c as t,R as i}from"./chunks/framework.6241eaf2.js";const m=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md","lastUpdated":1731315864000}'),r={name:"guide/index.md"},l=i('

Vue-H5-Template

Vue-H5-Template,是基于 vite3 + vue3 + pinia + ( Vant or Varlet or NutUI ) + viewport 适配方案 ,构建移动端快速开发脚手架

特点

最新技术栈

基于 TypeScript

轻量级

通俗易懂的文档

',11),o=[l];function n(s,h,u,d,c,p){return a(),t("div",null,o)}const f=e(r,[["render",n]]);export{m as __pageData,f as default}; diff --git a/assets/guide_index.md.3a64f07e.lean.js b/assets/guide_index.md.46287c77.lean.js similarity index 84% rename from assets/guide_index.md.3a64f07e.lean.js rename to assets/guide_index.md.46287c77.lean.js index 894401c..5362544 100644 --- a/assets/guide_index.md.3a64f07e.lean.js +++ b/assets/guide_index.md.46287c77.lean.js @@ -1 +1 @@ -import{_ as e,o as a,c as t,R as i}from"./chunks/framework.6241eaf2.js";const m=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md","lastUpdated":1687776555000}'),r={name:"guide/index.md"},l=i("",11),o=[l];function n(s,h,u,d,c,p){return a(),t("div",null,o)}const f=e(r,[["render",n]]);export{m as __pageData,f as default}; +import{_ as e,o as a,c as t,R as i}from"./chunks/framework.6241eaf2.js";const m=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","filePath":"guide/index.md","lastUpdated":1731315864000}'),r={name:"guide/index.md"},l=i("",11),o=[l];function n(s,h,u,d,c,p){return a(),t("div",null,o)}const f=e(r,[["render",n]]);export{m as __pageData,f as default}; diff --git a/assets/guide_other_index.md.0962dd47.js b/assets/guide_other_index.md.5aef07ec.js similarity index 51% rename from assets/guide_other_index.md.0962dd47.js rename to assets/guide_other_index.md.5aef07ec.js index 9186a9d..bbf025c 100644 --- a/assets/guide_other_index.md.0962dd47.js +++ b/assets/guide_other_index.md.5aef07ec.js @@ -1 +1 @@ -import{_ as e,o as a,c as t,R as r}from"./chunks/framework.6241eaf2.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/other/index.md","filePath":"guide/other/index.md","lastUpdated":1687776555000}'),o={name:"guide/other/index.md"},i=r('

1、为什么有多个组件库?

本模版想做到的是尽可能的开箱即用,不用去看别的文档引入相关组件库,毕竟做减法比做加法要容易些,如你不需要某个组件库可以根据这篇指引去移除某个组件库

2、我可以用在个人或公司的项目吗?

模版基于 MIT License,你可以根据自己的需求用到不同的项目里,如果对你有帮助点个 star 支持一下呗 🌟

3、我是一个新手,有什么好的学习建议吗?

过来人的经验就是熟读文档可以少走很多弯路,很多的人文档没读熟就开始动手,出了问题也不知道如何去解决,墙裂建议先把文档熟读

',6),n=[i];function _(d,s,h,c,l,p){return a(),t("div",null,n)}const m=e(o,[["render",_]]);export{f as __pageData,m as default}; +import{_ as e,o as a,c as t,R as r}from"./chunks/framework.6241eaf2.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/other/index.md","filePath":"guide/other/index.md","lastUpdated":1731315864000}'),o={name:"guide/other/index.md"},i=r('

1、为什么有多个组件库?

本模版想做到的是尽可能的开箱即用,不用去看别的文档引入相关组件库,毕竟做减法比做加法要容易些,如你不需要某个组件库可以根据这篇指引去移除某个组件库

2、我可以用在个人或公司的项目吗?

模版基于 MIT License,你可以根据自己的需求用到不同的项目里,如果对你有帮助点个 star 支持一下呗 🌟

3、我是一个新手,有什么好的学习建议吗?

过来人的经验就是熟读文档可以少走很多弯路,很多的人文档没读熟就开始动手,出了问题也不知道如何去解决,墙裂建议先把文档熟读

',6),n=[i];function _(d,s,h,c,l,p){return a(),t("div",null,n)}const m=e(o,[["render",_]]);export{f as __pageData,m as default}; diff --git a/assets/guide_other_index.md.0962dd47.lean.js b/assets/guide_other_index.md.5aef07ec.lean.js similarity index 84% rename from assets/guide_other_index.md.0962dd47.lean.js rename to assets/guide_other_index.md.5aef07ec.lean.js index 192e25e..c9aa830 100644 --- a/assets/guide_other_index.md.0962dd47.lean.js +++ b/assets/guide_other_index.md.5aef07ec.lean.js @@ -1 +1 @@ -import{_ as e,o as a,c as t,R as r}from"./chunks/framework.6241eaf2.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/other/index.md","filePath":"guide/other/index.md","lastUpdated":1687776555000}'),o={name:"guide/other/index.md"},i=r("",6),n=[i];function _(d,s,h,c,l,p){return a(),t("div",null,n)}const m=e(o,[["render",_]]);export{f as __pageData,m as default}; +import{_ as e,o as a,c as t,R as r}from"./chunks/framework.6241eaf2.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/other/index.md","filePath":"guide/other/index.md","lastUpdated":1731315864000}'),o={name:"guide/other/index.md"},i=r("",6),n=[i];function _(d,s,h,c,l,p){return a(),t("div",null,n)}const m=e(o,[["render",_]]);export{f as __pageData,m as default}; diff --git a/assets/guide_start.md.18fddbf4.js b/assets/guide_start.md.634b98ba.js similarity index 96% rename from assets/guide_start.md.18fddbf4.js rename to assets/guide_start.md.634b98ba.js index 6cb2c57..7c5e8b2 100644 --- a/assets/guide_start.md.18fddbf4.js +++ b/assets/guide_start.md.634b98ba.js @@ -1 +1 @@ -import{_ as e,o as a,c as t,R as r}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start.md","filePath":"guide/start.md","lastUpdated":1687776555000}'),n={name:"guide/start.md"},o=r('

快速上手

node 版本要求

推荐 16.17.0+以上的版本,毕竟 2022 年了,别掐着 12+的版本了,你也可以使用nvmnvm-windows在同一台电脑上管理多个 node 版本。

包管理器

尽量使用 yarn 或者 pnpm,本项目仅保证在 yarn 或 pnpm 下正确运行,npm 涉及到网络环境等各种情况的限制不做过多考虑。如要使用 npm 请不要切换淘宝镜像,会有各种奇怪的 bug。

启动项目

项目中包含 vue2 和 vue3 两套模版

如你使用的是 vue2-template,请参考vue2 项目启动

如你使用的是 vue3-template,请参考vue3 项目启动

',9),s=[o];function d(h,i,l,p,c,_){return a(),t("div",null,s)}const f=e(n,[["render",d]]);export{u as __pageData,f as default}; +import{_ as e,o as a,c as t,R as r}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start.md","filePath":"guide/start.md","lastUpdated":1731315864000}'),n={name:"guide/start.md"},o=r('

快速上手

node 版本要求

推荐 16.17.0+以上的版本,毕竟 2022 年了,别掐着 12+的版本了,你也可以使用nvmnvm-windows在同一台电脑上管理多个 node 版本。

包管理器

尽量使用 yarn 或者 pnpm,本项目仅保证在 yarn 或 pnpm 下正确运行,npm 涉及到网络环境等各种情况的限制不做过多考虑。如要使用 npm 请不要切换淘宝镜像,会有各种奇怪的 bug。

启动项目

项目中包含 vue2 和 vue3 两套模版

如你使用的是 vue2-template,请参考vue2 项目启动

如你使用的是 vue3-template,请参考vue3 项目启动

',9),s=[o];function d(h,i,l,p,c,_){return a(),t("div",null,s)}const f=e(n,[["render",d]]);export{u as __pageData,f as default}; diff --git a/assets/guide_start.md.18fddbf4.lean.js b/assets/guide_start.md.634b98ba.lean.js similarity index 84% rename from assets/guide_start.md.18fddbf4.lean.js rename to assets/guide_start.md.634b98ba.lean.js index 397eca8..7e19a90 100644 --- a/assets/guide_start.md.18fddbf4.lean.js +++ b/assets/guide_start.md.634b98ba.lean.js @@ -1 +1 @@ -import{_ as e,o as a,c as t,R as r}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start.md","filePath":"guide/start.md","lastUpdated":1687776555000}'),n={name:"guide/start.md"},o=r("",9),s=[o];function d(h,i,l,p,c,_){return a(),t("div",null,s)}const f=e(n,[["render",d]]);export{u as __pageData,f as default}; +import{_ as e,o as a,c as t,R as r}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start.md","filePath":"guide/start.md","lastUpdated":1731315864000}'),n={name:"guide/start.md"},o=r("",9),s=[o];function d(h,i,l,p,c,_){return a(),t("div",null,s)}const f=e(n,[["render",d]]);export{u as __pageData,f as default}; diff --git a/assets/guide_vue2_alias.md.306b63fa.js b/assets/guide_vue2_alias.md.c0d9e31c.js similarity index 98% rename from assets/guide_vue2_alias.md.306b63fa.js rename to assets/guide_vue2_alias.md.c0d9e31c.js index 2abc27f..7bb272f 100644 --- a/assets/guide_vue2_alias.md.306b63fa.js +++ b/assets/guide_vue2_alias.md.c0d9e31c.js @@ -1,4 +1,4 @@ -import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"配置 alias 别名","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","filePath":"guide/vue2/alias.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/alias.md"},p=o(`

配置 alias 别名

javascript
const path = require("path");
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"配置 alias 别名","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","filePath":"guide/vue2/alias.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/alias.md"},p=o(`

配置 alias 别名

javascript
const path = require("path");
 const resolve = (dir) => path.join(__dirname, dir);
 const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
 
diff --git a/assets/guide_vue2_alias.md.306b63fa.lean.js b/assets/guide_vue2_alias.md.c0d9e31c.lean.js
similarity index 70%
rename from assets/guide_vue2_alias.md.306b63fa.lean.js
rename to assets/guide_vue2_alias.md.c0d9e31c.lean.js
index 19bb86b..b9dd079 100644
--- a/assets/guide_vue2_alias.md.306b63fa.lean.js
+++ b/assets/guide_vue2_alias.md.c0d9e31c.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"配置 alias 别名","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","filePath":"guide/vue2/alias.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/alias.md"},p=o("",2),e=[p];function t(c,r,F,D,y,A){return a(),n("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"配置 alias 别名","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","filePath":"guide/vue2/alias.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/alias.md"},p=o("",2),e=[p];function t(c,r,F,D,y,A){return a(),n("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};
diff --git a/assets/guide_vue2_axios.md.a682218e.js b/assets/guide_vue2_axios.md.f273628e.js
similarity index 93%
rename from assets/guide_vue2_axios.md.a682218e.js
rename to assets/guide_vue2_axios.md.f273628e.js
index 842d141..64d7229 100644
--- a/assets/guide_vue2_axios.md.a682218e.js
+++ b/assets/guide_vue2_axios.md.f273628e.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"Axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/axios.md","filePath":"guide/vue2/axios.md","lastUpdated":1687776555000}'),o={name:"guide/vue2/axios.md"},p=l(`

Axios 封装及接口管理

utils/request.js 封装 axios ,开发者需要根据后台接口做修改。

  • service.interceptors.request.use 里可以设置请求头,比如设置 token
  • config.hideloading 是在 api 文件夹下的接口参数里设置,下文会讲
  • service.interceptors.response.use 里可以对接口返回数据处理,比如 401 删除本地信息,重新登录
javascript
import axios from "axios";
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"Axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/axios.md","filePath":"guide/vue2/axios.md","lastUpdated":1731315864000}'),o={name:"guide/vue2/axios.md"},p=l(`

Axios 封装及接口管理

utils/request.js 封装 axios ,开发者需要根据后台接口做修改。

  • service.interceptors.request.use 里可以设置请求头,比如设置 token
  • config.hideloading 是在 api 文件夹下的接口参数里设置,下文会讲
  • service.interceptors.response.use 里可以对接口返回数据处理,比如 401 删除本地信息,重新登录
javascript
import axios from "axios";
 import store from "@/store";
 import { Toast } from "vant";
 // 根据环境不同引入不同api地址
@@ -54,7 +54,7 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const C=
     return Promise.reject(error);
   }
 );
-export default service;

接口管理

src/api 文件夹下统一管理接口

  • 你可以建立多个模块对接接口, 比如 home.js 里是首页的接口这里讲解 user.js
  • url 接口地址,请求的时候会拼接上 config 下的 baseApi
  • method 请求方法
  • data 请求参数 qs.stringify(params) 是对数据系列化操作
  • hideloading 默认 false,设置为 true 后,不显示 loading ui 交互中有些接口不需要让用户感知
javascript
import qs from "qs";
+export default service;

接口管理

src/api 文件夹下统一管理接口

  • 你可以建立多个模块对接接口, 比如 home.js 里是首页的接口这里讲解 user.js
  • url 接口地址,请求的时候会拼接上 config 下的 baseApi
  • method 请求方法
  • data 请求参数 qs.stringify(params) 是对数据系列化操作
  • hideloading 默认 false,设置为 true 后,不显示 loading ui 交互中有些接口不需要让用户感知
javascript
import qs from "qs";
 // axios
 import request from "@/utils/request";
 //user api
diff --git a/assets/guide_vue2_axios.md.a682218e.lean.js b/assets/guide_vue2_axios.md.f273628e.lean.js
similarity index 85%
rename from assets/guide_vue2_axios.md.a682218e.lean.js
rename to assets/guide_vue2_axios.md.f273628e.lean.js
index dad45a4..660092c 100644
--- a/assets/guide_vue2_axios.md.a682218e.lean.js
+++ b/assets/guide_vue2_axios.md.f273628e.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"Axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/axios.md","filePath":"guide/vue2/axios.md","lastUpdated":1687776555000}'),o={name:"guide/vue2/axios.md"},p=l("",10),e=[p];function t(c,r,F,y,D,i){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{C as __pageData,u as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"Axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/axios.md","filePath":"guide/vue2/axios.md","lastUpdated":1731315864000}'),o={name:"guide/vue2/axios.md"},p=l("",10),e=[p];function t(c,r,F,y,D,i){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{C as __pageData,u as default};
diff --git a/assets/guide_vue2_base.md.7d4266ed.js b/assets/guide_vue2_base.md.bd933227.js
similarity index 99%
rename from assets/guide_vue2_base.md.7d4266ed.js
rename to assets/guide_vue2_base.md.bd933227.js
index 2a5ec55..16866ea 100644
--- a/assets/guide_vue2_base.md.7d4266ed.js
+++ b/assets/guide_vue2_base.md.bd933227.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"Webpack 4 vue.config.js 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/base.md","filePath":"guide/vue2/base.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/base.md"},o=l(`

Webpack 4 vue.config.js 基础配置

如果你的 Vue Router 模式是 hash

javascript
publicPath: './',

如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Router base 保持一致

javascript
publicPath: '/app/',

配置如下

javascript
import { createVitePlugins } from "./config/vite/plugins";
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"Webpack 4 vue.config.js 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/base.md","filePath":"guide/vue2/base.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/base.md"},o=l(`

Webpack 4 vue.config.js 基础配置

如果你的 Vue Router 模式是 hash

javascript
publicPath: './',

如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Router base 保持一致

javascript
publicPath: '/app/',

配置如下

javascript
import { createVitePlugins } from "./config/vite/plugins";
 import { resolve } from "path";
 import { ConfigEnv, UserConfigExport } from "vite";
 
diff --git a/assets/guide_vue2_base.md.7d4266ed.lean.js b/assets/guide_vue2_base.md.bd933227.lean.js
similarity index 85%
rename from assets/guide_vue2_base.md.7d4266ed.lean.js
rename to assets/guide_vue2_base.md.bd933227.lean.js
index 0bc646a..498ded4 100644
--- a/assets/guide_vue2_base.md.7d4266ed.lean.js
+++ b/assets/guide_vue2_base.md.bd933227.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"Webpack 4 vue.config.js 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/base.md","filePath":"guide/vue2/base.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/base.md"},o=l("",7),e=[o];function t(c,r,F,D,y,i){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"Webpack 4 vue.config.js 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/base.md","filePath":"guide/vue2/base.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/base.md"},o=l("",7),e=[o];function t(c,r,F,D,y,i){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};
diff --git a/assets/guide_vue2_bundle.md.2fe1a9fb.js b/assets/guide_vue2_bundle.md.73aeb293.js
similarity index 98%
rename from assets/guide_vue2_bundle.md.2fe1a9fb.js
rename to assets/guide_vue2_bundle.md.73aeb293.js
index 9ace0cc..818148c 100644
--- a/assets/guide_vue2_bundle.md.2fe1a9fb.js
+++ b/assets/guide_vue2_bundle.md.73aeb293.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"配置打包分析","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/bundle.md","filePath":"guide/vue2/bundle.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/bundle.md"},o=l(`

配置打包分析

javascript
const BundleAnalyzerPlugin =
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"配置打包分析","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/bundle.md","filePath":"guide/vue2/bundle.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/bundle.md"},o=l(`

配置打包分析

javascript
const BundleAnalyzerPlugin =
   require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
 
 module.exports = {
diff --git a/assets/guide_vue2_bundle.md.2fe1a9fb.lean.js b/assets/guide_vue2_bundle.md.73aeb293.lean.js
similarity index 85%
rename from assets/guide_vue2_bundle.md.2fe1a9fb.lean.js
rename to assets/guide_vue2_bundle.md.73aeb293.lean.js
index 4c6fa82..f1bbe5d 100644
--- a/assets/guide_vue2_bundle.md.2fe1a9fb.lean.js
+++ b/assets/guide_vue2_bundle.md.73aeb293.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"配置打包分析","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/bundle.md","filePath":"guide/vue2/bundle.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/bundle.md"},o=l("",3),e=[o];function t(c,r,y,D,F,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{C as __pageData,d as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"配置打包分析","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/bundle.md","filePath":"guide/vue2/bundle.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/bundle.md"},o=l("",3),e=[o];function t(c,r,y,D,F,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{C as __pageData,d as default};
diff --git a/assets/guide_vue2_chunks.md.0130f8b3.js b/assets/guide_vue2_chunks.md.93504c3d.js
similarity index 99%
rename from assets/guide_vue2_chunks.md.0130f8b3.js
rename to assets/guide_vue2_chunks.md.93504c3d.js
index 02aa31c..f46bdee 100644
--- a/assets/guide_vue2_chunks.md.0130f8b3.js
+++ b/assets/guide_vue2_chunks.md.93504c3d.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"splitChunks 单独打包第三方模块","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/chunks.md","filePath":"guide/vue2/chunks.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/chunks.md"},o=l(`

splitChunks 单独打包第三方模块

javascript
module.exports = {
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"splitChunks 单独打包第三方模块","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/chunks.md","filePath":"guide/vue2/chunks.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/chunks.md"},o=l(`

splitChunks 单独打包第三方模块

javascript
module.exports = {
   chainWebpack: (config) => {
     config.when(IS_PROD, (config) => {
       config
diff --git a/assets/guide_vue2_chunks.md.0130f8b3.lean.js b/assets/guide_vue2_chunks.md.93504c3d.lean.js
similarity index 86%
rename from assets/guide_vue2_chunks.md.0130f8b3.lean.js
rename to assets/guide_vue2_chunks.md.93504c3d.lean.js
index 29a7f00..728c7ab 100644
--- a/assets/guide_vue2_chunks.md.0130f8b3.lean.js
+++ b/assets/guide_vue2_chunks.md.93504c3d.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"splitChunks 单独打包第三方模块","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/chunks.md","filePath":"guide/vue2/chunks.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/chunks.md"},o=l("",2),t=[o];function e(c,F,r,y,D,i){return n(),a("div",null,t)}const A=s(p,[["render",e]]);export{u as __pageData,A as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"splitChunks 单独打包第三方模块","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/chunks.md","filePath":"guide/vue2/chunks.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/chunks.md"},o=l("",2),t=[o];function e(c,F,r,y,D,i){return n(),a("div",null,t)}const A=s(p,[["render",e]]);export{u as __pageData,A as default};
diff --git a/assets/guide_vue2_console.md.51b49cb0.js b/assets/guide_vue2_console.md.68673d37.js
similarity index 99%
rename from assets/guide_vue2_console.md.51b49cb0.js
rename to assets/guide_vue2_console.md.68673d37.js
index b8e4137..ebdd7e3 100644
--- a/assets/guide_vue2_console.md.51b49cb0.js
+++ b/assets/guide_vue2_console.md.68673d37.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"去掉 console.log","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/console.md","filePath":"guide/vue2/console.md","lastUpdated":1687776555000}'),o={name:"guide/vue2/console.md"},p=l(`

去掉 console.log

保留了测试环境和本地环境的 console.log

bash
npm i -D babel-plugin-transform-remove-console

在 babel.config.js 中配置

javascript
// 获取 VUE_APP_ENV 非 NODE_ENV,测试环境依然 console
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"去掉 console.log","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/console.md","filePath":"guide/vue2/console.md","lastUpdated":1731315864000}'),o={name:"guide/vue2/console.md"},p=l(`

去掉 console.log

保留了测试环境和本地环境的 console.log

bash
npm i -D babel-plugin-transform-remove-console

在 babel.config.js 中配置

javascript
// 获取 VUE_APP_ENV 非 NODE_ENV,测试环境依然 console
 const IS_PROD = ["production", "prod"].includes(process.env.VUE_APP_ENV);
 const plugins = [
   [
diff --git a/assets/guide_vue2_console.md.51b49cb0.lean.js b/assets/guide_vue2_console.md.68673d37.lean.js
similarity index 85%
rename from assets/guide_vue2_console.md.51b49cb0.lean.js
rename to assets/guide_vue2_console.md.68673d37.lean.js
index 242dafe..95264cf 100644
--- a/assets/guide_vue2_console.md.51b49cb0.lean.js
+++ b/assets/guide_vue2_console.md.68673d37.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"去掉 console.log","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/console.md","filePath":"guide/vue2/console.md","lastUpdated":1687776555000}'),o={name:"guide/vue2/console.md"},p=l("",5),e=[p];function t(c,r,D,y,F,C){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{i as __pageData,u as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"去掉 console.log","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/console.md","filePath":"guide/vue2/console.md","lastUpdated":1731315864000}'),o={name:"guide/vue2/console.md"},p=l("",5),e=[p];function t(c,r,D,y,F,C){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{i as __pageData,u as default};
diff --git a/assets/guide_vue2_env.md.c800a293.js b/assets/guide_vue2_env.md.71078dec.js
similarity index 86%
rename from assets/guide_vue2_env.md.c800a293.js
rename to assets/guide_vue2_env.md.71078dec.js
index c5a5b96..b089454 100644
--- a/assets/guide_vue2_env.md.c800a293.js
+++ b/assets/guide_vue2_env.md.71078dec.js
@@ -1,14 +1,14 @@
-import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"配置多环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","filePath":"guide/vue2/env.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/env.md"},p=o(`

配置多环境变量

package.json 里的 scripts 配置 serve stage build,通过 --mode xxx 来执行不同环境

  • 通过 npm run serve 启动本地 , 执行 development
  • 通过 npm run stage 打包测试 , 执行 staging
  • 通过 npm run build 打包正式 , 执行 production
javascript
"scripts": {
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"配置多环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","filePath":"guide/vue2/env.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/env.md"},p=o(`

配置多环境变量

package.json 里的 scripts 配置 serve stage build,通过 --mode xxx 来执行不同环境

  • 通过 npm run serve 启动本地 , 执行 development
  • 通过 npm run stage 打包测试 , 执行 staging
  • 通过 npm run build 打包正式 , 执行 production
javascript
"scripts": {
   "serve": "vue-cli-service serve --open",
   "stage": "vue-cli-service build --mode staging",
   "build": "vue-cli-service build",
-}
配置介绍

  以 VUE_APP_ 开头的变量,在代码中可以通过 process.env.VUE_APP_ 访问。
  比如,VUE_APP_ENV = 'development' 通过process.env.VUE_APP_ENV 访问。
  除了 VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量NODE_ENVBASE_URL

在项目根目录中新建.env.*

  • .env.development 本地开发环境配置
bash
NODE_ENV='development'
+}
配置介绍

  以 VUE_APP_ 开头的变量,在代码中可以通过 process.env.VUE_APP_ 访问。   比如:VUE_APP_ENV = 'development' 通过 process.env.VUE_APP_ENV 访问。   当然,除了 VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量NODE_ENVBASE_URL

在项目根目录中新建.env.*

  • .env.development 本地开发环境配置
bash
NODE_ENV='development'
 # must start with VUE_APP_
 VUE_APP_ENV = 'development'
  • .env.staging 测试环境配置
bash
NODE_ENV='production'
 # must start with VUE_APP_
 VUE_APP_ENV = 'staging'
  • .env.production 正式环境配置
bash
NODE_ENV='production'
 # must start with VUE_APP_
-VUE_APP_ENV = 'production'

这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV development staging production
变量我们统一在 src/config/env.*.js 里进行管理。

这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢?
修改起来方便,不需 要重启项目,符合开发习惯。

config/index.js

javascript
// 根据环境引入不同配置 process.env.NODE_ENV
+VUE_APP_ENV = 'production'

这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV development staging production 变量我们统一在 src/config/env.*.js 里进行管理。

这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢? 修改起来方便,不需 要重启项目,符合开发习惯。

config/index.js

javascript
// 根据环境引入不同配置 process.env.NODE_ENV
 const config = require("./env." + process.env.VUE_APP_ENV);
 module.exports = config;

配置对应环境的变量,拿本地环境文件 env.development.js 举例,用户可以根据需求修改

javascript
// 本地环境配置
 module.exports = {
diff --git a/assets/guide_vue2_env.md.c800a293.lean.js b/assets/guide_vue2_env.md.71078dec.lean.js
similarity index 70%
rename from assets/guide_vue2_env.md.c800a293.lean.js
rename to assets/guide_vue2_env.md.71078dec.lean.js
index 564201e..2f1ff42 100644
--- a/assets/guide_vue2_env.md.c800a293.lean.js
+++ b/assets/guide_vue2_env.md.71078dec.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"配置多环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","filePath":"guide/vue2/env.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/env.md"},p=o("",21),e=[p];function t(c,r,D,y,i,F){return a(),n("div",null,e)}const A=s(l,[["render",t]]);export{C as __pageData,A as default};
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"配置多环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","filePath":"guide/vue2/env.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/env.md"},p=o("",21),e=[p];function t(c,r,D,y,i,F){return a(),n("div",null,e)}const A=s(l,[["render",t]]);export{C as __pageData,A as default};
diff --git a/assets/guide_vue2_externals.md.69c0669f.js b/assets/guide_vue2_externals.md.6744fb41.js
similarity index 93%
rename from assets/guide_vue2_externals.md.69c0669f.js
rename to assets/guide_vue2_externals.md.6744fb41.js
index abe852a..7661c91 100644
--- a/assets/guide_vue2_externals.md.69c0669f.js
+++ b/assets/guide_vue2_externals.md.6744fb41.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"配置 externals 引入 cdn 资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/externals.md","filePath":"guide/vue2/externals.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/externals.md"},o=l(`

配置 externals 引入 cdn 资源

这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可 以实际测试一下。

另外项目中使用的是公共 CDN 不稳定,域名解析也是需要时间的(如果你要使用请尽量使用同一个域名)

因为页面每次遇到<script>标签都会停下来解析执行,所以应该尽可能减少<script>标签的数量 HTTP请求存在一定的开销,100K 的文件比 5 个 20K 的文件下载的更快,所以较少脚本数量也是很有必要的

暂时还没有研究放到自己的 cdn 服务器上。

javascript
const defaultSettings = require("./src/config/index.js");
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"配置 externals 引入 cdn 资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/externals.md","filePath":"guide/vue2/externals.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/externals.md"},o=l(`

配置 externals 引入 cdn 资源

这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可 以实际测试一下。

另外项目中使用的是公共 CDN 不稳定,域名解析也是需要时间的(如果你要使用请尽量使用同一个域名)

因为页面每次遇到<script>标签都会停下来解析执行,所以应该尽可能减少<script>标签的数量 HTTP请求存在一定的开销,100K 的文件比 5 个 20K 的文件下载的更快,所以较少脚本数量也是很有必要的

暂时还没有研究放到自己的 cdn 服务器上。

javascript
const defaultSettings = require("./src/config/index.js");
 const name = defaultSettings.title || "vue mobile template";
 const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
 
diff --git a/assets/guide_vue2_externals.md.69c0669f.lean.js b/assets/guide_vue2_externals.md.6744fb41.lean.js
similarity index 86%
rename from assets/guide_vue2_externals.md.69c0669f.lean.js
rename to assets/guide_vue2_externals.md.6744fb41.lean.js
index 9381ee8..180a910 100644
--- a/assets/guide_vue2_externals.md.69c0669f.lean.js
+++ b/assets/guide_vue2_externals.md.6744fb41.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"配置 externals 引入 cdn 资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/externals.md","filePath":"guide/vue2/externals.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/externals.md"},o=l("",8),t=[o];function e(c,D,r,F,y,C){return n(),a("div",null,t)}const u=s(p,[["render",e]]);export{i as __pageData,u as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"配置 externals 引入 cdn 资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/externals.md","filePath":"guide/vue2/externals.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/externals.md"},o=l("",8),t=[o];function e(c,D,r,F,y,C){return n(),a("div",null,t)}const u=s(p,[["render",e]]);export{i as __pageData,u as default};
diff --git a/assets/guide_vue2_ie.md.83d021b7.js b/assets/guide_vue2_ie.md.f5d567e9.js
similarity index 98%
rename from assets/guide_vue2_ie.md.83d021b7.js
rename to assets/guide_vue2_ie.md.f5d567e9.js
index 5abcdb6..b872ba0 100644
--- a/assets/guide_vue2_ie.md.83d021b7.js
+++ b/assets/guide_vue2_ie.md.f5d567e9.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"添加 IE 兼容","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/ie.md","filePath":"guide/vue2/ie.md","lastUpdated":1687776555000}'),o={name:"guide/vue2/ie.md"},l=e(`

添加 IE 兼容

之前的方式 会报 @babel/polyfill is deprecated. Please, use required parts of core-js and regenerator-runtime/runtime separately

@babel/polyfill 废弃,使用 core-jsregenerator-runtime

bash
npm i --save core-js regenerator-runtime

main.js 中添加

javascript
// 兼容 IE
+import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"添加 IE 兼容","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/ie.md","filePath":"guide/vue2/ie.md","lastUpdated":1731315864000}'),o={name:"guide/vue2/ie.md"},l=e(`

添加 IE 兼容

之前的方式 会报 @babel/polyfill is deprecated. Please, use required parts of core-js and regenerator-runtime/runtime separately

@babel/polyfill 废弃,使用 core-jsregenerator-runtime

bash
npm i --save core-js regenerator-runtime

main.js 中添加

javascript
// 兼容 IE
 // https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
 import "core-js/stable";
 import "regenerator-runtime/runtime";

配置 babel.config.js

javascript
const plugins = [];
diff --git a/assets/guide_vue2_ie.md.83d021b7.lean.js b/assets/guide_vue2_ie.md.f5d567e9.lean.js
similarity index 84%
rename from assets/guide_vue2_ie.md.83d021b7.lean.js
rename to assets/guide_vue2_ie.md.f5d567e9.lean.js
index 027f856..52badc6 100644
--- a/assets/guide_vue2_ie.md.83d021b7.lean.js
+++ b/assets/guide_vue2_ie.md.f5d567e9.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"添加 IE 兼容","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/ie.md","filePath":"guide/vue2/ie.md","lastUpdated":1687776555000}'),o={name:"guide/vue2/ie.md"},l=e("",8),p=[l];function t(c,r,i,D,y,C){return a(),n("div",null,p)}const u=s(o,[["render",t]]);export{d as __pageData,u as default};
+import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"添加 IE 兼容","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/ie.md","filePath":"guide/vue2/ie.md","lastUpdated":1731315864000}'),o={name:"guide/vue2/ie.md"},l=e("",8),p=[l];function t(c,r,i,D,y,C){return a(),n("div",null,p)}const u=s(o,[["render",t]]);export{d as __pageData,u as default};
diff --git a/assets/guide_vue2_lint.md.d5070d4f.js b/assets/guide_vue2_lint.md.94bcc728.js
similarity index 98%
rename from assets/guide_vue2_lint.md.d5070d4f.js
rename to assets/guide_vue2_lint.md.94bcc728.js
index 29fe902..383d2ef 100644
--- a/assets/guide_vue2_lint.md.d5070d4f.js
+++ b/assets/guide_vue2_lint.md.94bcc728.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as o}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"Eslint + Pettier 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/lint.md","filePath":"guide/vue2/lint.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/lint.md"},p=o(`

Eslint + Pettier 统一开发规范

VScode (版本 1.47.3)安装 eslint prettier vetur 插件 .vue 文件使用 vetur 进行格式化,其他使用prettier,后面会 专门写个如何使用配合使用这三个玩意

在文件 .prettierrc 里写 属于你的 pettier 规则

bash
{
+import{_ as s,o as n,c as a,R as o}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"Eslint + Pettier 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/lint.md","filePath":"guide/vue2/lint.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/lint.md"},p=o(`

Eslint + Pettier 统一开发规范

VScode (版本 1.47.3)安装 eslint prettier vetur 插件 .vue 文件使用 vetur 进行格式化,其他使用prettier,后面会专门写个如何使用配合使用这三个玩意儿

在文件 .prettierrc 里写 属于你的 pettier 规则

bash
{
    "printWidth": 120,
    "tabWidth": 2,
    "singleQuote": true,
diff --git a/assets/guide_vue2_lint.md.d5070d4f.lean.js b/assets/guide_vue2_lint.md.94bcc728.lean.js
similarity index 85%
rename from assets/guide_vue2_lint.md.d5070d4f.lean.js
rename to assets/guide_vue2_lint.md.94bcc728.lean.js
index c43bc0a..02759bd 100644
--- a/assets/guide_vue2_lint.md.d5070d4f.lean.js
+++ b/assets/guide_vue2_lint.md.94bcc728.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as o}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"Eslint + Pettier 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/lint.md","filePath":"guide/vue2/lint.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/lint.md"},p=o("",6),t=[p];function e(c,r,C,y,A,F){return n(),a("div",null,t)}const i=s(l,[["render",e]]);export{u as __pageData,i as default};
+import{_ as s,o as n,c as a,R as o}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"Eslint + Pettier 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/lint.md","filePath":"guide/vue2/lint.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/lint.md"},p=o("",6),t=[p];function e(c,r,C,y,A,F){return n(),a("div",null,t)}const i=s(l,[["render",e]]);export{u as __pageData,i as default};
diff --git a/assets/guide_vue2_proxy.md.f5f5a403.js b/assets/guide_vue2_proxy.md.0d483f53.js
similarity index 98%
rename from assets/guide_vue2_proxy.md.f5f5a403.js
rename to assets/guide_vue2_proxy.md.0d483f53.js
index 2218360..b472294 100644
--- a/assets/guide_vue2_proxy.md.f5f5a403.js
+++ b/assets/guide_vue2_proxy.md.0d483f53.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as p}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"配置 proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/proxy.md","filePath":"guide/vue2/proxy.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/proxy.md"},o=p(`

配置 proxy 跨域

如果你的项目需要跨域设置,你需要打来 vue.config.js proxy 注释 并且配置相应参数

!!!注意:你还需要将 src/config/env.development.js 里的 baseApi 设置成 '/'

javascript
module.exports = {
+import{_ as s,o as a,c as n,R as p}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"配置 proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/proxy.md","filePath":"guide/vue2/proxy.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/proxy.md"},o=p(`

配置 proxy 跨域

如果你的项目需要跨域设置,你需要打来 vue.config.js proxy 注释 并且配置相应参数

!!!注意:你还需要将 src/config/env.development.js 里的 baseApi 设置成 '/'

javascript
module.exports = {
   devServer: {
     // ....
     proxy: {
diff --git a/assets/guide_vue2_proxy.md.f5f5a403.lean.js b/assets/guide_vue2_proxy.md.0d483f53.lean.js
similarity index 70%
rename from assets/guide_vue2_proxy.md.f5f5a403.lean.js
rename to assets/guide_vue2_proxy.md.0d483f53.lean.js
index 8d19e40..60d1abe 100644
--- a/assets/guide_vue2_proxy.md.f5f5a403.lean.js
+++ b/assets/guide_vue2_proxy.md.0d483f53.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as p}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"配置 proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/proxy.md","filePath":"guide/vue2/proxy.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/proxy.md"},o=p("",6),e=[o];function t(c,r,D,y,F,i){return a(),n("div",null,e)}const d=s(l,[["render",t]]);export{A as __pageData,d as default};
+import{_ as s,o as a,c as n,R as p}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"配置 proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/proxy.md","filePath":"guide/vue2/proxy.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/proxy.md"},o=p("",6),e=[o];function t(c,r,D,y,F,i){return a(),n("div",null,e)}const d=s(l,[["render",t]]);export{A as __pageData,d as default};
diff --git a/assets/guide_vue2_rem.md.769a5fda.js b/assets/guide_vue2_rem.md.05f1a99e.js
similarity index 70%
rename from assets/guide_vue2_rem.md.769a5fda.js
rename to assets/guide_vue2_rem.md.05f1a99e.js
index 36d4f3d..99d3f20 100644
--- a/assets/guide_vue2_rem.md.769a5fda.js
+++ b/assets/guide_vue2_rem.md.05f1a99e.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"rem 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/rem.md","filePath":"guide/vue2/rem.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/rem.md"},p=o(`

rem 适配方案

不用担心,项目已经配置好了 rem 适配, 下面仅做介绍:

Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:

PostCSS 配置

下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改

javascript
// https://github.com/michael-ciniawsky/postcss-load-config
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"rem 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/rem.md","filePath":"guide/vue2/rem.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/rem.md"},p=o(`

rem 适配方案

不用担心,项目已经配置好了 rem 适配, 下面仅做介绍:

Vant 中的样式默认使用px作为单位,如果需要使用rem单位,推荐使用以下两个工具:

PostCSS 配置

下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改

javascript
// https://github.com/michael-ciniawsky/postcss-load-config
 module.exports = {
   plugins: {
     autoprefixer: {
@@ -15,7 +15,7 @@ import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const d=
       propList: ["*"],
     },
   },
-};

更多详细信息: vant

新手必看,老鸟跳过

很多小伙伴会问我,适配的问题,因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上传到蓝湖,我们就可以需要的尺寸了。下面就大概普及一下 rem。

我们知道 1rem 等于html 根元素设定的 font-sizepx 值。Vant UI 设置 rootValue: 37.5,你可以看到在 iPhone 6 下看到 (1rem 等于 37.5px):

html
<html data-dpr="1" style="font-size: 37.5px;"></html>

切换不同的机型,根元素可能会有不同的font-size。当你写 css px 样式时,会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件,需要按照 rootValue: 37.5 来写样式。

举个例子:设计给了你一张 750px * 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。

  • rootValue: 70 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
  • rootValue: 37.5 的时候,样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。

当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。

html
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
+};

更多详细信息: vant

新手必看,老鸟跳过

很多小伙伴会问我,适配的问题,因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上传到蓝湖,我们就可以得到需要的尺寸了。下面就简单普及一下 rem 适配的原理。

我们知道 1rem 等于html 根元素设定的 font-sizepx 值。Vant UI 设置 rootValue: 37.5,你可以看到在 iPhone 6 下看到 (1rem 等于 37.5px):

html
<html data-dpr="1" style="font-size: 37.5px;"></html>

切换不同的机型,根元素可能会有不同的font-size。当你写 css px 样式时,会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件,需要按照 rootValue: 37.5 来写样式。

举个例子:设计给了你一张 750px * 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。

  • rootValue: 70 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
  • rootValue: 37.5 的时候,样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。

当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。

html
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
 
 <style>
   /* rootValue: 75 */
diff --git a/assets/guide_vue2_rem.md.769a5fda.lean.js b/assets/guide_vue2_rem.md.05f1a99e.lean.js
similarity index 70%
rename from assets/guide_vue2_rem.md.769a5fda.lean.js
rename to assets/guide_vue2_rem.md.05f1a99e.lean.js
index 6332634..642f113 100644
--- a/assets/guide_vue2_rem.md.769a5fda.lean.js
+++ b/assets/guide_vue2_rem.md.05f1a99e.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"rem 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/rem.md","filePath":"guide/vue2/rem.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/rem.md"},p=o("",19),e=[p];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(l,[["render",t]]);export{d as __pageData,A as default};
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"rem 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/rem.md","filePath":"guide/vue2/rem.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/rem.md"},p=o("",19),e=[p];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(l,[["render",t]]);export{d as __pageData,A as default};
diff --git a/assets/guide_vue2_router.md.d35b25e7.js b/assets/guide_vue2_router.md.369637ff.js
similarity index 89%
rename from assets/guide_vue2_router.md.d35b25e7.js
rename to assets/guide_vue2_router.md.369637ff.js
index d02d792..b737998 100644
--- a/assets/guide_vue2_router.md.d35b25e7.js
+++ b/assets/guide_vue2_router.md.369637ff.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/router.md","filePath":"guide/vue2/router.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/router.md"},p=o(`

Vue-router

本案例采用 hash 模式,开发者根据需求修改 mode base

注意:如果你使用了 history 模式,vue.config.js 中的 publicPath 要做对应的修改

前往:vue.config.js 基础配置

javascript
import Vue from "vue";
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/router.md","filePath":"guide/vue2/router.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/router.md"},p=o(`

Vue-router

本案例采用 hash 模式,开发者根据需求修改 mode base

注意:如果你使用了 history 模式,vue.config.js 中的 publicPath 要做对应的修改

前往: vue.config.js 基础配置

javascript
import Vue from "vue";
 import Router from "vue-router";
 
 Vue.use(Router);
diff --git a/assets/guide_vue2_router.md.d35b25e7.lean.js b/assets/guide_vue2_router.md.369637ff.lean.js
similarity index 70%
rename from assets/guide_vue2_router.md.d35b25e7.lean.js
rename to assets/guide_vue2_router.md.369637ff.lean.js
index 4c2c13f..1d0802a 100644
--- a/assets/guide_vue2_router.md.d35b25e7.lean.js
+++ b/assets/guide_vue2_router.md.369637ff.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/router.md","filePath":"guide/vue2/router.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/router.md"},p=o("",5),e=[p];function t(c,r,D,y,F,A){return a(),n("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/router.md","filePath":"guide/vue2/router.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/router.md"},p=o("",5),e=[p];function t(c,r,D,y,F,A){return a(),n("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};
diff --git a/assets/guide_vue2_sass.md.723a4859.js b/assets/guide_vue2_sass.md.3616d11c.js
similarity index 90%
rename from assets/guide_vue2_sass.md.723a4859.js
rename to assets/guide_vue2_sass.md.3616d11c.js
index 6ff293f..80f3d65 100644
--- a/assets/guide_vue2_sass.md.723a4859.js
+++ b/assets/guide_vue2_sass.md.3616d11c.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"Sass 全局样式","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/sass.md","filePath":"guide/vue2/sass.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/sass.md"},o=l(`

Sass 全局样式

首先 你可能会遇到 node-sass 安装不成功,别放弃多试几次!!!

每个页面自己对应的样式都写在自己的 .vue 文件之中 scoped 它顾名思义给 css 加了一个域的概念。

html
<style lang="scss">
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"Sass 全局样式","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/sass.md","filePath":"guide/vue2/sass.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/sass.md"},o=l(`

Sass 全局样式

首先 你可能会遇到 node-sass 安装不成功,别放弃多试几次!!!

每个页面自己对应的样式都写在自己的 .vue 文件之中 scoped 它顾名思义给 css 加了一个域的概念。

html
<style lang="scss">
   /* global styles */
 </style>
 
@@ -16,7 +16,7 @@ import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=
   }
 }

父组件改变子组件样式 深度选择器

当你子组件使用了 scoped 但在父组件又想修改子组件的样式可以 通过 >>> 来实现:

css
<style scoped>
 .a >>> .b { /* ... */ }
-</style>

全局变量

vue.config.js 配置使用 css.loaderOptions 选项,注入 sassmixin variables 到全局,不需要手动引入 ,配置$cdn通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量:

javascript
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
+</style>

全局变量

vue.config.js 配置使用 css.loaderOptions 选项,注入 sassmixin variables 到全局,不需要手动引入,配置$cdn通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量:

javascript
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
 const defaultSettings = require("./src/config/index.js");
 module.exports = {
   css: {
@@ -35,7 +35,7 @@ import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=
       },
     },
   },
-};

设置 js 中可以访问 $cdn,.vue 文件中使用this.$cdn访问

javascript
// 引入全局样式
+};

设置 js 中可以访问 $cdn.vue 文件中使用this.$cdn访问

javascript
// 引入全局样式
 import "@/assets/css/index.scss";
 
 // 设置 js中可以访问 $cdn
diff --git a/assets/guide_vue2_sass.md.723a4859.lean.js b/assets/guide_vue2_sass.md.3616d11c.lean.js
similarity index 70%
rename from assets/guide_vue2_sass.md.723a4859.lean.js
rename to assets/guide_vue2_sass.md.3616d11c.lean.js
index b9d448b..c073fdf 100644
--- a/assets/guide_vue2_sass.md.723a4859.lean.js
+++ b/assets/guide_vue2_sass.md.3616d11c.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"Sass 全局样式","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/sass.md","filePath":"guide/vue2/sass.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/sass.md"},o=l("",20),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"Sass 全局样式","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/sass.md","filePath":"guide/vue2/sass.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/sass.md"},o=l("",20),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
diff --git a/assets/guide_vue2_start.md.e13e8546.js b/assets/guide_vue2_start.md.e13e8546.js
deleted file mode 100644
index ae43bb2..0000000
--- a/assets/guide_vue2_start.md.e13e8546.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","filePath":"guide/vue2/start.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/start.md"},t=e(`

启动项目

js
// 拉取项目
-git clone https://github.com/sunniejs/vue-h5-template
-
-// 切换分支
-git checkout -b vue2-h5-template origin/vue2-h5-template
-
-// 安装依赖
-yarn install
-
-// 启动项目
-yarn serve
`,2),p=[t];function o(c,r,i,y,_,d){return a(),n("div",null,p)}const A=s(l,[["render",o]]);export{C as __pageData,A as default}; diff --git a/assets/guide_vue2_start.md.e13e8546.lean.js b/assets/guide_vue2_start.md.e13e8546.lean.js deleted file mode 100644 index 4ee8661..0000000 --- a/assets/guide_vue2_start.md.e13e8546.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","filePath":"guide/vue2/start.md","lastUpdated":1687776555000}'),l={name:"guide/vue2/start.md"},t=e("",2),p=[t];function o(c,r,i,y,_,d){return a(),n("div",null,p)}const A=s(l,[["render",o]]);export{C as __pageData,A as default}; diff --git a/assets/guide_vue2_start.md.f6e40312.js b/assets/guide_vue2_start.md.f6e40312.js new file mode 100644 index 0000000..3f0bbc8 --- /dev/null +++ b/assets/guide_vue2_start.md.f6e40312.js @@ -0,0 +1,11 @@ +import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const h=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","filePath":"guide/vue2/start.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/start.md"},t=e(`

启动项目

bash
# 拉取项目
+git clone https://github.com/sunniejs/vue-h5-template
+
+# 切换分支
+git checkout -b vue2-h5-template origin/vue2-h5-template
+
+# 安装依赖
+yarn install
+
+# 启动项目
+yarn serve
`,2),p=[t];function o(c,r,i,y,C,_){return a(),n("div",null,p)}const u=s(l,[["render",o]]);export{h as __pageData,u as default}; diff --git a/assets/guide_vue2_start.md.f6e40312.lean.js b/assets/guide_vue2_start.md.f6e40312.lean.js new file mode 100644 index 0000000..5a05c38 --- /dev/null +++ b/assets/guide_vue2_start.md.f6e40312.lean.js @@ -0,0 +1 @@ +import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const h=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","filePath":"guide/vue2/start.md","lastUpdated":1731315864000}'),l={name:"guide/vue2/start.md"},t=e("",2),p=[t];function o(c,r,i,y,C,_){return a(),n("div",null,p)}const u=s(l,[["render",o]]);export{h as __pageData,u as default}; diff --git a/assets/guide_vue2_vant.md.9252795d.js b/assets/guide_vue2_vant.md.4ed27c84.js similarity index 99% rename from assets/guide_vue2_vant.md.9252795d.js rename to assets/guide_vue2_vant.md.4ed27c84.js index a5f9dd7..f62a8f9 100644 --- a/assets/guide_vue2_vant.md.9252795d.js +++ b/assets/guide_vue2_vant.md.4ed27c84.js @@ -1,4 +1,4 @@ -import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"VantUI 组件按需加载","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vant.md","filePath":"guide/vue2/vant.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/vant.md"},o=l(`

VantUI 组件按需加载

项目采 用Vant 自动按需引入组件 (推荐)下 面安装插件介绍:

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

安装插件

bash
npm i babel-plugin-import -D

babel.config.js 设置

javascript
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"VantUI 组件按需加载","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vant.md","filePath":"guide/vue2/vant.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/vant.md"},o=l(`

VantUI 组件按需加载

项目采 用Vant 自动按需引入组件 (推荐)下 面安装插件介绍:

babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式

安装插件

bash
npm i babel-plugin-import -D

babel.config.js 设置

javascript
// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
 const plugins = [
   [
     "import",
diff --git a/assets/guide_vue2_vant.md.9252795d.lean.js b/assets/guide_vue2_vant.md.4ed27c84.lean.js
similarity index 85%
rename from assets/guide_vue2_vant.md.9252795d.lean.js
rename to assets/guide_vue2_vant.md.4ed27c84.lean.js
index 4bd9a72..d26cbb2 100644
--- a/assets/guide_vue2_vant.md.9252795d.lean.js
+++ b/assets/guide_vue2_vant.md.4ed27c84.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"VantUI 组件按需加载","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vant.md","filePath":"guide/vue2/vant.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/vant.md"},o=l("",10),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"VantUI 组件按需加载","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vant.md","filePath":"guide/vue2/vant.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/vant.md"},o=l("",10),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};
diff --git a/assets/guide_vue2_vuex.md.618230b5.js b/assets/guide_vue2_vuex.md.399839b6.js
similarity index 98%
rename from assets/guide_vue2_vuex.md.618230b5.js
rename to assets/guide_vue2_vuex.md.399839b6.js
index 933f712..043ec49 100644
--- a/assets/guide_vue2_vuex.md.618230b5.js
+++ b/assets/guide_vue2_vuex.md.399839b6.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Vuex 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vuex.md","filePath":"guide/vue2/vuex.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/vuex.md"},o=l(`

Vuex 状态管理

目录结构

bash
├── store
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Vuex 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vuex.md","filePath":"guide/vue2/vuex.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/vuex.md"},o=l(`

Vuex 状态管理

目录结构

bash
├── store
    ├── modules
       └── app.js
    ├── index.js
diff --git a/assets/guide_vue2_vuex.md.618230b5.lean.js b/assets/guide_vue2_vuex.md.399839b6.lean.js
similarity index 70%
rename from assets/guide_vue2_vuex.md.618230b5.lean.js
rename to assets/guide_vue2_vuex.md.399839b6.lean.js
index 8633e14..f4e9e6b 100644
--- a/assets/guide_vue2_vuex.md.618230b5.lean.js
+++ b/assets/guide_vue2_vuex.md.399839b6.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Vuex 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vuex.md","filePath":"guide/vue2/vuex.md","lastUpdated":1687776555000}'),p={name:"guide/vue2/vuex.md"},o=l("",7),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Vuex 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vuex.md","filePath":"guide/vue2/vuex.md","lastUpdated":1731315864000}'),p={name:"guide/vue2/vuex.md"},o=l("",7),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
diff --git a/assets/guide_vue2_vw.md.ca9fc79f.js b/assets/guide_vue2_vw.md.f3d8795c.js
similarity index 86%
rename from assets/guide_vue2_vw.md.ca9fc79f.js
rename to assets/guide_vue2_vw.md.f3d8795c.js
index a6465a4..821b29d 100644
--- a/assets/guide_vue2_vw.md.ca9fc79f.js
+++ b/assets/guide_vue2_vw.md.f3d8795c.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"vm 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vw.md","filePath":"guide/vue2/vw.md","lastUpdated":1687776555000}'),o={name:"guide/vue2/vw.md"},p=l(`

vm 适配方案

本项目使用的是 rem 的 适配方案,其实无论你使用哪种方案,都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做 。如果你想用 vw,你可以按照下面的方式切换。

1.安装依赖

bash
npm install postcss-px-to-viewport -D

2.修改 .postcssrc.js

将根目录下 .postcssrc.js 文件修改如下

javascript
// https://github.com/michael-ciniawsky/postcss-load-config
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"vm 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vw.md","filePath":"guide/vue2/vw.md","lastUpdated":1731315864000}'),o={name:"guide/vue2/vw.md"},p=l(`

vm 适配方案

本项目使用的是 rem 的 适配方案,其实无论你使用哪种方案,都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做 。如果你想用 vw,你可以按照下面的方式切换。

1.安装依赖

bash
npm install postcss-px-to-viewport -D

2.修改 .postcssrc.js

将根目录下 .postcssrc.js 文件修改如下

javascript
// https://github.com/michael-ciniawsky/postcss-load-config
 module.exports = {
   plugins: {
     autoprefixer: {
diff --git a/assets/guide_vue2_vw.md.ca9fc79f.lean.js b/assets/guide_vue2_vw.md.f3d8795c.lean.js
similarity index 84%
rename from assets/guide_vue2_vw.md.ca9fc79f.lean.js
rename to assets/guide_vue2_vw.md.f3d8795c.lean.js
index 9c17155..7ef015f 100644
--- a/assets/guide_vue2_vw.md.ca9fc79f.lean.js
+++ b/assets/guide_vue2_vw.md.f3d8795c.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"vm 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vw.md","filePath":"guide/vue2/vw.md","lastUpdated":1687776555000}'),o={name:"guide/vue2/vw.md"},p=l("",13),e=[p];function t(c,r,D,y,F,i){return a(),n("div",null,e)}const u=s(o,[["render",t]]);export{A as __pageData,u as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"vm 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vw.md","filePath":"guide/vue2/vw.md","lastUpdated":1731315864000}'),o={name:"guide/vue2/vw.md"},p=l("",13),e=[p];function t(c,r,D,y,F,i){return a(),n("div",null,e)}const u=s(o,[["render",t]]);export{A as __pageData,u as default};
diff --git a/assets/guide_vue3_alias.md.d777bc16.js b/assets/guide_vue3_alias.md.6e50bff0.js
similarity index 98%
rename from assets/guide_vue3_alias.md.d777bc16.js
rename to assets/guide_vue3_alias.md.6e50bff0.js
index eaa161a..97f79ca 100644
--- a/assets/guide_vue3_alias.md.d777bc16.js
+++ b/assets/guide_vue3_alias.md.6e50bff0.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","filePath":"guide/vue3/alias.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/alias.md"},o=l(`

alias

javascript
resolve: {
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","filePath":"guide/vue3/alias.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/alias.md"},o=l(`

alias

javascript
resolve: {
     alias: [{
             find: 'vue-i18n',
             replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
diff --git a/assets/guide_vue3_alias.md.d777bc16.lean.js b/assets/guide_vue3_alias.md.6e50bff0.lean.js
similarity index 84%
rename from assets/guide_vue3_alias.md.d777bc16.lean.js
rename to assets/guide_vue3_alias.md.6e50bff0.lean.js
index 1703588..2eb24ed 100644
--- a/assets/guide_vue3_alias.md.d777bc16.lean.js
+++ b/assets/guide_vue3_alias.md.6e50bff0.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","filePath":"guide/vue3/alias.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/alias.md"},o=l("",2),e=[o];function t(c,r,F,D,y,i){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{_ as __pageData,C as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","filePath":"guide/vue3/alias.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/alias.md"},o=l("",2),e=[o];function t(c,r,F,D,y,i){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{_ as __pageData,C as default};
diff --git a/assets/guide_vue3_axios.md.cd29cfa2.js b/assets/guide_vue3_axios.md.0778382b.js
similarity index 99%
rename from assets/guide_vue3_axios.md.cd29cfa2.js
rename to assets/guide_vue3_axios.md.0778382b.js
index 3cf903b..310ef53 100644
--- a/assets/guide_vue3_axios.md.cd29cfa2.js
+++ b/assets/guide_vue3_axios.md.0778382b.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","filePath":"guide/vue3/axios.md","lastUpdated":1687776555000}'),o={name:"guide/vue3/axios.md"},p=l(`

axios 封装及接口管理

utils/request.js 封装 axios , 开发者需要根据后台接口做修改。

  • service.interceptors.request.use 里可以设置请求头,比如设置 token
  • config.hideloading 是在 api 文件夹下的接口参数里设置,下文会讲
  • service.interceptors.response.use 里可以对接口返回数据处理,比如 401 删除本地信息,重新登录
javascript
import axios from "axios";
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","filePath":"guide/vue3/axios.md","lastUpdated":1731315864000}'),o={name:"guide/vue3/axios.md"},p=l(`

axios 封装及接口管理

utils/request.js 封装 axios , 开发者需要根据后台接口做修改。

  • service.interceptors.request.use 里可以设置请求头,比如设置 token
  • config.hideloading 是在 api 文件夹下的接口参数里设置,下文会讲
  • service.interceptors.response.use 里可以对接口返回数据处理,比如 401 删除本地信息,重新登录
javascript
import axios from "axios";
 import store from "@/store";
 import { Toast } from "vant";
 // 根据环境不同引入不同api地址
diff --git a/assets/guide_vue3_axios.md.cd29cfa2.lean.js b/assets/guide_vue3_axios.md.0778382b.lean.js
similarity index 85%
rename from assets/guide_vue3_axios.md.cd29cfa2.lean.js
rename to assets/guide_vue3_axios.md.0778382b.lean.js
index 587df41..f796f23 100644
--- a/assets/guide_vue3_axios.md.cd29cfa2.lean.js
+++ b/assets/guide_vue3_axios.md.0778382b.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","filePath":"guide/vue3/axios.md","lastUpdated":1687776555000}'),o={name:"guide/vue3/axios.md"},p=l("",4),e=[p];function t(c,r,F,y,D,i){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{C as __pageData,u as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const C=JSON.parse('{"title":"axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","filePath":"guide/vue3/axios.md","lastUpdated":1731315864000}'),o={name:"guide/vue3/axios.md"},p=l("",4),e=[p];function t(c,r,F,y,D,i){return n(),a("div",null,e)}const u=s(o,[["render",t]]);export{C as __pageData,u as default};
diff --git a/assets/guide_vue3_base.md.732de433.js b/assets/guide_vue3_base.md.462dbdb9.js
similarity index 77%
rename from assets/guide_vue3_base.md.732de433.js
rename to assets/guide_vue3_base.md.462dbdb9.js
index 97a3e4b..f5ec6cc 100644
--- a/assets/guide_vue3_base.md.732de433.js
+++ b/assets/guide_vue3_base.md.462dbdb9.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"vite.config.ts 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","filePath":"guide/vue3/base.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/base.md"},o=l(`

vite.config.ts 基础配置

如果你的 Vue Router 模式是 hash

javascript
publicPath: './',

如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Router base 保持一致

javascript
publicPath: '/app/',
javascript
export default function ({ command }: ConfigEnv): UserConfigExport {
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"vite.config.ts 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","filePath":"guide/vue3/base.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/base.md"},o=l(`

vite.config.ts 基础配置

如果你的 Vue Router 模式是 hash

javascript
base: './',

如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Router base 保持一致

javascript
base: '/app/',
javascript
export default function ({ command }: ConfigEnv): UserConfigExport {
   const isProduction = command === "build";
   return {
     server: {
diff --git a/assets/guide_vue3_base.md.732de433.lean.js b/assets/guide_vue3_base.md.462dbdb9.lean.js
similarity index 85%
rename from assets/guide_vue3_base.md.732de433.lean.js
rename to assets/guide_vue3_base.md.462dbdb9.lean.js
index 39275ae..edb0678 100644
--- a/assets/guide_vue3_base.md.732de433.lean.js
+++ b/assets/guide_vue3_base.md.462dbdb9.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"vite.config.ts 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","filePath":"guide/vue3/base.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/base.md"},o=l("",6),e=[o];function t(c,r,F,y,D,i){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{d as __pageData,C as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const d=JSON.parse('{"title":"vite.config.ts 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","filePath":"guide/vue3/base.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/base.md"},o=l("",6),e=[o];function t(c,r,F,y,D,i){return a(),n("div",null,e)}const C=s(p,[["render",t]]);export{d as __pageData,C as default};
diff --git a/assets/guide_vue3_env.md.83cf2a7e.js b/assets/guide_vue3_env.md.b928542e.js
similarity index 97%
rename from assets/guide_vue3_env.md.83cf2a7e.js
rename to assets/guide_vue3_env.md.b928542e.js
index 2314607..e9ebbc8 100644
--- a/assets/guide_vue3_env.md.83cf2a7e.js
+++ b/assets/guide_vue3_env.md.b928542e.js
@@ -1,4 +1,4 @@
-import{_ as s,o,c as e,R as a}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/env.md","filePath":"guide/vue3/env.md","lastUpdated":1687776555000}'),n={name:"guide/vue3/env.md"},p=a(`

package.json 里的 scripts 配置 dev dev:test dev:prod ,通过 --mode xxx 来执行不同环境

  • 通过 yarn dev 启动本地环境参数 , 执行 development
  • 通过 yarn dev:test 启动测试环境参数 , 执行 test
  • 通过 yarn dev:prod 启动正式环境参数 , 执行 prod
javascript
"scripts": {
+import{_ as s,o,c as e,R as a}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/env.md","filePath":"guide/vue3/env.md","lastUpdated":1731315864000}'),n={name:"guide/vue3/env.md"},p=a(`

package.json 里的 scripts 配置 dev dev:test dev:prod ,通过 --mode xxx 来执行不同环境

  • 通过 yarn dev 启动本地环境参数 , 执行 development
  • 通过 yarn dev:test 启动测试环境参数 , 执行 test
  • 通过 yarn dev:prod 启动正式环境参数 , 执行 prod
javascript
"scripts": {
     "dev": "vite",
     "dev:test": "vite --mode test",
     "dev:prod": "vite --mode production",
diff --git a/assets/guide_vue3_env.md.83cf2a7e.lean.js b/assets/guide_vue3_env.md.b928542e.lean.js
similarity index 84%
rename from assets/guide_vue3_env.md.83cf2a7e.lean.js
rename to assets/guide_vue3_env.md.b928542e.lean.js
index 1ffb93a..dc3e98a 100644
--- a/assets/guide_vue3_env.md.83cf2a7e.lean.js
+++ b/assets/guide_vue3_env.md.b928542e.lean.js
@@ -1 +1 @@
-import{_ as s,o,c as e,R as a}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/env.md","filePath":"guide/vue3/env.md","lastUpdated":1687776555000}'),n={name:"guide/vue3/env.md"},p=a("",3),t=[p];function l(c,r,d,D,F,i){return o(),e("div",null,t)}const _=s(n,[["render",l]]);export{u as __pageData,_ as default};
+import{_ as s,o,c as e,R as a}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/env.md","filePath":"guide/vue3/env.md","lastUpdated":1731315864000}'),n={name:"guide/vue3/env.md"},p=a("",3),t=[p];function l(c,r,d,D,F,i){return o(),e("div",null,t)}const _=s(n,[["render",l]]);export{u as __pageData,_ as default};
diff --git a/assets/guide_vue3_i18n.md.0436062d.js b/assets/guide_vue3_i18n.md.51f27eff.js
similarity index 96%
rename from assets/guide_vue3_i18n.md.0436062d.js
rename to assets/guide_vue3_i18n.md.51f27eff.js
index 86fccaf..ccf4304 100644
--- a/assets/guide_vue3_i18n.md.0436062d.js
+++ b/assets/guide_vue3_i18n.md.51f27eff.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"i18n 文本多语言解决方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/i18n.md","filePath":"guide/vue3/i18n.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/i18n.md"},o=l(`

i18n 文本多语言解决方案

javascript
import { createI18n } from 'vue-i18n'; // 引入第三方最新的i18n注意版本
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"i18n 文本多语言解决方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/i18n.md","filePath":"guide/vue3/i18n.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/i18n.md"},o=l(`

i18n 文本多语言解决方案

javascript
import { createI18n } from 'vue-i18n'; // 引入第三方最新的i18n注意版本
 
 /**
  * @description: 加载当前配置的语言配置目录,随意添加
@@ -30,7 +30,7 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=
     localStorage.setItem('lang', locale);
   }
   i18n.global.locale = locale || localStorage.getItem('lang') || '';
-}

css图片解决方案

目前在业务开发中,css的样式多语言也会经常用到,可能一些图片的字体比较复杂,代码很难实现。或者我们为了减少多语言的配置,加快开发效率也会使用多语言的配置,目前这里提供scss的图片多语言的方案

css
@mixin main-lang-bg($width, $height, $preUrl, $posUrl) {
+}

css图片解决方案

目前在业务开发中,CSS 的样式多语言也会经常用到,可能一些图片的字体比较复杂,代码很难实现。或者我们为了减少多语言的配置,加快开发效率也会使用多语言的配置,目前这里提供 scss 的图片多语言的方案

css
@mixin main-lang-bg($width, $height, $preUrl, $posUrl) {
   width: $width;
   height: $height;
   background-repeat: no-repeat;
diff --git a/assets/guide_vue3_i18n.md.0436062d.lean.js b/assets/guide_vue3_i18n.md.51f27eff.lean.js
similarity index 85%
rename from assets/guide_vue3_i18n.md.0436062d.lean.js
rename to assets/guide_vue3_i18n.md.51f27eff.lean.js
index ed997f6..d2f713b 100644
--- a/assets/guide_vue3_i18n.md.0436062d.lean.js
+++ b/assets/guide_vue3_i18n.md.51f27eff.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"i18n 文本多语言解决方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/i18n.md","filePath":"guide/vue3/i18n.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/i18n.md"},o=l("",9),t=[o];function e(c,r,y,F,D,C){return n(),a("div",null,t)}const g=s(p,[["render",e]]);export{A as __pageData,g as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"i18n 文本多语言解决方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/i18n.md","filePath":"guide/vue3/i18n.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/i18n.md"},o=l("",9),t=[o];function e(c,r,y,F,D,C){return n(),a("div",null,t)}const g=s(p,[["render",e]]);export{A as __pageData,g as default};
diff --git a/assets/guide_vue3_lint.md.18663aed.js b/assets/guide_vue3_lint.md.18663aed.js
new file mode 100644
index 0000000..c0f2fa9
--- /dev/null
+++ b/assets/guide_vue3_lint.md.18663aed.js
@@ -0,0 +1 @@
+import{_ as i,o as l,c as n,z as e,a as t}from"./chunks/framework.6241eaf2.js";const g=JSON.parse('{"title":"Eslint + Pettier + Stylelint 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/lint.md","filePath":"guide/vue3/lint.md","lastUpdated":1731315864000}'),s={name:"guide/vue3/lint.md"},a=e("h1",{id:"eslint-pettier-stylelint-统一开发规范",tabindex:"-1"},[t("Eslint + Pettier + Stylelint 统一开发规范 "),e("a",{class:"header-anchor",href:"#eslint-pettier-stylelint-统一开发规范","aria-label":'Permalink to "Eslint + Pettier + Stylelint 统一开发规范"'},"​")],-1),r=e("p",null,[t("根目录下的 "),e("code",null,".eslintrc.js"),t("、"),e("code",null,".stylelint.config.js"),t("、"),e("code",null,".prettier.config.js"),t(" 内置了 lint 规则,帮助你规范地开发代码,有助于提高团队的代码质量和协作性,可以根据团队的规则进行修改")],-1),o=[a,r];function c(d,_,p,u,f,h){return l(),n("div",null,o)}const y=i(s,[["render",c]]);export{g as __pageData,y as default};
diff --git a/assets/guide_vue3_lint.md.18663aed.lean.js b/assets/guide_vue3_lint.md.18663aed.lean.js
new file mode 100644
index 0000000..c0f2fa9
--- /dev/null
+++ b/assets/guide_vue3_lint.md.18663aed.lean.js
@@ -0,0 +1 @@
+import{_ as i,o as l,c as n,z as e,a as t}from"./chunks/framework.6241eaf2.js";const g=JSON.parse('{"title":"Eslint + Pettier + Stylelint 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/lint.md","filePath":"guide/vue3/lint.md","lastUpdated":1731315864000}'),s={name:"guide/vue3/lint.md"},a=e("h1",{id:"eslint-pettier-stylelint-统一开发规范",tabindex:"-1"},[t("Eslint + Pettier + Stylelint 统一开发规范 "),e("a",{class:"header-anchor",href:"#eslint-pettier-stylelint-统一开发规范","aria-label":'Permalink to "Eslint + Pettier + Stylelint 统一开发规范"'},"​")],-1),r=e("p",null,[t("根目录下的 "),e("code",null,".eslintrc.js"),t("、"),e("code",null,".stylelint.config.js"),t("、"),e("code",null,".prettier.config.js"),t(" 内置了 lint 规则,帮助你规范地开发代码,有助于提高团队的代码质量和协作性,可以根据团队的规则进行修改")],-1),o=[a,r];function c(d,_,p,u,f,h){return l(),n("div",null,o)}const y=i(s,[["render",c]]);export{g as __pageData,y as default};
diff --git a/assets/guide_vue3_lint.md.b9504b63.js b/assets/guide_vue3_lint.md.b9504b63.js
deleted file mode 100644
index bb44885..0000000
--- a/assets/guide_vue3_lint.md.b9504b63.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as e,o as i,c as s,z as t,a as n}from"./chunks/framework.6241eaf2.js";const g=JSON.parse('{"title":"Eslint+Pettier+stylelint 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/lint.md","filePath":"guide/vue3/lint.md","lastUpdated":1687776555000}'),l={name:"guide/vue3/lint.md"},a=t("h1",{id:"eslint-pettier-stylelint-统一开发规范",tabindex:"-1"},[n("Eslint+Pettier+stylelint 统一开发规范 "),t("a",{class:"header-anchor",href:"#eslint-pettier-stylelint-统一开发规范","aria-label":'Permalink to "Eslint+Pettier+stylelint 统一开发规范"'},"​")],-1),r=t("p",null,"根目录下的.eslintrc.js、.stylelint.config.js、.prettier.config.js 内置了 lint 规则,帮助你规范地开发代码,有助于提高团队的代码质量和协作性,可以根据团队的规则进行修改",-1),o=[a,r];function c(d,_,p,u,f,h){return i(),s("div",null,o)}const y=e(l,[["render",c]]);export{g as __pageData,y as default};
diff --git a/assets/guide_vue3_lint.md.b9504b63.lean.js b/assets/guide_vue3_lint.md.b9504b63.lean.js
deleted file mode 100644
index bb44885..0000000
--- a/assets/guide_vue3_lint.md.b9504b63.lean.js
+++ /dev/null
@@ -1 +0,0 @@
-import{_ as e,o as i,c as s,z as t,a as n}from"./chunks/framework.6241eaf2.js";const g=JSON.parse('{"title":"Eslint+Pettier+stylelint 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/lint.md","filePath":"guide/vue3/lint.md","lastUpdated":1687776555000}'),l={name:"guide/vue3/lint.md"},a=t("h1",{id:"eslint-pettier-stylelint-统一开发规范",tabindex:"-1"},[n("Eslint+Pettier+stylelint 统一开发规范 "),t("a",{class:"header-anchor",href:"#eslint-pettier-stylelint-统一开发规范","aria-label":'Permalink to "Eslint+Pettier+stylelint 统一开发规范"'},"​")],-1),r=t("p",null,"根目录下的.eslintrc.js、.stylelint.config.js、.prettier.config.js 内置了 lint 规则,帮助你规范地开发代码,有助于提高团队的代码质量和协作性,可以根据团队的规则进行修改",-1),o=[a,r];function c(d,_,p,u,f,h){return i(),s("div",null,o)}const y=e(l,[["render",c]]);export{g as __pageData,y as default};
diff --git a/assets/guide_vue3_pinia.md.4c51a07c.js b/assets/guide_vue3_pinia.md.0d738d45.js
similarity index 96%
rename from assets/guide_vue3_pinia.md.4c51a07c.js
rename to assets/guide_vue3_pinia.md.0d738d45.js
index ec7627d..effa77f 100644
--- a/assets/guide_vue3_pinia.md.4c51a07c.js
+++ b/assets/guide_vue3_pinia.md.0d738d45.js
@@ -1,7 +1,7 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Pinia 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/pinia.md","filePath":"guide/vue3/pinia.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/pinia.md"},o=l(`

Pinia 状态管理

下一代 vuex,使用极其方便,ts 兼容好

目录结构

bash
├── store
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Pinia 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/pinia.md","filePath":"guide/vue3/pinia.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/pinia.md"},o=l(`

Pinia 状态管理

下一代 vuex,使用极其方便,ts 兼容好

目录结构

bash
├── store
    ├── modules
       └── user.js
-   ├── index.js

目前pinia分为两种编程模式,options API和 Composition API,我们这边都会列举出来实现的业务逻辑效果是一样的,提供大家思路

options API:

javascript
interface StoreUser {
+   ├── index.js

目前pinia分为两种编程模式,Options API 和 Composition API,我们这边都会列举出来实现的业务逻辑效果是一样的,提供大家思路

Options API:

javascript
interface StoreUser {
   token: string;
   info: Record<any, any>;
 }
diff --git a/assets/guide_vue3_pinia.md.4c51a07c.lean.js b/assets/guide_vue3_pinia.md.0d738d45.lean.js
similarity index 70%
rename from assets/guide_vue3_pinia.md.4c51a07c.lean.js
rename to assets/guide_vue3_pinia.md.0d738d45.lean.js
index e0667e3..dd28ecf 100644
--- a/assets/guide_vue3_pinia.md.4c51a07c.lean.js
+++ b/assets/guide_vue3_pinia.md.0d738d45.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Pinia 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/pinia.md","filePath":"guide/vue3/pinia.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/pinia.md"},o=l("",11),e=[o];function t(c,r,F,y,D,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"Pinia 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/pinia.md","filePath":"guide/vue3/pinia.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/pinia.md"},o=l("",11),e=[o];function t(c,r,F,y,D,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};
diff --git a/assets/guide_vue3_proxy.md.b05cbab3.js b/assets/guide_vue3_proxy.md.94d7124b.js
similarity index 96%
rename from assets/guide_vue3_proxy.md.b05cbab3.js
rename to assets/guide_vue3_proxy.md.94d7124b.js
index 4baf560..98bf95a 100644
--- a/assets/guide_vue3_proxy.md.b05cbab3.js
+++ b/assets/guide_vue3_proxy.md.94d7124b.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as p}from"./chunks/framework.6241eaf2.js";const _=JSON.parse('{"title":"proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/proxy.md","filePath":"guide/vue3/proxy.md","lastUpdated":1687776555000}'),l={name:"guide/vue3/proxy.md"},o=p(`

proxy 跨域

javascript
server: {
+import{_ as s,o as a,c as n,R as p}from"./chunks/framework.6241eaf2.js";const _=JSON.parse('{"title":"proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/proxy.md","filePath":"guide/vue3/proxy.md","lastUpdated":1731315864000}'),l={name:"guide/vue3/proxy.md"},o=p(`

proxy 跨域

javascript
server: {
     proxy: {
         '/api': {
             target: 'https://baidu.com',
diff --git a/assets/guide_vue3_proxy.md.b05cbab3.lean.js b/assets/guide_vue3_proxy.md.94d7124b.lean.js
similarity index 70%
rename from assets/guide_vue3_proxy.md.b05cbab3.lean.js
rename to assets/guide_vue3_proxy.md.94d7124b.lean.js
index 9a0c68c..b1c40d0 100644
--- a/assets/guide_vue3_proxy.md.b05cbab3.lean.js
+++ b/assets/guide_vue3_proxy.md.94d7124b.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as p}from"./chunks/framework.6241eaf2.js";const _=JSON.parse('{"title":"proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/proxy.md","filePath":"guide/vue3/proxy.md","lastUpdated":1687776555000}'),l={name:"guide/vue3/proxy.md"},o=p("",2),e=[o];function t(r,c,F,y,D,i){return a(),n("div",null,e)}const C=s(l,[["render",t]]);export{_ as __pageData,C as default};
+import{_ as s,o as a,c as n,R as p}from"./chunks/framework.6241eaf2.js";const _=JSON.parse('{"title":"proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/proxy.md","filePath":"guide/vue3/proxy.md","lastUpdated":1731315864000}'),l={name:"guide/vue3/proxy.md"},o=p("",2),e=[o];function t(r,c,F,y,D,i){return a(),n("div",null,e)}const C=s(l,[["render",t]]);export{_ as __pageData,C as default};
diff --git a/assets/guide_vue3_router.md.bf1ddfb2.js b/assets/guide_vue3_router.md.84936a90.js
similarity index 87%
rename from assets/guide_vue3_router.md.bf1ddfb2.js
rename to assets/guide_vue3_router.md.84936a90.js
index c725032..3a8a4c4 100644
--- a/assets/guide_vue3_router.md.bf1ddfb2.js
+++ b/assets/guide_vue3_router.md.84936a90.js
@@ -1,4 +1,4 @@
-import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/router.md","filePath":"guide/vue3/router.md","lastUpdated":1687776555000}'),l={name:"guide/vue3/router.md"},p=o(`

vue-router

本案例采用 hash 模式,开发者根据需求修改 mode base

注意:如果你使用了 history 模式, vue.config.js 中的 publicPath 要做对应的修改

前往:vue.config.js 基础配置

javascript
import Vue from "vue";
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/router.md","filePath":"guide/vue3/router.md","lastUpdated":1731315864000}'),l={name:"guide/vue3/router.md"},p=o(`

vue-router

本案例采用 hash 模式,开发者根据需求修改 mode base

注意:如果你使用了 history 模式, vue.config.js 中的 publicPath 要做对应的修改

前往: vite.config.js 基础配置

javascript
import Vue from "vue";
 import { createRouter, createWebHistory, Router } from "vue-router";
 
 Vue.use(Router);
diff --git a/assets/guide_vue3_router.md.bf1ddfb2.lean.js b/assets/guide_vue3_router.md.84936a90.lean.js
similarity index 70%
rename from assets/guide_vue3_router.md.bf1ddfb2.lean.js
rename to assets/guide_vue3_router.md.84936a90.lean.js
index 194704e..fc7b5a8 100644
--- a/assets/guide_vue3_router.md.bf1ddfb2.lean.js
+++ b/assets/guide_vue3_router.md.84936a90.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/router.md","filePath":"guide/vue3/router.md","lastUpdated":1687776555000}'),l={name:"guide/vue3/router.md"},p=o("",5),e=[p];function t(r,c,D,y,F,A){return a(),n("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};
+import{_ as s,o as a,c as n,R as o}from"./chunks/framework.6241eaf2.js";const i=JSON.parse('{"title":"vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/router.md","filePath":"guide/vue3/router.md","lastUpdated":1731315864000}'),l={name:"guide/vue3/router.md"},p=o("",5),e=[p];function t(r,c,D,y,F,A){return a(),n("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};
diff --git a/assets/guide_vue3_start.md.6f88b41c.js b/assets/guide_vue3_start.md.6f88b41c.js
new file mode 100644
index 0000000..6c5c31d
--- /dev/null
+++ b/assets/guide_vue3_start.md.6f88b41c.js
@@ -0,0 +1,8 @@
+import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/start.md","filePath":"guide/vue3/start.md","lastUpdated":1731315864000}'),t={name:"guide/vue3/start.md"},l=e(`

启动项目

bash
# 拉取项目
+git clone https://github.com/sunniejs/vue-h5-template
+
+# 安装依赖
+yarn install
+
+# 启动项目
+yarn dev
`,2),o=[l];function p(c,r,i,d,_,y){return a(),n("div",null,o)}const C=s(t,[["render",p]]);export{u as __pageData,C as default}; diff --git a/assets/guide_vue3_start.md.6f88b41c.lean.js b/assets/guide_vue3_start.md.6f88b41c.lean.js new file mode 100644 index 0000000..d52a0bd --- /dev/null +++ b/assets/guide_vue3_start.md.6f88b41c.lean.js @@ -0,0 +1 @@ +import{_ as s,o as a,c as n,R as e}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/start.md","filePath":"guide/vue3/start.md","lastUpdated":1731315864000}'),t={name:"guide/vue3/start.md"},l=e("",2),o=[l];function p(c,r,i,d,_,y){return a(),n("div",null,o)}const C=s(t,[["render",p]]);export{u as __pageData,C as default}; diff --git a/assets/guide_vue3_start.md.f354f662.js b/assets/guide_vue3_start.md.f354f662.js deleted file mode 100644 index 1b096de..0000000 --- a/assets/guide_vue3_start.md.f354f662.js +++ /dev/null @@ -1,8 +0,0 @@ -import{_ as s,o as a,c as n,R as t}from"./chunks/framework.6241eaf2.js";const y=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/start.md","filePath":"guide/vue3/start.md","lastUpdated":1687776555000}'),e={name:"guide/vue3/start.md"},l=t(`

启动项目

js
// 拉取项目
-git clone https://github.com/sunniejs/vue-h5-template
-
-// 安装依赖
-yarn install
-
-// 启动项目
-yarn dev
`,2),o=[l];function p(c,i,r,d,_,u){return a(),n("div",null,o)}const m=s(e,[["render",p]]);export{y as __pageData,m as default}; diff --git a/assets/guide_vue3_start.md.f354f662.lean.js b/assets/guide_vue3_start.md.f354f662.lean.js deleted file mode 100644 index f0496d0..0000000 --- a/assets/guide_vue3_start.md.f354f662.lean.js +++ /dev/null @@ -1 +0,0 @@ -import{_ as s,o as a,c as n,R as t}from"./chunks/framework.6241eaf2.js";const y=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/start.md","filePath":"guide/vue3/start.md","lastUpdated":1687776555000}'),e={name:"guide/vue3/start.md"},l=t("",2),o=[l];function p(c,i,r,d,_,u){return a(),n("div",null,o)}const m=s(e,[["render",p]]);export{y as __pageData,m as default}; diff --git a/assets/guide_vue3_ui.md.cc6ae98b.js b/assets/guide_vue3_ui.md.385fc808.js similarity index 90% rename from assets/guide_vue3_ui.md.cc6ae98b.js rename to assets/guide_vue3_ui.md.385fc808.js index df60b25..e764c5d 100644 --- a/assets/guide_vue3_ui.md.cc6ae98b.js +++ b/assets/guide_vue3_ui.md.385fc808.js @@ -1,4 +1,4 @@ -import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"多 UI 组件库供选择","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/ui.md","filePath":"guide/vue3/ui.md","lastUpdated":1687776555000}'),o={name:"guide/vue3/ui.md"},p=l(`

多 UI 组件库供选择

Vite 构建工具,使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。

安装插件

bash
yarn add vite-plugin-style-import -D
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"多 UI 组件库供选择","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/ui.md","filePath":"guide/vue3/ui.md","lastUpdated":1731315864000}'),o={name:"guide/vue3/ui.md"},p=l(`

多 UI 组件库供选择

Vite 构建工具,使用 vite-plugin-style-importunplugin-vue-components/vite 实现按需引入。

安装插件

bash
yarn add vite-plugin-style-import -D
 yarn add unplugin-vue-components/vite -D

使用组件库

nutUI 没有按需加载的 resolvers,style 需要自己配置按需加载

config/vite/plugins/styleImport.ts 设置

javascript
// 按需加载样式文件
   ...
     createStyleImportPlugin({
diff --git a/assets/guide_vue3_ui.md.cc6ae98b.lean.js b/assets/guide_vue3_ui.md.385fc808.lean.js
similarity index 70%
rename from assets/guide_vue3_ui.md.cc6ae98b.lean.js
rename to assets/guide_vue3_ui.md.385fc808.lean.js
index b0233c4..15c2334 100644
--- a/assets/guide_vue3_ui.md.cc6ae98b.lean.js
+++ b/assets/guide_vue3_ui.md.385fc808.lean.js
@@ -1 +1 @@
-import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"多 UI 组件库供选择","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/ui.md","filePath":"guide/vue3/ui.md","lastUpdated":1687776555000}'),o={name:"guide/vue3/ui.md"},p=l("",19),e=[p];function t(r,c,i,y,D,C){return a(),n("div",null,e)}const u=s(o,[["render",t]]);export{A as __pageData,u as default};
+import{_ as s,o as a,c as n,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"多 UI 组件库供选择","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/ui.md","filePath":"guide/vue3/ui.md","lastUpdated":1731315864000}'),o={name:"guide/vue3/ui.md"},p=l("",19),e=[p];function t(r,c,i,y,D,C){return a(),n("div",null,e)}const u=s(o,[["render",t]]);export{A as __pageData,u as default};
diff --git a/assets/guide_vue3_viewport.md.ad1a10ef.js b/assets/guide_vue3_viewport.md.0ef62fba.js
similarity index 80%
rename from assets/guide_vue3_viewport.md.ad1a10ef.js
rename to assets/guide_vue3_viewport.md.0ef62fba.js
index c42f34d..e5b9240 100644
--- a/assets/guide_vue3_viewport.md.ad1a10ef.js
+++ b/assets/guide_vue3_viewport.md.0ef62fba.js
@@ -1,4 +1,4 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"viewport 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/viewport.md","filePath":"guide/vue3/viewport.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/viewport.md"},o=l(`

viewport 适配方案

不用担心,项目已经配置好了 viewport 适配,下面仅做介绍:

  • cnjm-postcss-px-to-viewport 是一款 postcss 插件,用于将单位转化为 vw, 现在很多浏览器对vw的支持都很好,适配首选方案。

PostCSS 配置

下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改

javascript
// https://github.com/michael-ciniawsky/postcss-load-config
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"viewport 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/viewport.md","filePath":"guide/vue3/viewport.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/viewport.md"},o=l(`

viewport 适配方案

不用担心,项目已经配置好了 viewport 适配,下面仅做介绍:

  • cnjm-postcss-px-to-viewport 是一款 postcss 插件,用于将单位转化为 vw, 现在很多浏览器对vw的支持都很好,适配首选方案。

PostCSS 配置

下面提供了一份基本的 postcss 配置,可以在此配置的基础上根据项目需求进行修改

javascript
// https://github.com/michael-ciniawsky/postcss-load-config
 module.exports = {
   plugins: {
     autoprefixer: { overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8'] },
@@ -20,7 +20,7 @@ import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=
         return designWidth;
       },
   },
-};

新手必看,老鸟跳过

很多小伙伴会问我,适配的问题, 因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上传到蓝湖,我们就可以需要的尺寸了。下面就大概普及一下 rem。

我们知道 1rem 等于 html 根元素设定的 font-sizepx 值。Vant UI 设置 rootValue: 37.5 , 你可以看到在 iPhone 6 下看到 ( 1rem 等于 37.5px ):

html
<html data-dpr="1" style="font-size: 37.5px;"></html>

切换不同的机型,根元素可能会有不同的 font-size 。当你写 css px 样式时,会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件,需要按照 rootValue: 37.5 来写样式。

举个例子:设计给了你一张 750px * 1334px 图片,在 iPhone6 上铺满屏幕, 其他机型适配。

  • rootValue: 75 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
  • rootValue: 37.5 的时候,样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。

当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。

html
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
+};

新手必看,老鸟跳过

很多小伙伴会问我,适配的问题, 因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上传到蓝湖,我们就可以得到需要的尺寸了。下面就简单普及一下 rem 适配的原理。

我们知道 1rem 等于 html 根元素设定的 font-sizepx 值。Vant UI 设置 rootValue: 37.5 , 你可以看到在 iPhone 6 下看到 ( 1rem 等于 37.5px ):

html
<html data-dpr="1" style="font-size: 37.5px;"></html>

切换不同的机型,根元素可能会有不同的 font-size 。当你写 css px 样式时,会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件,需要按照 rootValue: 37.5 来写样式。

举个例子:设计给了你一张 750px * 1334px 图片,在 iPhone6 上铺满屏幕, 其他机型适配。

  • rootValue: 75 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
  • rootValue: 37.5 的时候,样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。

当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。

html
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
 
 <style>
   /* rootValue: 75 */
diff --git a/assets/guide_vue3_viewport.md.ad1a10ef.lean.js b/assets/guide_vue3_viewport.md.0ef62fba.lean.js
similarity index 85%
rename from assets/guide_vue3_viewport.md.ad1a10ef.lean.js
rename to assets/guide_vue3_viewport.md.0ef62fba.lean.js
index 86c57b9..f87c2b9 100644
--- a/assets/guide_vue3_viewport.md.ad1a10ef.lean.js
+++ b/assets/guide_vue3_viewport.md.0ef62fba.lean.js
@@ -1 +1 @@
-import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"viewport 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/viewport.md","filePath":"guide/vue3/viewport.md","lastUpdated":1687776555000}'),p={name:"guide/vue3/viewport.md"},o=l("",17),e=[o];function t(c,r,D,y,F,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
+import{_ as s,o as n,c as a,R as l}from"./chunks/framework.6241eaf2.js";const A=JSON.parse('{"title":"viewport 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/viewport.md","filePath":"guide/vue3/viewport.md","lastUpdated":1731315864000}'),p={name:"guide/vue3/viewport.md"},o=l("",17),e=[o];function t(c,r,D,y,F,C){return n(),a("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
diff --git a/assets/guide_vue3_vite.md.9ec8c052.js b/assets/guide_vue3_vite.md.7a4b4162.js
similarity index 96%
rename from assets/guide_vue3_vite.md.9ec8c052.js
rename to assets/guide_vue3_vite.md.7a4b4162.js
index 93d04f5..fa46405 100644
--- a/assets/guide_vue3_vite.md.9ec8c052.js
+++ b/assets/guide_vue3_vite.md.7a4b4162.js
@@ -1 +1 @@
-import{_ as e,o as i,c as t,R as l}from"./chunks/framework.6241eaf2.js";const g=JSON.parse('{"title":"vite","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/vite.md","filePath":"guide/vue3/vite.md","lastUpdated":1687776555000}'),a={name:"guide/vue3/vite.md"},n=l('

vite

基于原生 ES 模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR),使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。更多关于vite

模版集成了如下的 vite 插件

  • unplugin-auto-import(按需加载,自动引入)
  • unplugin-vue-components(按需加载,自动引入组件)
  • vite-plugin-compression(开启.gz 压缩)
  • vite-plugin-eruda(控制台,方便移动端调试)
  • vite-plugin-imagemin(图片压缩)
  • vite-plugin-mock(引入 mockjs,本地模拟接口)
  • vite-plugin-pages(动态生成路由)
  • vite-plugin-progress(构建显示进度条)
  • vite-plugin-restart(监听配置文件修改自动重启 Vite)
  • vite-plugin-style-import(按需引入样式文件)
  • vite-plugin-svg-icons(加载 SVG 文件,自动引入)
',4),o=[n];function r(s,p,u,v,_,c){return i(),t("div",null,o)}const m=e(a,[["render",r]]);export{g as __pageData,m as default}; +import{_ as e,o as i,c as t,R as l}from"./chunks/framework.6241eaf2.js";const g=JSON.parse('{"title":"vite","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/vite.md","filePath":"guide/vue3/vite.md","lastUpdated":1731315864000}'),a={name:"guide/vue3/vite.md"},n=l('

vite

基于原生 ES 模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR),使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。更多关于vite

模版集成了如下的 vite 插件

  • unplugin-auto-import(按需加载,自动引入)
  • unplugin-vue-components(按需加载,自动引入组件)
  • vite-plugin-compression(开启.gz 压缩)
  • vite-plugin-eruda(控制台,方便移动端调试)
  • vite-plugin-imagemin(图片压缩)
  • vite-plugin-mock(引入 mockjs,本地模拟接口)
  • vite-plugin-pages(动态生成路由)
  • vite-plugin-progress(构建显示进度条)
  • vite-plugin-restart(监听配置文件修改自动重启 Vite)
  • vite-plugin-style-import(按需引入样式文件)
  • vite-plugin-svg-icons(加载 SVG 文件,自动引入)
',4),o=[n];function r(s,p,u,v,_,c){return i(),t("div",null,o)}const m=e(a,[["render",r]]);export{g as __pageData,m as default}; diff --git a/assets/guide_vue3_vite.md.9ec8c052.lean.js b/assets/guide_vue3_vite.md.7a4b4162.lean.js similarity index 84% rename from assets/guide_vue3_vite.md.9ec8c052.lean.js rename to assets/guide_vue3_vite.md.7a4b4162.lean.js index 6afe6cc..f9ea659 100644 --- a/assets/guide_vue3_vite.md.9ec8c052.lean.js +++ b/assets/guide_vue3_vite.md.7a4b4162.lean.js @@ -1 +1 @@ -import{_ as e,o as i,c as t,R as l}from"./chunks/framework.6241eaf2.js";const g=JSON.parse('{"title":"vite","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/vite.md","filePath":"guide/vue3/vite.md","lastUpdated":1687776555000}'),a={name:"guide/vue3/vite.md"},n=l("",4),o=[n];function r(s,p,u,v,_,c){return i(),t("div",null,o)}const m=e(a,[["render",r]]);export{g as __pageData,m as default}; +import{_ as e,o as i,c as t,R as l}from"./chunks/framework.6241eaf2.js";const g=JSON.parse('{"title":"vite","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/vite.md","filePath":"guide/vue3/vite.md","lastUpdated":1731315864000}'),a={name:"guide/vue3/vite.md"},n=l("",4),o=[n];function r(s,p,u,v,_,c){return i(),t("div",null,o)}const m=e(a,[["render",r]]);export{g as __pageData,m as default}; diff --git a/assets/index.md.bd639346.lean.js b/assets/index.md.b1dbb931.js similarity index 95% rename from assets/index.md.bd639346.lean.js rename to assets/index.md.b1dbb931.js index a5cf258..73a7eb8 100644 --- a/assets/index.md.bd639346.lean.js +++ b/assets/index.md.b1dbb931.js @@ -1 +1 @@ -import{_ as e,o as t,c as i}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"Vue-H5-Template","titleTemplate":"一个快速开发的vue h5移动端脚手架","description":"","frontmatter":{"layout":"home","title":"Vue-H5-Template","titleTemplate":"一个快速开发的vue h5移动端脚手架","hero":{"name":"Vue-H5-Template","text":"一个快速开发的Vue H5移动端脚手架","image":{"src":"https://cdn.jsdelivr.net/gh/fonghehe/picture/vue-h5-template/logo.png","alt":"sunnie"},"actions":[{"theme":"brand","text":"开始","link":"/guide/"},{"theme":"alt","text":"Github仓库","link":"https://github.com/sunniejs/vue-h5-template"}]},"features":[{"icon":"💡","title":"开箱即用","details":"集成vue2、vue3的移动端快速开发模版,学习成本低,易上手"},{"icon":"📦","title":"代码规范","details":"完整的eslint、prettier、stylelint规范,加上husky,帮助你更好的管理代码"},{"icon":"🛠️","title":"配置优化","details":"完整配置的vue脚手架插件和优化,让你专注于业务开发,更高效"},{"icon":"⚙️","title":"More","details":"加入我们,更多能力等你挖掘...."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1687776555000}'),a={name:"index.md"};function n(l,s,o,r,c,d){return t(),i("div")}const m=e(a,[["render",n]]);export{u as __pageData,m as default}; +import{_ as e,o as t,c as i}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"Vue-H5-Template","titleTemplate":"一个快速开发的vue h5移动端脚手架","description":"","frontmatter":{"layout":"home","title":"Vue-H5-Template","titleTemplate":"一个快速开发的vue h5移动端脚手架","hero":{"name":"Vue-H5-Template","text":"一个快速开发的Vue H5移动端脚手架","image":{"src":"https://cdn.jsdelivr.net/gh/fonghehe/picture/vue-h5-template/logo.png","alt":"sunnie"},"actions":[{"theme":"brand","text":"开始","link":"/guide/"},{"theme":"alt","text":"Github仓库","link":"https://github.com/sunniejs/vue-h5-template"}]},"features":[{"icon":"💡","title":"开箱即用","details":"集成vue2、vue3的移动端快速开发模版,学习成本低,易上手"},{"icon":"📦","title":"代码规范","details":"完整的eslint、prettier、stylelint规范,加上husky,帮助你更好的管理代码"},{"icon":"🛠️","title":"配置优化","details":"完整配置的vue脚手架插件和优化,让你专注于业务开发,更高效"},{"icon":"⚙️","title":"More","details":"加入我们,更多能力等你挖掘...."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1731315864000}'),a={name:"index.md"};function n(l,s,o,r,c,d){return t(),i("div")}const m=e(a,[["render",n]]);export{u as __pageData,m as default}; diff --git a/assets/index.md.bd639346.js b/assets/index.md.b1dbb931.lean.js similarity index 95% rename from assets/index.md.bd639346.js rename to assets/index.md.b1dbb931.lean.js index a5cf258..73a7eb8 100644 --- a/assets/index.md.bd639346.js +++ b/assets/index.md.b1dbb931.lean.js @@ -1 +1 @@ -import{_ as e,o as t,c as i}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"Vue-H5-Template","titleTemplate":"一个快速开发的vue h5移动端脚手架","description":"","frontmatter":{"layout":"home","title":"Vue-H5-Template","titleTemplate":"一个快速开发的vue h5移动端脚手架","hero":{"name":"Vue-H5-Template","text":"一个快速开发的Vue H5移动端脚手架","image":{"src":"https://cdn.jsdelivr.net/gh/fonghehe/picture/vue-h5-template/logo.png","alt":"sunnie"},"actions":[{"theme":"brand","text":"开始","link":"/guide/"},{"theme":"alt","text":"Github仓库","link":"https://github.com/sunniejs/vue-h5-template"}]},"features":[{"icon":"💡","title":"开箱即用","details":"集成vue2、vue3的移动端快速开发模版,学习成本低,易上手"},{"icon":"📦","title":"代码规范","details":"完整的eslint、prettier、stylelint规范,加上husky,帮助你更好的管理代码"},{"icon":"🛠️","title":"配置优化","details":"完整配置的vue脚手架插件和优化,让你专注于业务开发,更高效"},{"icon":"⚙️","title":"More","details":"加入我们,更多能力等你挖掘...."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1687776555000}'),a={name:"index.md"};function n(l,s,o,r,c,d){return t(),i("div")}const m=e(a,[["render",n]]);export{u as __pageData,m as default}; +import{_ as e,o as t,c as i}from"./chunks/framework.6241eaf2.js";const u=JSON.parse('{"title":"Vue-H5-Template","titleTemplate":"一个快速开发的vue h5移动端脚手架","description":"","frontmatter":{"layout":"home","title":"Vue-H5-Template","titleTemplate":"一个快速开发的vue h5移动端脚手架","hero":{"name":"Vue-H5-Template","text":"一个快速开发的Vue H5移动端脚手架","image":{"src":"https://cdn.jsdelivr.net/gh/fonghehe/picture/vue-h5-template/logo.png","alt":"sunnie"},"actions":[{"theme":"brand","text":"开始","link":"/guide/"},{"theme":"alt","text":"Github仓库","link":"https://github.com/sunniejs/vue-h5-template"}]},"features":[{"icon":"💡","title":"开箱即用","details":"集成vue2、vue3的移动端快速开发模版,学习成本低,易上手"},{"icon":"📦","title":"代码规范","details":"完整的eslint、prettier、stylelint规范,加上husky,帮助你更好的管理代码"},{"icon":"🛠️","title":"配置优化","details":"完整配置的vue脚手架插件和优化,让你专注于业务开发,更高效"},{"icon":"⚙️","title":"More","details":"加入我们,更多能力等你挖掘...."}]},"headers":[],"relativePath":"index.md","filePath":"index.md","lastUpdated":1731315864000}'),a={name:"index.md"};function n(l,s,o,r,c,d){return t(),i("div")}const m=e(a,[["render",n]]);export{u as __pageData,m as default}; diff --git a/assets/style.82cfa615.css b/assets/style.16a63e98.css similarity index 99% rename from assets/style.82cfa615.css rename to assets/style.16a63e98.css index 78197ee..8778391 100644 --- a/assets/style.82cfa615.css +++ b/assets/style.16a63e98.css @@ -1 +1 @@ -@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-cyrillic.5f2c6c8c.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-cyrillic-ext.e75737ce.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-greek.d5a6d92a.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-greek-ext.ab0619bc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-latin.2ed14f66.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-latin-ext.0030eebd.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-vietnamese.14ce25a6.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-cyrillic.ea42a392.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-greek.8f4463c4.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-greek-ext.4fbe9427.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-latin.bd3b6f56.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-latin-ext.bd8920cc.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-vietnamese.6ce511fb.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Chinese Quotes;src:local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");unicode-range:U+2018,U+2019,U+201C,U+201D}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-gray: #8e8e93;--vp-c-text-light-1: rgba(60, 60, 67);--vp-c-text-light-2: rgba(60, 60, 67, .75);--vp-c-text-light-3: rgba(60, 60, 67, .33);--vp-c-text-dark-1: rgba(255, 255, 245, .86);--vp-c-text-dark-2: rgba(235, 235, 245, .6);--vp-c-text-dark-3: rgba(235, 235, 245, .38);--vp-c-green: #10b981;--vp-c-green-light: #34d399;--vp-c-green-lighter: #6ee7b7;--vp-c-green-dark: #059669;--vp-c-green-darker: #047857;--vp-c-green-dimm-1: rgba(16, 185, 129, .05);--vp-c-green-dimm-2: rgba(16, 185, 129, .2);--vp-c-green-dimm-3: rgba(16, 185, 129, .5);--vp-c-yellow: #d97706;--vp-c-yellow-light: #f59e0b;--vp-c-yellow-lighter: #fbbf24;--vp-c-yellow-dark: #b45309;--vp-c-yellow-darker: #92400e;--vp-c-yellow-dimm-1: rgba(234, 179, 8, .05);--vp-c-yellow-dimm-2: rgba(234, 179, 8, .2);--vp-c-yellow-dimm-3: rgba(234, 179, 8, .5);--vp-c-red: #f43f5e;--vp-c-red-light: #fb7185;--vp-c-red-lighter: #fda4af;--vp-c-red-dark: #e11d48;--vp-c-red-darker: #be123c;--vp-c-red-dimm-1: rgba(244, 63, 94, .05);--vp-c-red-dimm-2: rgba(244, 63, 94, .2);--vp-c-red-dimm-3: rgba(244, 63, 94, .5);--vp-c-sponsor: #db2777}:root{--vp-c-bg: #ffffff;--vp-c-bg-elv: #ffffff;--vp-c-bg-elv-up: #ffffff;--vp-c-bg-elv-down: #f6f6f7;--vp-c-bg-elv-mute: #f6f6f7;--vp-c-bg-soft: #f6f6f7;--vp-c-bg-soft-up: #f9f9fa;--vp-c-bg-soft-down: #e3e3e5;--vp-c-bg-soft-mute: #e3e3e5;--vp-c-bg-alt: #f6f6f7;--vp-c-border: rgba(60, 60, 67, .29);--vp-c-divider: rgba(60, 60, 67, .12);--vp-c-gutter: rgba(60, 60, 67, .12);--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white);--vp-c-text-1: var(--vp-c-text-light-1);--vp-c-text-2: var(--vp-c-text-light-2);--vp-c-text-3: var(--vp-c-text-light-3);--vp-c-text-inverse-1: var(--vp-c-text-dark-1);--vp-c-text-inverse-2: var(--vp-c-text-dark-2);--vp-c-text-inverse-3: var(--vp-c-text-dark-3);--vp-c-text-code: #476582;--vp-c-brand: var(--vp-c-green);--vp-c-brand-light: var(--vp-c-green-light);--vp-c-brand-lighter: var(--vp-c-green-lighter);--vp-c-brand-dark: var(--vp-c-green-dark);--vp-c-brand-darker: var(--vp-c-green-darker);--vp-c-mute: #f6f6f7;--vp-c-mute-light: #f9f9fc;--vp-c-mute-lighter: #ffffff;--vp-c-mute-dark: #e3e3e5;--vp-c-mute-darker: #d7d7d9}.dark{--vp-c-bg: #1e1e20;--vp-c-bg-elv: #252529;--vp-c-bg-elv-up: #313136;--vp-c-bg-elv-down: #1e1e20;--vp-c-bg-elv-mute: #313136;--vp-c-bg-soft: #252529;--vp-c-bg-soft-up: #313136;--vp-c-bg-soft-down: #1e1e20;--vp-c-bg-soft-mute: #313136;--vp-c-bg-alt: #161618;--vp-c-border: rgba(82, 82, 89, .68);--vp-c-divider: rgba(82, 82, 89, .32);--vp-c-gutter: #000000;--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black);--vp-c-text-1: var(--vp-c-text-dark-1);--vp-c-text-2: var(--vp-c-text-dark-2);--vp-c-text-3: var(--vp-c-text-dark-3);--vp-c-text-inverse-1: var(--vp-c-text-light-1);--vp-c-text-inverse-2: var(--vp-c-text-light-2);--vp-c-text-inverse-3: var(--vp-c-text-light-3);--vp-c-text-code: #c9def1;--vp-c-mute: #313136;--vp-c-mute-light: #3a3a3c;--vp-c-mute-lighter: #505053;--vp-c-mute-dark: #2c2c30;--vp-c-mute-darker: #252529}:root{--vp-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-local-nav: 10;--vp-z-index-nav: 20;--vp-z-index-layout-top: 30;--vp-z-index-backdrop: 40;--vp-z-index-sidebar: 50;--vp-z-index-footer: 60}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-c-code-dimm: var(--vp-c-text-dark-3);--vp-code-block-color: var(--vp-c-text-dark-1);--vp-code-block-bg: #292b30;--vp-code-block-bg-light: #1e1e20;--vp-code-block-divider-color: #000000;--vp-code-line-highlight-color: rgba(0, 0, 0, .5);--vp-code-line-number-color: var(--vp-c-code-dimm);--vp-code-line-diff-add-color: var(--vp-c-green-dimm-2);--vp-code-line-diff-add-symbol-color: var(--vp-c-green);--vp-code-line-diff-remove-color: var(--vp-c-red-dimm-2);--vp-code-line-diff-remove-symbol-color: var(--vp-c-red);--vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);--vp-code-line-error-color: var(--vp-c-red-dimm-2);--vp-code-copy-code-border-color: transparent;--vp-code-copy-code-bg: var(--vp-code-block-bg-light);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-code-block-bg-light);--vp-code-copy-code-active-text: var(--vp-c-text-dark-2);--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-dark-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);--vp-code-tab-active-text-color: var(--vp-c-text-dark-1);--vp-code-tab-active-bar-color: var(--vp-c-brand)}.dark{--vp-code-block-bg: #161618}:root:not(.dark) .vp-adaptive-theme{--vp-c-code-dimm: var(--vp-c-text-2);--vp-code-block-color: var(--vp-c-text-1);--vp-code-block-bg: #f8f8f8;--vp-code-block-divider-color: var(--vp-c-divider);--vp-code-line-highlight-color: #ececec;--vp-code-line-number-color: var(--vp-c-code-dimm);--vp-code-copy-code-bg: #e2e2e2;--vp-code-copy-code-hover-bg: #dcdcdc;--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-tab-divider: var(--vp-c-divider);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1)}:root{--vp-button-brand-border: var(--vp-c-brand-lighter);--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand);--vp-button-brand-hover-border: var(--vp-c-brand-lighter);--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-dark);--vp-button-brand-active-border: var(--vp-c-brand-lighter);--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-darker);--vp-button-alt-border: var(--vp-c-border);--vp-button-alt-text: var(--vp-c-neutral);--vp-button-alt-bg: var(--vp-c-mute);--vp-button-alt-hover-border: var(--vp-c-border);--vp-button-alt-hover-text: var(--vp-c-neutral);--vp-button-alt-hover-bg: var(--vp-c-mute-dark);--vp-button-alt-active-border: var(--vp-c-border);--vp-button-alt-active-text: var(--vp-c-neutral);--vp-button-alt-active-bg: var(--vp-c-mute-darker);--vp-button-sponsor-border: var(--vp-c-gray-light-3);--vp-button-sponsor-text: var(--vp-c-text-light-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}.dark{--vp-button-sponsor-border: var(--vp-c-gray-dark-1);--vp-button-sponsor-text: var(--vp-c-text-dark-2)}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: var(--vp-c-border);--vp-custom-block-info-text: var(--vp-c-text-2);--vp-custom-block-info-bg: var(--vp-c-bg-soft-up);--vp-custom-block-info-code-bg: var(--vp-c-bg-soft);--vp-custom-block-tip-border: var(--vp-c-green);--vp-custom-block-tip-text: var(--vp-c-green-dark);--vp-custom-block-tip-bg: var(--vp-c-bg-soft-up);--vp-custom-block-tip-code-bg: var(--vp-c-bg-soft);--vp-custom-block-warning-border: var(--vp-c-yellow);--vp-custom-block-warning-text: var(--vp-c-yellow);--vp-custom-block-warning-bg: var(--vp-c-bg-soft-up);--vp-custom-block-warning-code-bg: var(--vp-c-bg-soft);--vp-custom-block-danger-border: var(--vp-c-red);--vp-custom-block-danger-text: var(--vp-c-red);--vp-custom-block-danger-bg: var(--vp-c-bg-soft-up);--vp-custom-block-danger-code-bg: var(--vp-c-bg-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-hover-border-color: var(--vp-c-gray);--vp-input-switch-bg-color: var(--vp-c-mute)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg)}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: var(--vp-c-border);--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-bg-soft-up);--vp-badge-tip-border: var(--vp-c-green-dark);--vp-badge-tip-text: var(--vp-c-green);--vp-badge-tip-bg: var(--vp-c-green-dimm-1);--vp-badge-warning-border: var(--vp-c-yellow-dark);--vp-badge-warning-text: var(--vp-c-yellow);--vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);--vp-badge-danger-border: var(--vp-c-red-dark);--vp-badge-danger-text: var(--vp-c-red);--vp-badge-danger-bg: var(--vp-c-red-dimm-1)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand);--vp-local-search-highlight-bg: var(--vp-c-green-lighter);--vp-local-search-highlight-text: var(--vp-c-black)}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);direction:ltr;font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600}.custom-block a:hover{text-decoration:underline}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.dark .vp-code-light{display:none}html:not(.dark) .vp-code-dark{display:none}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden}.vp-code-group .tabs:after{position:absolute;right:0;bottom:0;left:0;height:1px;background-color:var(--vp-code-tab-divider);content:""}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:absolute;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:10;height:1px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-]{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active{display:block}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{float:left;margin-left:-.87em;padding-right:.23em;font-weight:500;user-select:none;opacity:0;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand);text-decoration-style:dotted;transition:color .25s}.vp-doc a:hover{text-decoration:underline}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block a{color:inherit;font-weight:600}.vp-doc .custom-block a:hover{text-decoration:underline}.vp-doc .custom-block code{font-size:var(--vp-custom-block-code-font-size);font-weight:700;color:inherit}.vp-doc .custom-block div[class*=language-]{margin:8px 0}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;color:var(--vp-c-text-code);background-color:var(--vp-c-mute);transition:color .5s,background-color .5s}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc a>code{color:var(--vp-c-brand);transition:color .25s}.vp-doc a:hover>code{color:var(--vp-c-brand-dark)}.vp-doc div[class*=language-]{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-]{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;left:-65px;display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;width:64px;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:"Copied"}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-c-code-dimm);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin-bottom:4px;text-align:center;letter-spacing:1px;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-bg-soft-down)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge[data-v-350d3852]{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:10px;padding:0 8px;line-height:18px;font-size:12px;font-weight:600;transform:translateY(-2px)}h1 .VPBadge[data-v-350d3852],h2 .VPBadge[data-v-350d3852],h3 .VPBadge[data-v-350d3852],h4 .VPBadge[data-v-350d3852],h5 .VPBadge[data-v-350d3852],h6 .VPBadge[data-v-350d3852]{vertical-align:top}h2 .VPBadge[data-v-350d3852]{border-radius:11px;line-height:20px}.VPBadge.info[data-v-350d3852]{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip[data-v-350d3852]{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning[data-v-350d3852]{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger[data-v-350d3852]{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPSkipLink[data-v-c8616af1]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-c8616af1]:focus{height:auto;width:auto;clip:auto;clip-path:none}.dark .VPSkipLink[data-v-c8616af1]{color:var(--vp-c-green)}@media (min-width: 1280px){.VPSkipLink[data-v-c8616af1]{top:14px;left:16px}}.VPBackdrop[data-v-c79a1216]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-c79a1216],.VPBackdrop.fade-leave-to[data-v-c79a1216]{opacity:0}.VPBackdrop.fade-leave-active[data-v-c79a1216]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-c79a1216]{display:none}}html:not(.dark) .VPImage.dark[data-v-6db2186b]{display:none}.dark .VPImage.light[data-v-6db2186b]{display:none}.title[data-v-4d981103]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-4d981103]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-4d981103]{border-bottom-color:var(--vp-c-divider)}}[data-v-4d981103] .logo{margin-right:8px;height:24px}/*! @docsearch/css 3.4.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;position:relative;padding:0 0 2px;border:0;top:-1px;width:20px}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.DocSearch{--docsearch-primary-color: var(--vp-c-brand);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vp-c-text-1);--docsearch-muted-color: var(--vp-c-text-2);--docsearch-searchbox-shadow: none;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vp-c-bg-soft);--docsearch-footer-background: var(--vp-c-bg)}.dark .DocSearch{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: var(--vp-c-text-2);--docsearch-hit-background: var(--vp-c-bg-soft-mute);--docsearch-hit-color: var(--vp-c-text-2);--docsearch-hit-shadow: none}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:48px;height:55px;background:transparent;transition:border-color .25s}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}.DocSearch-Button:hover{border-color:var(--vp-c-brand);background:var(--vp-c-bg-alt)}}.DocSearch-Button .DocSearch-Button-Container{display:flex;align-items:center}.DocSearch-Button .DocSearch-Search-Icon{position:relative;width:16px;height:16px;color:var(--vp-c-text-1);fill:currentColor;transition:color .5s}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:8px;width:14px;height:14px;color:var(--vp-c-text-2)}}.DocSearch-Button .DocSearch-Button-Placeholder{display:none;margin-top:2px;padding:0 16px 0 0;font-size:13px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button .DocSearch-Button-Keys{direction:ltr;display:none;min-width:auto}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Keys{display:flex;align-items:center}}.DocSearch-Button .DocSearch-Button-Key{display:block;margin:2px 0 0;border:1px solid var(--vp-c-divider);border-right:none;border-radius:4px 0 0 4px;padding-left:6px;min-width:0;width:auto;height:22px;line-height:22px;font-family:var(--vp-font-family-base);font-size:12px;font-weight:500;transition:color .5s,border-color .5s}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vp-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button .DocSearch-Button-Key:first-child{font-size:1px;letter-spacing:-12px;color:transparent}.DocSearch-Button .DocSearch-Button-Key:first-child:after{content:var(--vp-meta-key);font-size:12px;letter-spacing:normal;color:var(--docsearch-muted-color)}.DocSearch-Button .DocSearch-Button-Key:first-child>*{display:none}.VPNavBarSearch{display:flex;align-items:center}@media (min-width: 768px){.VPNavBarSearch{flex-grow:1;padding-left:24px}}@media (min-width: 960px){.VPNavBarSearch{padding-left:32px}}.dark .DocSearch-Footer{border-top:1px solid var(--vp-c-divider)}.DocSearch-Form{border:1px solid var(--vp-c-brand);background-color:var(--vp-c-white)}.dark .DocSearch-Form{background-color:var(--vp-c-bg-soft-mute)}.DocSearch-Screen-Icon>svg{margin:auto}.icon[data-v-8f4dc553]{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;fill:var(--vp-c-text-3);transition:fill .25s;flex-shrink:0}.VPNavBarMenuLink[data-v-5e623618]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-5e623618],.VPNavBarMenuLink[data-v-5e623618]:hover{color:var(--vp-c-brand)}.VPMenuGroup+.VPMenuLink[data-v-2f2cfafc]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-2f2cfafc]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-2f2cfafc]:hover{color:var(--vp-c-brand);background-color:var(--vp-c-bg-elv-mute)}.link.active[data-v-2f2cfafc]{color:var(--vp-c-brand)}.VPMenuGroup[data-v-69e747b5]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-69e747b5]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-69e747b5]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-69e747b5]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-e7ea1737]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-e7ea1737] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-e7ea1737] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-e7ea1737] .group:last-child{padding-bottom:0}.VPMenu[data-v-e7ea1737] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-e7ea1737] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-e7ea1737] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-e7ea1737] .action{padding-left:24px}.VPFlyout[data-v-764effdf]{position:relative}.VPFlyout[data-v-764effdf]:hover{color:var(--vp-c-brand);transition:color .25s}.VPFlyout:hover .text[data-v-764effdf]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-764effdf]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-764effdf]{color:var(--vp-c-brand)}.VPFlyout.active:hover .text[data-v-764effdf]{color:var(--vp-c-brand-dark)}.VPFlyout:hover .menu[data-v-764effdf],.button[aria-expanded=true]+.menu[data-v-764effdf]{opacity:1;visibility:visible;transform:translateY(0)}.button[data-v-764effdf]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-764effdf]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-764effdf]{margin-right:0;width:16px;height:16px;fill:currentColor}.text-icon[data-v-764effdf]{margin-left:4px;width:14px;height:14px;fill:currentColor}.icon[data-v-764effdf]{width:20px;height:20px;fill:currentColor;transition:fill .25s}.menu[data-v-764effdf]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPNavBarMenu[data-v-7f418b0f]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-7f418b0f]{display:flex}}.VPNavBarTranslations[data-v-74abcbb9]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-74abcbb9]{display:flex;align-items:center}}.title[data-v-74abcbb9]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPSwitch[data-v-f3c41672]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s}.VPSwitch[data-v-f3c41672]:hover{border-color:var(--vp-input-hover-border-color)}.check[data-v-f3c41672]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s}.icon[data-v-f3c41672]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-f3c41672] svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--vp-c-text-2)}.dark .icon[data-v-f3c41672] svg{fill:var(--vp-c-text-1);transition:opacity .25s}.sun[data-v-87de0873]{opacity:1}.moon[data-v-87de0873],.dark .sun[data-v-87de0873]{opacity:0}.dark .moon[data-v-87de0873]{opacity:1}.dark .VPSwitchAppearance[data-v-87de0873] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-f6a63727]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-f6a63727]{display:flex;align-items:center}}.VPSocialLink[data-v-c530cc0a]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-c530cc0a]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-c530cc0a]>svg{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-d7a53887]{display:flex;justify-content:center}.VPNavBarSocialLinks[data-v-0394ad82]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0394ad82]{display:flex;align-items:center}}.VPNavBarExtra[data-v-40855f84]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-40855f84]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-40855f84]{display:none}}.trans-title[data-v-40855f84]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-40855f84],.item.social-links[data-v-40855f84]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-40855f84]{min-width:176px}.appearance-action[data-v-40855f84]{margin-right:-2px}.social-links-list[data-v-40855f84]{margin:-4px -8px}.VPNavBarHamburger[data-v-e5dd9c1c]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e5dd9c1c]{display:none}}.container[data-v-e5dd9c1c]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e5dd9c1c]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e5dd9c1c],.middle[data-v-e5dd9c1c],.bottom[data-v-e5dd9c1c]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(0)}.middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(4px)}.VPNavBar[data-v-7c10cd25]{position:relative;border-bottom:1px solid transparent;padding:0 8px 0 24px;height:var(--vp-nav-height);transition:border-color .5s,background-color .5s;pointer-events:none;white-space:nowrap}.VPNavBar.has-sidebar[data-v-7c10cd25]{border-bottom-color:var(--vp-c-gutter)}@media (min-width: 768px){.VPNavBar[data-v-7c10cd25]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar[data-v-7c10cd25]{border-bottom-color:transparent;padding:0}.VPNavBar.fill[data-v-7c10cd25]:not(.has-sidebar){border-bottom-color:var(--vp-c-gutter);background-color:var(--vp-nav-bg-color)}}.container[data-v-7c10cd25]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-7c10cd25],.container>.content[data-v-7c10cd25]{pointer-events:none}.container[data-v-7c10cd25] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-7c10cd25]{max-width:100%}}.title[data-v-7c10cd25]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-7c10cd25]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-7c10cd25]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-7c10cd25]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-7c10cd25]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-7c10cd25]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-7c10cd25]{display:flex;justify-content:flex-end;align-items:center;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .content-body[data-v-7c10cd25],.VPNavBar.fill .content-body[data-v-7c10cd25]{position:relative;background-color:var(--vp-nav-bg-color)}}@media (max-width: 768px){.content-body[data-v-7c10cd25]{column-gap:.5rem}}.menu+.translations[data-v-7c10cd25]:before,.menu+.appearance[data-v-7c10cd25]:before,.menu+.social-links[data-v-7c10cd25]:before,.translations+.appearance[data-v-7c10cd25]:before,.appearance+.social-links[data-v-7c10cd25]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-7c10cd25]:before,.translations+.appearance[data-v-7c10cd25]:before{margin-right:16px}.appearance+.social-links[data-v-7c10cd25]:before{margin-left:16px}.social-links[data-v-7c10cd25]{margin-right:-8px}@media (min-width: 960px){.VPNavBar.has-sidebar .curtain[data-v-7c10cd25]{position:absolute;right:0;bottom:-31px;width:calc(100% - var(--vp-sidebar-width));height:32px}.VPNavBar.has-sidebar .curtain[data-v-7c10cd25]:before{display:block;width:100%;height:32px;background:linear-gradient(var(--vp-c-bg),transparent 70%);content:""}}@media (min-width: 1440px){.VPNavBar.has-sidebar .curtain[data-v-7c10cd25]{width:calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)))}}.VPNavScreenMenuLink[data-v-30be0acb]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-30be0acb]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupLink[data-v-6656c42a]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-6656c42a]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupSection[data-v-8133b170]{display:block}.title[data-v-8133b170]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-338a1689]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-338a1689]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-338a1689]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-338a1689]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-338a1689]{padding-bottom:6px;color:var(--vp-c-brand)}.VPNavScreenMenuGroup.open .button-icon[data-v-338a1689]{transform:rotate(45deg)}.button[data-v-338a1689]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-338a1689]:hover{color:var(--vp-c-brand)}.button-icon[data-v-338a1689]{width:14px;height:14px;fill:var(--vp-c-text-2);transition:fill .5s,transform .25s}.group[data-v-338a1689]:first-child{padding-top:0}.group+.group[data-v-338a1689],.group+.item[data-v-338a1689]{padding-top:4px}.VPNavScreenAppearance[data-v-add8f686]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-add8f686]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenTranslations[data-v-d72aa483]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-d72aa483]{height:auto}.title[data-v-d72aa483]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-d72aa483]{width:16px;height:16px;fill:currentColor}.icon.lang[data-v-d72aa483]{margin-right:8px}.icon.chevron[data-v-d72aa483]{margin-left:4px}.list[data-v-d72aa483]{padding:4px 0 0 24px}.link[data-v-d72aa483]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-724636ae]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-724636ae],.VPNavScreen.fade-leave-active[data-v-724636ae]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-724636ae],.VPNavScreen.fade-leave-active .container[data-v-724636ae]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-724636ae],.VPNavScreen.fade-leave-to[data-v-724636ae]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-724636ae],.VPNavScreen.fade-leave-to .container[data-v-724636ae]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-724636ae]{display:none}}.container[data-v-724636ae]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-724636ae],.menu+.appearance[data-v-724636ae],.translations+.appearance[data-v-724636ae]{margin-top:24px}.menu+.social-links[data-v-724636ae]{margin-top:16px}.appearance+.social-links[data-v-724636ae]{margin-top:16px}.VPNav[data-v-7e5bc4a5]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-7e5bc4a5]{position:fixed}}.root[data-v-9a431c33]{position:relative;z-index:1}.nested[data-v-9a431c33]{padding-left:13px}.outline-link[data-v-9a431c33]{display:block;line-height:28px;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s;font-weight:500}.outline-link[data-v-9a431c33]:hover,.outline-link.active[data-v-9a431c33]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-9a431c33]{padding-left:13px}.VPLocalNavOutlineDropdown[data-v-079b16a8]{padding:12px 20px 11px}.VPLocalNavOutlineDropdown button[data-v-079b16a8]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-079b16a8]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-079b16a8]{color:var(--vp-c-text-1)}.icon[data-v-079b16a8]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-079b16a8] .outline-link{font-size:14px;padding:2px 0}.open>.icon[data-v-079b16a8]{transform:rotate(90deg)}.items[data-v-079b16a8]{position:absolute;left:20px;right:20px;top:64px;background-color:var(--vp-local-nav-bg-color);padding:4px 10px 16px;border:1px solid var(--vp-c-divider);border-radius:8px;max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}.top-link[data-v-079b16a8]{display:block;color:var(--vp-c-brand);font-size:13px;font-weight:500;padding:6px 0;margin:0 13px 10px;border-bottom:1px solid var(--vp-c-divider)}.flyout-enter-active[data-v-079b16a8]{transition:all .2s ease-out}.flyout-leave-active[data-v-079b16a8]{transition:all .15s ease-in}.flyout-enter-from[data-v-079b16a8],.flyout-leave-to[data-v-079b16a8]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-392e1bf8]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color);transition:border-color .5s,background-color .5s}@media (min-width: 960px){.VPLocalNav[data-v-392e1bf8]{display:none}}.menu[data-v-392e1bf8]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-392e1bf8]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-392e1bf8]{padding:0 32px}}.menu-icon[data-v-392e1bf8]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPOutlineDropdown[data-v-392e1bf8]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-392e1bf8]{padding:12px 32px 11px}}.VPSidebarItem.level-0[data-v-c4656e6d]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-c4656e6d]{padding-bottom:10px}.item[data-v-c4656e6d]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-c4656e6d]{cursor:pointer}.indicator[data-v-c4656e6d]{position:absolute;top:6px;bottom:6px;left:-17px;width:1px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-c4656e6d],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-c4656e6d],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-c4656e6d],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-c4656e6d]{background-color:var(--vp-c-brand)}.link[data-v-c4656e6d]{display:flex;align-items:center;flex-grow:1}.text[data-v-c4656e6d]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-c4656e6d]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-c4656e6d],.VPSidebarItem.level-2 .text[data-v-c4656e6d],.VPSidebarItem.level-3 .text[data-v-c4656e6d],.VPSidebarItem.level-4 .text[data-v-c4656e6d],.VPSidebarItem.level-5 .text[data-v-c4656e6d]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-c4656e6d]{color:var(--vp-c-brand)}.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-c4656e6d]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-c4656e6d]{color:var(--vp-c-brand)}.caret[data-v-c4656e6d]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s}.item:hover .caret[data-v-c4656e6d]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-c4656e6d]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-c4656e6d]{width:18px;height:18px;fill:currentColor;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-c4656e6d]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-c4656e6d],.VPSidebarItem.level-2 .items[data-v-c4656e6d],.VPSidebarItem.level-3 .items[data-v-c4656e6d],.VPSidebarItem.level-4 .items[data-v-c4656e6d],.VPSidebarItem.level-5 .items[data-v-c4656e6d]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-c4656e6d]{display:none}.VPSidebar[data-v-af16598e]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-af16598e]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-af16598e]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-af16598e]{z-index:1;padding-top:var(--vp-nav-height);padding-bottom:128px;width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-af16598e]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-af16598e]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-af16598e]{outline:0}.group+.group[data-v-af16598e]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-af16598e]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPButton[data-v-567ba664]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-567ba664]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-567ba664]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-567ba664]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-567ba664]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-567ba664]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-567ba664]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-567ba664]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-567ba664]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-567ba664]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-567ba664]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-567ba664]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-567ba664]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}.VPHero[data-v-fd2650d5]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-fd2650d5]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-fd2650d5]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-fd2650d5]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-fd2650d5]{flex-direction:row}}.main[data-v-fd2650d5]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-fd2650d5]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-fd2650d5]{text-align:left}}@media (min-width: 960px){.main[data-v-fd2650d5]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-fd2650d5]{max-width:592px}}.name[data-v-fd2650d5],.text[data-v-fd2650d5]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-fd2650d5],.VPHero.has-image .text[data-v-fd2650d5]{margin:0 auto}.name[data-v-fd2650d5]{color:var(--vp-home-hero-name-color)}.clip[data-v-fd2650d5]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-fd2650d5],.text[data-v-fd2650d5]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-fd2650d5],.text[data-v-fd2650d5]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-fd2650d5],.VPHero.has-image .text[data-v-fd2650d5]{margin:0}}.tagline[data-v-fd2650d5]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-fd2650d5]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-fd2650d5]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-fd2650d5]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-fd2650d5]{margin:0}}.actions[data-v-fd2650d5]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-fd2650d5]{justify-content:center}@media (min-width: 640px){.actions[data-v-fd2650d5]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-fd2650d5]{justify-content:flex-start}}.action[data-v-fd2650d5]{flex-shrink:0;padding:6px}.image[data-v-fd2650d5]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-fd2650d5]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-fd2650d5]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-fd2650d5]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-fd2650d5]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-fd2650d5]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-fd2650d5]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-fd2650d5]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-fd2650d5]{width:320px;height:320px}}[data-v-fd2650d5] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-fd2650d5] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-fd2650d5] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-837f6cca]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-837f6cca]:hover{border-color:var(--vp-c-brand);background-color:var(--vp-c-bg-soft-up)}.box[data-v-837f6cca]{display:flex;flex-direction:column;padding:24px;height:100%}.VPFeature[data-v-837f6cca] .VPImage{width:48px;height:48px;margin-bottom:20px}.icon[data-v-837f6cca]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-bg-soft-down);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-837f6cca]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-837f6cca]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-837f6cca]{padding-top:8px}.link-text-value[data-v-837f6cca]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand)}.link-text-icon[data-v-837f6cca]{display:inline-block;margin-left:6px;width:14px;height:14px;fill:currentColor}.VPFeatures[data-v-ba861f23]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-ba861f23]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-ba861f23]{padding:0 64px}}.container[data-v-ba861f23]{margin:0 auto;max-width:1152px}.items[data-v-ba861f23]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-ba861f23]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-ba861f23],.item.grid-4[data-v-ba861f23],.item.grid-6[data-v-ba861f23]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-ba861f23],.item.grid-4[data-v-ba861f23]{width:50%}.item.grid-3[data-v-ba861f23],.item.grid-6[data-v-ba861f23]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-ba861f23]{width:25%}}.VPHome[data-v-d82743a8]{padding-bottom:96px}.VPHome[data-v-d82743a8] .VPHomeSponsors{margin-top:112px;margin-bottom:-128px}@media (min-width: 768px){.VPHome[data-v-d82743a8]{padding-bottom:128px}}.VPDocAsideOutline[data-v-ff0f39c8]{display:none}.VPDocAsideOutline.has-outline[data-v-ff0f39c8]{display:block}.content[data-v-ff0f39c8]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-ff0f39c8]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:1px;height:18px;background-color:var(--vp-c-brand);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-ff0f39c8]{letter-spacing:.4px;line-height:28px;font-size:13px;font-weight:600}.VPDocAside[data-v-3f215769]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-3f215769]{flex-grow:1}.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-3f215769] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-7b3ebfe1]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-7b3ebfe1]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-face870a]{margin-top:64px}.edit-info[data-v-face870a]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-face870a]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-face870a]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.edit-link-button[data-v-face870a]:hover{color:var(--vp-c-brand-dark)}.edit-link-icon[data-v-face870a]{margin-right:8px;width:14px;height:14px;fill:currentColor}.prev-next[data-v-face870a]{border-top:1px solid var(--vp-c-divider);padding-top:24px}@media (min-width: 640px){.prev-next[data-v-face870a]{display:flex}}.pager.has-prev[data-v-face870a]{padding-top:8px}@media (min-width: 640px){.pager[data-v-face870a]{display:flex;flex-direction:column;flex-shrink:0;width:50%}.pager.has-prev[data-v-face870a]{padding-top:0;padding-left:16px}}.pager-link[data-v-face870a]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-face870a]:hover{border-color:var(--vp-c-brand)}.pager-link.next[data-v-face870a]{margin-left:auto;text-align:right}.desc[data-v-face870a]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-face870a]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.VPDocOutlineDropdown[data-v-2edece88]{margin-bottom:42px}.VPDocOutlineDropdown button[data-v-2edece88]{display:block;font-size:14px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;border:1px solid var(--vp-c-border);padding:4px 12px;border-radius:8px}.VPDocOutlineDropdown button[data-v-2edece88]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPDocOutlineDropdown button.open[data-v-2edece88]{color:var(--vp-c-text-1)}.icon[data-v-2edece88]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-2edece88] .outline-link{font-size:13px}.open>.icon[data-v-2edece88]{transform:rotate(90deg)}.items[data-v-2edece88]{margin-top:10px;border-left:1px solid var(--vp-c-divider)}.VPDoc[data-v-c4b0d3cf]{padding:32px 24px 96px;width:100%}.VPDoc .VPDocOutlineDropdown[data-v-c4b0d3cf]{display:none}@media (min-width: 960px) and (max-width: 1280px){.VPDoc .VPDocOutlineDropdown[data-v-c4b0d3cf]{display:block}}@media (min-width: 768px){.VPDoc[data-v-c4b0d3cf]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-c4b0d3cf]{padding:32px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-c4b0d3cf]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-c4b0d3cf]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-c4b0d3cf]{display:flex;justify-content:center}.VPDoc .aside[data-v-c4b0d3cf]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-c4b0d3cf]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-c4b0d3cf]{max-width:1104px}}.container[data-v-c4b0d3cf]{margin:0 auto;width:100%}.aside[data-v-c4b0d3cf]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-c4b0d3cf]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-c4b0d3cf]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-c4b0d3cf]::-webkit-scrollbar{display:none}.aside-curtain[data-v-c4b0d3cf]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-c4b0d3cf]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));padding-bottom:32px}.content[data-v-c4b0d3cf]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-c4b0d3cf]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-c4b0d3cf]{order:1;margin:0;min-width:640px}}.content-container[data-v-c4b0d3cf]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-c4b0d3cf]{max-width:688px}.NotFound[data-v-c70503b8]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-c70503b8]{padding:96px 32px 168px}}.code[data-v-c70503b8]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-c70503b8]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-c70503b8]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-c70503b8]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-c70503b8]{padding-top:20px}.link[data-v-c70503b8]{display:inline-block;border:1px solid var(--vp-c-brand);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:border-color .25s,color .25s}.link[data-v-c70503b8]:hover{border-color:var(--vp-c-brand-dark);color:var(--vp-c-brand-dark)}.VPContent[data-v-a494bd1d]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-a494bd1d]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-a494bd1d]{margin:0}@media (min-width: 960px){.VPContent[data-v-a494bd1d]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-a494bd1d]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-a494bd1d]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-2f86ebd2]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-2f86ebd2]{display:none}@media (min-width: 768px){.VPFooter[data-v-2f86ebd2]{padding:32px}}.container[data-v-2f86ebd2]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-2f86ebd2],.copyright[data-v-2f86ebd2]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.message[data-v-2f86ebd2]{order:2}.copyright[data-v-2f86ebd2]{order:1}.Layout[data-v-b2cf3e0b]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-3c6e61c2]{border-top:1px solid var(--vp-c-gutter);padding:88px 24px 96px;background-color:var(--vp-c-bg)}.container[data-v-3c6e61c2]{margin:0 auto;max-width:1152px}.love[data-v-3c6e61c2]{margin:0 auto;width:28px;height:28px;color:var(--vp-c-text-3)}.icon[data-v-3c6e61c2]{width:28px;height:28px;fill:currentColor}.message[data-v-3c6e61c2]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-3c6e61c2]{padding-top:32px}.action[data-v-3c6e61c2]{padding-top:40px;text-align:center}.VPTeamPage[data-v-10b00018]{padding-bottom:96px}@media (min-width: 768px){.VPTeamPage[data-v-10b00018]{padding-bottom:128px}}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-10b00018-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-10b00018-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:96px}}.VPTeamMembers[data-v-10b00018-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-10b00018-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-10b00018-s]{padding:0 64px}}.VPTeamPageTitle[data-v-bf2cbdac]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:80px 64px 48px}}.title[data-v-bf2cbdac]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-bf2cbdac]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-bf2cbdac]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-bf2cbdac]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-b1a88750]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-b1a88750]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-b1a88750]{padding:0 64px}}.title[data-v-b1a88750]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-b1a88750]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-b1a88750]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-b1a88750]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-b1a88750]{padding-top:40px}.VPTeamMembersItem[data-v-a3462077]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-a3462077]{padding:32px}.VPTeamMembersItem.small .data[data-v-a3462077]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-a3462077]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-a3462077]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-a3462077]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-a3462077]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-a3462077]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-a3462077]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-a3462077]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-a3462077]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-a3462077]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-a3462077]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-a3462077]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-a3462077]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-a3462077]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-a3462077]{text-align:center}.avatar[data-v-a3462077]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-a3462077]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-a3462077]{margin:0;font-weight:600}.affiliation[data-v-a3462077]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-a3462077]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-a3462077]:hover{color:var(--vp-c-brand)}.desc[data-v-a3462077]{margin:0 auto}.desc[data-v-a3462077] a{font-weight:500;color:var(--vp-c-brand);text-decoration-style:dotted;transition:color .25s}.links[data-v-a3462077]{display:flex;justify-content:center;height:56px}.sp-link[data-v-a3462077]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-a3462077]:hover,.sp .sp-link.link[data-v-a3462077]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-a3462077]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPTeamMembers.small .container[data-v-04685dce]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-04685dce]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-04685dce]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-04685dce]{max-width:876px}.VPTeamMembers.medium .container[data-v-04685dce]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-04685dce]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-04685dce]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-04685dce]{max-width:760px}.container[data-v-04685dce]{display:grid;gap:24px;margin:0 auto;max-width:1152px}img[data-v-77d3d7d2]{margin:0 auto}:root{--vp-c-brand: #16c5fe;--vp-c-green: #16c5fe;--vp-c-green-light: #109ef7;--vp-c-green-lighter: #109ef7;--vp-c-green-dark: #109ef7;--vp-c-green-darker: #109ef7}.dark{--vp-c-bg: #000;--vp-code-block-bg: #111;--vp-c-bg-alt: rgba(0, 0, 0, .5)}@media (min-width: 960px){.dark .VPNavBar.has-sidebar .content[data-v-d84f2262]{background:rgba(36,36,36,.1)}}.Layout:before{content:"";background-size:100% 100%;background-position:right;background-repeat:no-repeat;opacity:1;max-width:100%;height:100%;width:50%;position:fixed;top:-20%;right:-10%;display:block}.Layout:after{content:"";background-size:100% 100%;background-position:right;background-repeat:no-repeat;opacity:1;max-width:100%;height:100%;width:50%;position:fixed;bottom:-20%;left:-10%;display:block;z-index:-1}@media (min-width: 960px){.title{font-size:24px!important}}.image-src{max-width:220px!important} +@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-cyrillic.5f2c6c8c.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-cyrillic-ext.e75737ce.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-greek.d5a6d92a.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-greek-ext.ab0619bc.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-latin.2ed14f66.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-latin-ext.0030eebd.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:normal;font-named-instance:"Regular";src:url(/vue-h5-template/assets/inter-roman-vietnamese.14ce25a6.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-cyrillic.ea42a392.woff2) format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2) format("woff2");unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-greek.8f4463c4.woff2) format("woff2");unicode-range:U+0370-03FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-greek-ext.4fbe9427.woff2) format("woff2");unicode-range:U+1F00-1FFF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-latin.bd3b6f56.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-latin-ext.bd8920cc.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Inter var;font-weight:100 900;font-display:swap;font-style:italic;font-named-instance:"Italic";src:url(/vue-h5-template/assets/inter-italic-vietnamese.6ce511fb.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:Chinese Quotes;src:local("PingFang SC Regular"),local("PingFang SC"),local("SimHei"),local("Source Han Sans SC");unicode-range:U+2018,U+2019,U+201C,U+201D}:root{--vp-c-white: #ffffff;--vp-c-black: #000000;--vp-c-gray: #8e8e93;--vp-c-text-light-1: rgba(60, 60, 67);--vp-c-text-light-2: rgba(60, 60, 67, .75);--vp-c-text-light-3: rgba(60, 60, 67, .33);--vp-c-text-dark-1: rgba(255, 255, 245, .86);--vp-c-text-dark-2: rgba(235, 235, 245, .6);--vp-c-text-dark-3: rgba(235, 235, 245, .38);--vp-c-green: #10b981;--vp-c-green-light: #34d399;--vp-c-green-lighter: #6ee7b7;--vp-c-green-dark: #059669;--vp-c-green-darker: #047857;--vp-c-green-dimm-1: rgba(16, 185, 129, .05);--vp-c-green-dimm-2: rgba(16, 185, 129, .2);--vp-c-green-dimm-3: rgba(16, 185, 129, .5);--vp-c-yellow: #d97706;--vp-c-yellow-light: #f59e0b;--vp-c-yellow-lighter: #fbbf24;--vp-c-yellow-dark: #b45309;--vp-c-yellow-darker: #92400e;--vp-c-yellow-dimm-1: rgba(234, 179, 8, .05);--vp-c-yellow-dimm-2: rgba(234, 179, 8, .2);--vp-c-yellow-dimm-3: rgba(234, 179, 8, .5);--vp-c-red: #f43f5e;--vp-c-red-light: #fb7185;--vp-c-red-lighter: #fda4af;--vp-c-red-dark: #e11d48;--vp-c-red-darker: #be123c;--vp-c-red-dimm-1: rgba(244, 63, 94, .05);--vp-c-red-dimm-2: rgba(244, 63, 94, .2);--vp-c-red-dimm-3: rgba(244, 63, 94, .5);--vp-c-sponsor: #db2777}:root{--vp-c-bg: #ffffff;--vp-c-bg-elv: #ffffff;--vp-c-bg-elv-up: #ffffff;--vp-c-bg-elv-down: #f6f6f7;--vp-c-bg-elv-mute: #f6f6f7;--vp-c-bg-soft: #f6f6f7;--vp-c-bg-soft-up: #f9f9fa;--vp-c-bg-soft-down: #e3e3e5;--vp-c-bg-soft-mute: #e3e3e5;--vp-c-bg-alt: #f6f6f7;--vp-c-border: rgba(60, 60, 67, .29);--vp-c-divider: rgba(60, 60, 67, .12);--vp-c-gutter: rgba(60, 60, 67, .12);--vp-c-neutral: var(--vp-c-black);--vp-c-neutral-inverse: var(--vp-c-white);--vp-c-text-1: var(--vp-c-text-light-1);--vp-c-text-2: var(--vp-c-text-light-2);--vp-c-text-3: var(--vp-c-text-light-3);--vp-c-text-inverse-1: var(--vp-c-text-dark-1);--vp-c-text-inverse-2: var(--vp-c-text-dark-2);--vp-c-text-inverse-3: var(--vp-c-text-dark-3);--vp-c-text-code: #476582;--vp-c-brand: var(--vp-c-green);--vp-c-brand-light: var(--vp-c-green-light);--vp-c-brand-lighter: var(--vp-c-green-lighter);--vp-c-brand-dark: var(--vp-c-green-dark);--vp-c-brand-darker: var(--vp-c-green-darker);--vp-c-mute: #f6f6f7;--vp-c-mute-light: #f9f9fc;--vp-c-mute-lighter: #ffffff;--vp-c-mute-dark: #e3e3e5;--vp-c-mute-darker: #d7d7d9}.dark{--vp-c-bg: #1e1e20;--vp-c-bg-elv: #252529;--vp-c-bg-elv-up: #313136;--vp-c-bg-elv-down: #1e1e20;--vp-c-bg-elv-mute: #313136;--vp-c-bg-soft: #252529;--vp-c-bg-soft-up: #313136;--vp-c-bg-soft-down: #1e1e20;--vp-c-bg-soft-mute: #313136;--vp-c-bg-alt: #161618;--vp-c-border: rgba(82, 82, 89, .68);--vp-c-divider: rgba(82, 82, 89, .32);--vp-c-gutter: #000000;--vp-c-neutral: var(--vp-c-white);--vp-c-neutral-inverse: var(--vp-c-black);--vp-c-text-1: var(--vp-c-text-dark-1);--vp-c-text-2: var(--vp-c-text-dark-2);--vp-c-text-3: var(--vp-c-text-dark-3);--vp-c-text-inverse-1: var(--vp-c-text-light-1);--vp-c-text-inverse-2: var(--vp-c-text-light-2);--vp-c-text-inverse-3: var(--vp-c-text-light-3);--vp-c-text-code: #c9def1;--vp-c-mute: #313136;--vp-c-mute-light: #3a3a3c;--vp-c-mute-lighter: #505053;--vp-c-mute-dark: #2c2c30;--vp-c-mute-darker: #252529}:root{--vp-font-family-base: "Chinese Quotes", "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--vp-font-family-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root{--vp-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .06);--vp-shadow-2: 0 3px 12px rgba(0, 0, 0, .07), 0 1px 4px rgba(0, 0, 0, .07);--vp-shadow-3: 0 12px 32px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .08);--vp-shadow-4: 0 14px 44px rgba(0, 0, 0, .12), 0 3px 9px rgba(0, 0, 0, .12);--vp-shadow-5: 0 18px 56px rgba(0, 0, 0, .16), 0 4px 12px rgba(0, 0, 0, .16)}:root{--vp-z-index-local-nav: 10;--vp-z-index-nav: 20;--vp-z-index-layout-top: 30;--vp-z-index-backdrop: 40;--vp-z-index-sidebar: 50;--vp-z-index-footer: 60}:root{--vp-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");--vp-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E")}:root{--vp-layout-max-width: 1440px}:root{--vp-header-anchor-symbol: "#"}:root{--vp-code-line-height: 1.7;--vp-code-font-size: .875em;--vp-c-code-dimm: var(--vp-c-text-dark-3);--vp-code-block-color: var(--vp-c-text-dark-1);--vp-code-block-bg: #292b30;--vp-code-block-bg-light: #1e1e20;--vp-code-block-divider-color: #000000;--vp-code-line-highlight-color: rgba(0, 0, 0, .5);--vp-code-line-number-color: var(--vp-c-code-dimm);--vp-code-line-diff-add-color: var(--vp-c-green-dimm-2);--vp-code-line-diff-add-symbol-color: var(--vp-c-green);--vp-code-line-diff-remove-color: var(--vp-c-red-dimm-2);--vp-code-line-diff-remove-symbol-color: var(--vp-c-red);--vp-code-line-warning-color: var(--vp-c-yellow-dimm-2);--vp-code-line-error-color: var(--vp-c-red-dimm-2);--vp-code-copy-code-border-color: transparent;--vp-code-copy-code-bg: var(--vp-code-block-bg-light);--vp-code-copy-code-hover-border-color: var(--vp-c-divider);--vp-code-copy-code-hover-bg: var(--vp-code-block-bg-light);--vp-code-copy-code-active-text: var(--vp-c-text-dark-2);--vp-code-tab-divider: var(--vp-code-block-divider-color);--vp-code-tab-text-color: var(--vp-c-text-dark-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-dark-1);--vp-code-tab-active-text-color: var(--vp-c-text-dark-1);--vp-code-tab-active-bar-color: var(--vp-c-brand)}.dark{--vp-code-block-bg: #161618}:root:not(.dark) .vp-adaptive-theme{--vp-c-code-dimm: var(--vp-c-text-2);--vp-code-block-color: var(--vp-c-text-1);--vp-code-block-bg: #f8f8f8;--vp-code-block-divider-color: var(--vp-c-divider);--vp-code-line-highlight-color: #ececec;--vp-code-line-number-color: var(--vp-c-code-dimm);--vp-code-copy-code-bg: #e2e2e2;--vp-code-copy-code-hover-bg: #dcdcdc;--vp-code-copy-code-active-text: var(--vp-c-text-2);--vp-code-tab-divider: var(--vp-c-divider);--vp-code-tab-text-color: var(--vp-c-text-2);--vp-code-tab-bg: var(--vp-code-block-bg);--vp-code-tab-hover-text-color: var(--vp-c-text-1);--vp-code-tab-active-text-color: var(--vp-c-text-1)}:root{--vp-button-brand-border: var(--vp-c-brand-lighter);--vp-button-brand-text: var(--vp-c-white);--vp-button-brand-bg: var(--vp-c-brand);--vp-button-brand-hover-border: var(--vp-c-brand-lighter);--vp-button-brand-hover-text: var(--vp-c-white);--vp-button-brand-hover-bg: var(--vp-c-brand-dark);--vp-button-brand-active-border: var(--vp-c-brand-lighter);--vp-button-brand-active-text: var(--vp-c-white);--vp-button-brand-active-bg: var(--vp-c-brand-darker);--vp-button-alt-border: var(--vp-c-border);--vp-button-alt-text: var(--vp-c-neutral);--vp-button-alt-bg: var(--vp-c-mute);--vp-button-alt-hover-border: var(--vp-c-border);--vp-button-alt-hover-text: var(--vp-c-neutral);--vp-button-alt-hover-bg: var(--vp-c-mute-dark);--vp-button-alt-active-border: var(--vp-c-border);--vp-button-alt-active-text: var(--vp-c-neutral);--vp-button-alt-active-bg: var(--vp-c-mute-darker);--vp-button-sponsor-border: var(--vp-c-gray-light-3);--vp-button-sponsor-text: var(--vp-c-text-light-2);--vp-button-sponsor-bg: transparent;--vp-button-sponsor-hover-border: var(--vp-c-sponsor);--vp-button-sponsor-hover-text: var(--vp-c-sponsor);--vp-button-sponsor-hover-bg: transparent;--vp-button-sponsor-active-border: var(--vp-c-sponsor);--vp-button-sponsor-active-text: var(--vp-c-sponsor);--vp-button-sponsor-active-bg: transparent}.dark{--vp-button-sponsor-border: var(--vp-c-gray-dark-1);--vp-button-sponsor-text: var(--vp-c-text-dark-2)}:root{--vp-custom-block-font-size: 14px;--vp-custom-block-code-font-size: 13px;--vp-custom-block-info-border: var(--vp-c-border);--vp-custom-block-info-text: var(--vp-c-text-2);--vp-custom-block-info-bg: var(--vp-c-bg-soft-up);--vp-custom-block-info-code-bg: var(--vp-c-bg-soft);--vp-custom-block-tip-border: var(--vp-c-green);--vp-custom-block-tip-text: var(--vp-c-green-dark);--vp-custom-block-tip-bg: var(--vp-c-bg-soft-up);--vp-custom-block-tip-code-bg: var(--vp-c-bg-soft);--vp-custom-block-warning-border: var(--vp-c-yellow);--vp-custom-block-warning-text: var(--vp-c-yellow);--vp-custom-block-warning-bg: var(--vp-c-bg-soft-up);--vp-custom-block-warning-code-bg: var(--vp-c-bg-soft);--vp-custom-block-danger-border: var(--vp-c-red);--vp-custom-block-danger-text: var(--vp-c-red);--vp-custom-block-danger-bg: var(--vp-c-bg-soft-up);--vp-custom-block-danger-code-bg: var(--vp-c-bg-soft);--vp-custom-block-details-border: var(--vp-custom-block-info-border);--vp-custom-block-details-text: var(--vp-custom-block-info-text);--vp-custom-block-details-bg: var(--vp-custom-block-info-bg);--vp-custom-block-details-code-bg: var(--vp-custom-block-details-bg)}:root{--vp-input-border-color: var(--vp-c-border);--vp-input-bg-color: var(--vp-c-bg-alt);--vp-input-hover-border-color: var(--vp-c-gray);--vp-input-switch-bg-color: var(--vp-c-mute)}:root{--vp-nav-height: 64px;--vp-nav-bg-color: var(--vp-c-bg);--vp-nav-screen-bg-color: var(--vp-c-bg)}:root{--vp-local-nav-bg-color: var(--vp-c-bg)}:root{--vp-sidebar-width: 272px;--vp-sidebar-bg-color: var(--vp-c-bg-alt)}:root{--vp-backdrop-bg-color: rgba(0, 0, 0, .6)}:root{--vp-home-hero-name-color: var(--vp-c-brand);--vp-home-hero-name-background: transparent;--vp-home-hero-image-background-image: none;--vp-home-hero-image-filter: none}:root{--vp-badge-info-border: var(--vp-c-border);--vp-badge-info-text: var(--vp-c-text-2);--vp-badge-info-bg: var(--vp-c-bg-soft-up);--vp-badge-tip-border: var(--vp-c-green-dark);--vp-badge-tip-text: var(--vp-c-green);--vp-badge-tip-bg: var(--vp-c-green-dimm-1);--vp-badge-warning-border: var(--vp-c-yellow-dark);--vp-badge-warning-text: var(--vp-c-yellow);--vp-badge-warning-bg: var(--vp-c-yellow-dimm-1);--vp-badge-danger-border: var(--vp-c-red-dark);--vp-badge-danger-text: var(--vp-c-red);--vp-badge-danger-bg: var(--vp-c-red-dimm-1)}:root{--vp-carbon-ads-text-color: var(--vp-c-text-1);--vp-carbon-ads-poweredby-color: var(--vp-c-text-2);--vp-carbon-ads-bg-color: var(--vp-c-bg-soft);--vp-carbon-ads-hover-text-color: var(--vp-c-brand);--vp-carbon-ads-hover-poweredby-color: var(--vp-c-text-1)}:root{--vp-local-search-bg: var(--vp-c-bg);--vp-local-search-result-bg: var(--vp-c-bg);--vp-local-search-result-border: var(--vp-c-divider);--vp-local-search-result-selected-bg: var(--vp-c-bg);--vp-local-search-result-selected-border: var(--vp-c-brand);--vp-local-search-highlight-bg: var(--vp-c-green-lighter);--vp-local-search-highlight-text: var(--vp-c-black)}*,:before,:after{box-sizing:border-box}html{line-height:1.4;font-size:16px;-webkit-text-size-adjust:100%}html.dark{color-scheme:dark}body{margin:0;width:100%;min-width:320px;min-height:100vh;line-height:24px;font-family:var(--vp-font-family-base);font-size:16px;font-weight:400;color:var(--vp-c-text-1);background-color:var(--vp-c-bg);direction:ltr;font-synthesis:style;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}h1,h2,h3,h4,h5,h6{margin:0;line-height:24px;font-size:16px;font-weight:400}p{margin:0}strong,b{font-weight:600}a,area,button,[role=button],input,label,select,summary,textarea{touch-action:manipulation}a{color:inherit;text-decoration:inherit}ol,ul{list-style:none;margin:0;padding:0}blockquote{margin:0}pre,code,kbd,samp{font-family:var(--vp-font-family-mono)}img,svg,video,canvas,audio,iframe,embed,object{display:block}figure{margin:0}img,video{max-width:100%;height:auto}button,input,optgroup,select,textarea{border:0;padding:0;line-height:inherit;color:inherit}button{padding:0;font-family:inherit;background-color:transparent;background-image:none}button:enabled,[role=button]:enabled{cursor:pointer}button:focus,button:focus-visible{outline:1px dotted;outline:4px auto -webkit-focus-ring-color}button:focus:not(:focus-visible){outline:none!important}input:focus,textarea:focus,select:focus{outline:none}table{border-collapse:collapse}input{background-color:transparent}input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:var(--vp-c-text-3)}input::-ms-input-placeholder,textarea::-ms-input-placeholder{color:var(--vp-c-text-3)}input::placeholder,textarea::placeholder{color:var(--vp-c-text-3)}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}textarea{resize:vertical}select{-webkit-appearance:none}fieldset{margin:0;padding:0}h1,h2,h3,h4,h5,h6,li,p{overflow-wrap:break-word}vite-error-overlay{z-index:9999}.visually-hidden{position:absolute;width:1px;height:1px;white-space:nowrap;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden}.custom-block{border:1px solid transparent;border-radius:8px;padding:16px 16px 8px;line-height:24px;font-size:var(--vp-custom-block-font-size);color:var(--vp-c-text-2)}.custom-block.info{border-color:var(--vp-custom-block-info-border);color:var(--vp-custom-block-info-text);background-color:var(--vp-custom-block-info-bg)}.custom-block.custom-block th,.custom-block.custom-block blockquote>p{font-size:var(--vp-custom-block-font-size);color:inherit}.custom-block.info code{background-color:var(--vp-custom-block-info-code-bg)}.custom-block.tip{border-color:var(--vp-custom-block-tip-border);color:var(--vp-custom-block-tip-text);background-color:var(--vp-custom-block-tip-bg)}.custom-block.tip code{background-color:var(--vp-custom-block-tip-code-bg)}.custom-block.warning{border-color:var(--vp-custom-block-warning-border);color:var(--vp-custom-block-warning-text);background-color:var(--vp-custom-block-warning-bg)}.custom-block.warning code{background-color:var(--vp-custom-block-warning-code-bg)}.custom-block.danger{border-color:var(--vp-custom-block-danger-border);color:var(--vp-custom-block-danger-text);background-color:var(--vp-custom-block-danger-bg)}.custom-block.danger code{background-color:var(--vp-custom-block-danger-code-bg)}.custom-block.details{border-color:var(--vp-custom-block-details-border);color:var(--vp-custom-block-details-text);background-color:var(--vp-custom-block-details-bg)}.custom-block.details code{background-color:var(--vp-custom-block-details-code-bg)}.custom-block-title{font-weight:600}.custom-block p+p{margin:8px 0}.custom-block.details summary{margin:0 0 8px;font-weight:700;cursor:pointer}.custom-block.details summary+p{margin:8px 0}.custom-block a{color:inherit;font-weight:600}.custom-block a:hover{text-decoration:underline}.custom-block code{font-size:var(--vp-custom-block-code-font-size)}.dark .vp-code-light{display:none}html:not(.dark) .vp-code-dark{display:none}.vp-code-group{margin-top:16px}.vp-code-group .tabs{position:relative;display:flex;margin-right:-24px;margin-left:-24px;padding:0 12px;background-color:var(--vp-code-tab-bg);overflow-x:auto;overflow-y:hidden}.vp-code-group .tabs:after{position:absolute;right:0;bottom:0;left:0;height:1px;background-color:var(--vp-code-tab-divider);content:""}@media (min-width: 640px){.vp-code-group .tabs{margin-right:0;margin-left:0;border-radius:8px 8px 0 0}}.vp-code-group .tabs input{position:absolute;opacity:0;pointer-events:none}.vp-code-group .tabs label{position:relative;display:inline-block;border-bottom:1px solid transparent;padding:0 12px;line-height:48px;font-size:14px;font-weight:500;color:var(--vp-code-tab-text-color);white-space:nowrap;cursor:pointer;transition:color .25s}.vp-code-group .tabs label:after{position:absolute;right:8px;bottom:-1px;left:8px;z-index:10;height:1px;content:"";background-color:transparent;transition:background-color .25s}.vp-code-group label:hover{color:var(--vp-code-tab-hover-text-color)}.vp-code-group input:checked+label{color:var(--vp-code-tab-active-text-color)}.vp-code-group input:checked+label:after{background-color:var(--vp-code-tab-active-bar-color)}.vp-code-group div[class*=language-]{display:none;margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important}.vp-code-group div[class*=language-].active{display:block}.vp-doc h1,.vp-doc h2,.vp-doc h3,.vp-doc h4,.vp-doc h5,.vp-doc h6{position:relative;font-weight:600;outline:none}.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:28px}.vp-doc h2{margin:48px 0 16px;border-top:1px solid var(--vp-c-divider);padding-top:24px;letter-spacing:-.02em;line-height:32px;font-size:24px}.vp-doc h3{margin:32px 0 0;letter-spacing:-.01em;line-height:28px;font-size:20px}.vp-doc .header-anchor{float:left;margin-left:-.87em;padding-right:.23em;font-weight:500;user-select:none;opacity:0;transition:color .25s,opacity .25s}.vp-doc .header-anchor:before{content:var(--vp-header-anchor-symbol)}.vp-doc h1:hover .header-anchor,.vp-doc h1 .header-anchor:focus,.vp-doc h2:hover .header-anchor,.vp-doc h2 .header-anchor:focus,.vp-doc h3:hover .header-anchor,.vp-doc h3 .header-anchor:focus,.vp-doc h4:hover .header-anchor,.vp-doc h4 .header-anchor:focus,.vp-doc h5:hover .header-anchor,.vp-doc h5 .header-anchor:focus,.vp-doc h6:hover .header-anchor,.vp-doc h6 .header-anchor:focus{opacity:1}@media (min-width: 768px){.vp-doc h1{letter-spacing:-.02em;line-height:40px;font-size:32px}}.vp-doc p,.vp-doc summary{margin:16px 0}.vp-doc p{line-height:28px}.vp-doc blockquote{margin:16px 0;border-left:2px solid var(--vp-c-divider);padding-left:16px;transition:border-color .5s}.vp-doc blockquote>p{margin:0;font-size:16px;color:var(--vp-c-text-2);transition:color .5s}.vp-doc a{font-weight:500;color:var(--vp-c-brand);text-decoration-style:dotted;transition:color .25s}.vp-doc a:hover{text-decoration:underline}.vp-doc strong{font-weight:600}.vp-doc ul,.vp-doc ol{padding-left:1.25rem;margin:16px 0}.vp-doc ul{list-style:disc}.vp-doc ol{list-style:decimal}.vp-doc li+li{margin-top:8px}.vp-doc li>ol,.vp-doc li>ul{margin:8px 0 0}.vp-doc table{display:block;border-collapse:collapse;margin:20px 0;overflow-x:auto}.vp-doc tr{border-top:1px solid var(--vp-c-divider);transition:background-color .5s}.vp-doc tr:nth-child(2n){background-color:var(--vp-c-bg-soft)}.vp-doc th,.vp-doc td{border:1px solid var(--vp-c-divider);padding:8px 16px}.vp-doc th{text-align:left;font-size:14px;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-doc td{font-size:14px}.vp-doc hr{margin:16px 0;border:none;border-top:1px solid var(--vp-c-divider)}.vp-doc .custom-block{margin:16px 0}.vp-doc .custom-block p{margin:8px 0;line-height:24px}.vp-doc .custom-block p:first-child{margin:0}.vp-doc .custom-block a{color:inherit;font-weight:600}.vp-doc .custom-block a:hover{text-decoration:underline}.vp-doc .custom-block code{font-size:var(--vp-custom-block-code-font-size);font-weight:700;color:inherit}.vp-doc .custom-block div[class*=language-]{margin:8px 0}.vp-doc .custom-block div[class*=language-] code{font-weight:400;background-color:transparent}.vp-doc :not(pre,h1,h2,h3,h4,h5,h6)>code{font-size:var(--vp-code-font-size)}.vp-doc :not(pre)>code{border-radius:4px;padding:3px 6px;color:var(--vp-c-text-code);background-color:var(--vp-c-mute);transition:color .5s,background-color .5s}.vp-doc h1>code,.vp-doc h2>code,.vp-doc h3>code{font-size:.9em}.vp-doc a>code{color:var(--vp-c-brand);transition:color .25s}.vp-doc a:hover>code{color:var(--vp-c-brand-dark)}.vp-doc div[class*=language-]{position:relative;margin:16px -24px;background-color:var(--vp-code-block-bg);overflow-x:auto;transition:background-color .5s}@media (min-width: 640px){.vp-doc div[class*=language-]{border-radius:8px;margin:16px 0}}@media (max-width: 639px){.vp-doc li div[class*=language-]{border-radius:8px 0 0 8px}}.vp-doc div[class*=language-]+div[class*=language-],.vp-doc div[class$=-api]+div[class*=language-],.vp-doc div[class*=language-]+div[class$=-api]>div[class*=language-]{margin-top:-8px}.vp-doc [class*=language-] pre,.vp-doc [class*=language-] code{direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}.vp-doc [class*=language-] pre{position:relative;z-index:1;margin:0;padding:20px 0;background:transparent;overflow-x:auto}.vp-doc [class*=language-] code{display:block;padding:0 24px;width:fit-content;min-width:100%;line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-block-color);transition:color .5s}.vp-doc [class*=language-] code .highlighted{background-color:var(--vp-code-line-highlight-color);transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .highlighted.error{background-color:var(--vp-code-line-error-color)}.vp-doc [class*=language-] code .highlighted.warning{background-color:var(--vp-code-line-warning-color)}.vp-doc [class*=language-] code .diff{transition:background-color .5s;margin:0 -24px;padding:0 24px;width:calc(100% + 48px);display:inline-block}.vp-doc [class*=language-] code .diff:before{position:absolute;left:10px}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){filter:blur(.095rem);opacity:.4;transition:filter .35s,opacity .35s}.vp-doc [class*=language-] .has-focused-lines .line:not(.has-focus){opacity:.7;transition:filter .35s,opacity .35s}.vp-doc [class*=language-]:hover .has-focused-lines .line:not(.has-focus){filter:blur(0);opacity:1}.vp-doc [class*=language-] code .diff.remove{background-color:var(--vp-code-line-diff-remove-color);opacity:.7}.vp-doc [class*=language-] code .diff.remove:before{content:"-";color:var(--vp-code-line-diff-remove-symbol-color)}.vp-doc [class*=language-] code .diff.add{background-color:var(--vp-code-line-diff-add-color)}.vp-doc [class*=language-] code .diff.add:before{content:"+";color:var(--vp-code-line-diff-add-symbol-color)}.vp-doc div[class*=language-].line-numbers-mode{padding-left:32px}.vp-doc .line-numbers-wrapper{position:absolute;top:0;bottom:0;left:0;z-index:3;border-right:1px solid var(--vp-code-block-divider-color);padding-top:20px;width:32px;text-align:center;font-family:var(--vp-font-family-mono);line-height:var(--vp-code-line-height);font-size:var(--vp-code-font-size);color:var(--vp-code-line-number-color);transition:border-color .5s,color .5s}.vp-doc [class*=language-]>button.copy{direction:ltr;position:absolute;top:12px;right:12px;z-index:3;border:1px solid var(--vp-code-copy-code-border-color);border-radius:4px;width:40px;height:40px;background-color:var(--vp-code-copy-code-bg);opacity:0;cursor:pointer;background-image:var(--vp-icon-copy);background-position:50%;background-size:20px;background-repeat:no-repeat;transition:border-color .25s,background-color .25s,opacity .25s}.vp-doc [class*=language-]:hover>button.copy,.vp-doc [class*=language-]>button.copy:focus{opacity:1}.vp-doc [class*=language-]>button.copy:hover,.vp-doc [class*=language-]>button.copy.copied{border-color:var(--vp-code-copy-code-hover-border-color);background-color:var(--vp-code-copy-code-hover-bg)}.vp-doc [class*=language-]>button.copy.copied,.vp-doc [class*=language-]>button.copy:hover.copied{border-radius:0 4px 4px 0;background-color:var(--vp-code-copy-code-hover-bg);background-image:var(--vp-icon-copied)}.vp-doc [class*=language-]>button.copy.copied:before,.vp-doc [class*=language-]>button.copy:hover.copied:before{position:relative;top:-1px;left:-65px;display:flex;justify-content:center;align-items:center;border:1px solid var(--vp-code-copy-code-hover-border-color);border-right:0;border-radius:4px 0 0 4px;width:64px;height:40px;text-align:center;font-size:12px;font-weight:500;color:var(--vp-code-copy-code-active-text);background-color:var(--vp-code-copy-code-hover-bg);white-space:nowrap;content:"Copied"}.vp-doc [class*=language-]>span.lang{position:absolute;top:2px;right:8px;z-index:2;font-size:12px;font-weight:500;color:var(--vp-c-code-dimm);transition:color .4s,opacity .4s}.vp-doc [class*=language-]:hover>button.copy+span.lang,.vp-doc [class*=language-]>button.copy:focus+span.lang{opacity:0}.vp-doc .VPTeamMembers{margin-top:24px}.vp-doc .VPTeamMembers.small.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-doc .VPTeamMembers.small.count-2 .container,.vp-doc .VPTeamMembers.small.count-3 .container{max-width:100%!important}.vp-doc .VPTeamMembers.medium.count-1 .container{margin:0!important;max-width:calc((100% - 24px)/2)!important}.vp-sponsor{border-radius:16px;overflow:hidden}.vp-sponsor.aside{border-radius:12px}.vp-sponsor-section+.vp-sponsor-section{margin-top:4px}.vp-sponsor-tier{margin-bottom:4px;text-align:center;letter-spacing:1px;line-height:24px;width:100%;font-weight:600;color:var(--vp-c-text-2);background-color:var(--vp-c-bg-soft)}.vp-sponsor.normal .vp-sponsor-tier{padding:13px 0 11px;font-size:14px}.vp-sponsor.aside .vp-sponsor-tier{padding:9px 0 7px;font-size:12px}.vp-sponsor-grid+.vp-sponsor-tier{margin-top:4px}.vp-sponsor-grid{display:flex;flex-wrap:wrap;gap:4px}.vp-sponsor-grid.xmini .vp-sponsor-grid-link{height:64px}.vp-sponsor-grid.xmini .vp-sponsor-grid-image{max-width:64px;max-height:22px}.vp-sponsor-grid.mini .vp-sponsor-grid-link{height:72px}.vp-sponsor-grid.mini .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.small .vp-sponsor-grid-link{height:96px}.vp-sponsor-grid.small .vp-sponsor-grid-image{max-width:96px;max-height:24px}.vp-sponsor-grid.medium .vp-sponsor-grid-link{height:112px}.vp-sponsor-grid.medium .vp-sponsor-grid-image{max-width:120px;max-height:36px}.vp-sponsor-grid.big .vp-sponsor-grid-link{height:184px}.vp-sponsor-grid.big .vp-sponsor-grid-image{max-width:192px;max-height:56px}.vp-sponsor-grid[data-vp-grid="2"] .vp-sponsor-grid-item{width:calc((100% - 4px)/2)}.vp-sponsor-grid[data-vp-grid="3"] .vp-sponsor-grid-item{width:calc((100% - 4px * 2) / 3)}.vp-sponsor-grid[data-vp-grid="4"] .vp-sponsor-grid-item{width:calc((100% - 12px)/4)}.vp-sponsor-grid[data-vp-grid="5"] .vp-sponsor-grid-item{width:calc((100% - 16px)/5)}.vp-sponsor-grid[data-vp-grid="6"] .vp-sponsor-grid-item{width:calc((100% - 4px * 5) / 6)}.vp-sponsor-grid-item{flex-shrink:0;width:100%;background-color:var(--vp-c-bg-soft);transition:background-color .25s}.vp-sponsor-grid-item:hover{background-color:var(--vp-c-bg-soft-down)}.vp-sponsor-grid-item:hover .vp-sponsor-grid-image{filter:grayscale(0) invert(0)}.vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.dark .vp-sponsor-grid-item:hover{background-color:var(--vp-c-white)}.dark .vp-sponsor-grid-item.empty:hover{background-color:var(--vp-c-bg-soft)}.vp-sponsor-grid-link{display:flex}.vp-sponsor-grid-box{display:flex;justify-content:center;align-items:center;width:100%}.vp-sponsor-grid-image{max-width:100%;filter:grayscale(1);transition:filter .25s}.dark .vp-sponsor-grid-image{filter:grayscale(1) invert(1)}.VPBadge[data-v-350d3852]{display:inline-block;margin-left:2px;border:1px solid transparent;border-radius:10px;padding:0 8px;line-height:18px;font-size:12px;font-weight:600;transform:translateY(-2px)}h1 .VPBadge[data-v-350d3852],h2 .VPBadge[data-v-350d3852],h3 .VPBadge[data-v-350d3852],h4 .VPBadge[data-v-350d3852],h5 .VPBadge[data-v-350d3852],h6 .VPBadge[data-v-350d3852]{vertical-align:top}h2 .VPBadge[data-v-350d3852]{border-radius:11px;line-height:20px}.VPBadge.info[data-v-350d3852]{border-color:var(--vp-badge-info-border);color:var(--vp-badge-info-text);background-color:var(--vp-badge-info-bg)}.VPBadge.tip[data-v-350d3852]{border-color:var(--vp-badge-tip-border);color:var(--vp-badge-tip-text);background-color:var(--vp-badge-tip-bg)}.VPBadge.warning[data-v-350d3852]{border-color:var(--vp-badge-warning-border);color:var(--vp-badge-warning-text);background-color:var(--vp-badge-warning-bg)}.VPBadge.danger[data-v-350d3852]{border-color:var(--vp-badge-danger-border);color:var(--vp-badge-danger-text);background-color:var(--vp-badge-danger-bg)}.VPSkipLink[data-v-c8616af1]{top:8px;left:8px;padding:8px 16px;z-index:999;border-radius:8px;font-size:12px;font-weight:700;text-decoration:none;color:var(--vp-c-brand);box-shadow:var(--vp-shadow-3);background-color:var(--vp-c-bg)}.VPSkipLink[data-v-c8616af1]:focus{height:auto;width:auto;clip:auto;clip-path:none}.dark .VPSkipLink[data-v-c8616af1]{color:var(--vp-c-green)}@media (min-width: 1280px){.VPSkipLink[data-v-c8616af1]{top:14px;left:16px}}.VPBackdrop[data-v-c79a1216]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--vp-z-index-backdrop);background:var(--vp-backdrop-bg-color);transition:opacity .5s}.VPBackdrop.fade-enter-from[data-v-c79a1216],.VPBackdrop.fade-leave-to[data-v-c79a1216]{opacity:0}.VPBackdrop.fade-leave-active[data-v-c79a1216]{transition-duration:.25s}@media (min-width: 1280px){.VPBackdrop[data-v-c79a1216]{display:none}}html:not(.dark) .VPImage.dark[data-v-6db2186b]{display:none}.dark .VPImage.light[data-v-6db2186b]{display:none}.title[data-v-4d981103]{display:flex;align-items:center;border-bottom:1px solid transparent;width:100%;height:var(--vp-nav-height);font-size:16px;font-weight:600;color:var(--vp-c-text-1);transition:opacity .25s}@media (min-width: 960px){.title[data-v-4d981103]{flex-shrink:0}.VPNavBarTitle.has-sidebar .title[data-v-4d981103]{border-bottom-color:var(--vp-c-divider)}}[data-v-4d981103] .logo{margin-right:8px;height:24px}/*! @docsearch/css 3.4.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */:root{--docsearch-primary-color:#5468ff;--docsearch-text-color:#1c1e21;--docsearch-spacing:12px;--docsearch-icon-stroke-width:1.4;--docsearch-highlight-color:var(--docsearch-primary-color);--docsearch-muted-color:#969faf;--docsearch-container-background:rgba(101,108,133,.8);--docsearch-logo-color:#5468ff;--docsearch-modal-width:560px;--docsearch-modal-height:600px;--docsearch-modal-background:#f5f6f7;--docsearch-modal-shadow:inset 1px 1px 0 0 hsla(0,0%,100%,.5),0 3px 8px 0 #555a64;--docsearch-searchbox-height:56px;--docsearch-searchbox-background:#ebedf0;--docsearch-searchbox-focus-background:#fff;--docsearch-searchbox-shadow:inset 0 0 0 2px var(--docsearch-primary-color);--docsearch-hit-height:56px;--docsearch-hit-color:#444950;--docsearch-hit-active-color:#fff;--docsearch-hit-background:#fff;--docsearch-hit-shadow:0 1px 3px 0 #d4d9e1;--docsearch-key-gradient:linear-gradient(-225deg,#d5dbe4,#f8f8f8);--docsearch-key-shadow:inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,.4);--docsearch-footer-height:44px;--docsearch-footer-background:#fff;--docsearch-footer-shadow:0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,.12)}html[data-theme=dark]{--docsearch-text-color:#f5f6f7;--docsearch-container-background:rgba(9,10,17,.8);--docsearch-modal-background:#15172a;--docsearch-modal-shadow:inset 1px 1px 0 0 #2c2e40,0 3px 8px 0 #000309;--docsearch-searchbox-background:#090a11;--docsearch-searchbox-focus-background:#000;--docsearch-hit-color:#bec3c9;--docsearch-hit-shadow:none;--docsearch-hit-background:#090a11;--docsearch-key-gradient:linear-gradient(-26.5deg,#565872,#31355b);--docsearch-key-shadow:inset 0 -2px 0 0 #282d55,inset 0 0 1px 1px #51577d,0 2px 2px 0 rgba(3,4,9,.3);--docsearch-footer-background:#1e2136;--docsearch-footer-shadow:inset 0 1px 0 0 rgba(73,76,106,.5),0 -4px 8px 0 rgba(0,0,0,.2);--docsearch-logo-color:#fff;--docsearch-muted-color:#7f8497}.DocSearch-Button{align-items:center;background:var(--docsearch-searchbox-background);border:0;border-radius:40px;color:var(--docsearch-muted-color);cursor:pointer;display:flex;font-weight:500;height:36px;justify-content:space-between;margin:0 0 0 16px;padding:0 8px;user-select:none}.DocSearch-Button:active,.DocSearch-Button:focus,.DocSearch-Button:hover{background:var(--docsearch-searchbox-focus-background);box-shadow:var(--docsearch-searchbox-shadow);color:var(--docsearch-text-color);outline:none}.DocSearch-Button-Container{align-items:center;display:flex}.DocSearch-Search-Icon{stroke-width:1.6}.DocSearch-Button .DocSearch-Search-Icon{color:var(--docsearch-text-color)}.DocSearch-Button-Placeholder{font-size:1rem;padding:0 12px 0 6px}.DocSearch-Button-Keys{display:flex;min-width:calc(40px + .8em)}.DocSearch-Button-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:3px;box-shadow:var(--docsearch-key-shadow);color:var(--docsearch-muted-color);display:flex;height:18px;justify-content:center;margin-right:.4em;position:relative;padding:0 0 2px;border:0;top:-1px;width:20px}@media (max-width:768px){.DocSearch-Button-Keys,.DocSearch-Button-Placeholder{display:none}}.DocSearch--active{overflow:hidden!important}.DocSearch-Container,.DocSearch-Container *{box-sizing:border-box}.DocSearch-Container{background-color:var(--docsearch-container-background);height:100vh;left:0;position:fixed;top:0;width:100vw;z-index:200}.DocSearch-Container a{text-decoration:none}.DocSearch-Link{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;font:inherit;margin:0;padding:0}.DocSearch-Modal{background:var(--docsearch-modal-background);border-radius:6px;box-shadow:var(--docsearch-modal-shadow);flex-direction:column;margin:60px auto auto;max-width:var(--docsearch-modal-width);position:relative}.DocSearch-SearchBar{display:flex;padding:var(--docsearch-spacing) var(--docsearch-spacing) 0}.DocSearch-Form{align-items:center;background:var(--docsearch-searchbox-focus-background);border-radius:4px;box-shadow:var(--docsearch-searchbox-shadow);display:flex;height:var(--docsearch-searchbox-height);margin:0;padding:0 var(--docsearch-spacing);position:relative;width:100%}.DocSearch-Input{appearance:none;background:transparent;border:0;color:var(--docsearch-text-color);flex:1;font:inherit;font-size:1.2em;height:100%;outline:none;padding:0 0 0 8px;width:80%}.DocSearch-Input::placeholder{color:var(--docsearch-muted-color);opacity:1}.DocSearch-Input::-webkit-search-cancel-button,.DocSearch-Input::-webkit-search-decoration,.DocSearch-Input::-webkit-search-results-button,.DocSearch-Input::-webkit-search-results-decoration{display:none}.DocSearch-LoadingIndicator,.DocSearch-MagnifierLabel,.DocSearch-Reset{margin:0;padding:0}.DocSearch-MagnifierLabel,.DocSearch-Reset{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,.DocSearch-LoadingIndicator{display:none}.DocSearch-Container--Stalled .DocSearch-LoadingIndicator{align-items:center;color:var(--docsearch-highlight-color);display:flex;justify-content:center}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Reset{animation:none;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;right:0;stroke-width:var(--docsearch-icon-stroke-width)}}.DocSearch-Reset{animation:fade-in .1s ease-in forwards;appearance:none;background:none;border:0;border-radius:50%;color:var(--docsearch-icon-color);cursor:pointer;padding:2px;right:0;stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Reset[hidden]{display:none}.DocSearch-Reset:hover{color:var(--docsearch-highlight-color)}.DocSearch-LoadingIndicator svg,.DocSearch-MagnifierLabel svg{height:24px;width:24px}.DocSearch-Cancel{display:none}.DocSearch-Dropdown{max-height:calc(var(--docsearch-modal-height) - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height));min-height:var(--docsearch-spacing);overflow-y:auto;overflow-y:overlay;padding:0 var(--docsearch-spacing);scrollbar-color:var(--docsearch-muted-color) var(--docsearch-modal-background);scrollbar-width:thin}.DocSearch-Dropdown::-webkit-scrollbar{width:12px}.DocSearch-Dropdown::-webkit-scrollbar-track{background:transparent}.DocSearch-Dropdown::-webkit-scrollbar-thumb{background-color:var(--docsearch-muted-color);border:3px solid var(--docsearch-modal-background);border-radius:20px}.DocSearch-Dropdown ul{list-style:none;margin:0;padding:0}.DocSearch-Label{font-size:.75em;line-height:1.6em}.DocSearch-Help,.DocSearch-Label{color:var(--docsearch-muted-color)}.DocSearch-Help{font-size:.9em;margin:0;user-select:none}.DocSearch-Title{font-size:1.2em}.DocSearch-Logo a{display:flex}.DocSearch-Logo svg{color:var(--docsearch-logo-color);margin-left:8px}.DocSearch-Hits:last-of-type{margin-bottom:24px}.DocSearch-Hits mark{background:none;color:var(--docsearch-highlight-color)}.DocSearch-HitsFooter{color:var(--docsearch-muted-color);display:flex;font-size:.85em;justify-content:center;margin-bottom:var(--docsearch-spacing);padding:var(--docsearch-spacing)}.DocSearch-HitsFooter a{border-bottom:1px solid;color:inherit}.DocSearch-Hit{border-radius:4px;display:flex;padding-bottom:4px;position:relative}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--deleting{transition:none}}.DocSearch-Hit--deleting{opacity:0;transition:all .25s linear}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit--favoriting{transition:none}}.DocSearch-Hit--favoriting{transform:scale(0);transform-origin:top center;transition:all .25s linear;transition-delay:.25s}.DocSearch-Hit a{background:var(--docsearch-hit-background);border-radius:4px;box-shadow:var(--docsearch-hit-shadow);display:block;padding-left:var(--docsearch-spacing);width:100%}.DocSearch-Hit-source{background:var(--docsearch-modal-background);color:var(--docsearch-highlight-color);font-size:.85em;font-weight:600;line-height:32px;margin:0 -4px;padding:8px 4px 0;position:sticky;top:0;z-index:10}.DocSearch-Hit-Tree{color:var(--docsearch-muted-color);height:var(--docsearch-hit-height);opacity:.5;stroke-width:var(--docsearch-icon-stroke-width);width:24px}.DocSearch-Hit[aria-selected=true] a{background-color:var(--docsearch-highlight-color)}.DocSearch-Hit[aria-selected=true] mark{text-decoration:underline}.DocSearch-Hit-Container{align-items:center;color:var(--docsearch-hit-color);display:flex;flex-direction:row;height:var(--docsearch-hit-height);padding:0 var(--docsearch-spacing) 0 0}.DocSearch-Hit-icon{height:20px;width:20px}.DocSearch-Hit-action,.DocSearch-Hit-icon{color:var(--docsearch-muted-color);stroke-width:var(--docsearch-icon-stroke-width)}.DocSearch-Hit-action{align-items:center;display:flex;height:22px;width:22px}.DocSearch-Hit-action svg{display:block;height:18px;width:18px}.DocSearch-Hit-action+.DocSearch-Hit-action{margin-left:6px}.DocSearch-Hit-action-button{appearance:none;background:none;border:0;border-radius:50%;color:inherit;cursor:pointer;padding:2px}svg.DocSearch-Hit-Select-Icon{display:none}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Select-Icon{display:block}.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:background-color .1s ease-in}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{transition:none}}.DocSearch-Hit-action-button:focus path,.DocSearch-Hit-action-button:hover path{fill:#fff}.DocSearch-Hit-content-wrapper{display:flex;flex:1 1 auto;flex-direction:column;font-weight:500;justify-content:center;line-height:1.2em;margin:0 8px;overflow-x:hidden;position:relative;text-overflow:ellipsis;white-space:nowrap;width:80%}.DocSearch-Hit-title{font-size:.9em}.DocSearch-Hit-path{color:var(--docsearch-muted-color);font-size:.75em}.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-action,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-icon,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-path,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-text,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-title,.DocSearch-Hit[aria-selected=true] .DocSearch-Hit-Tree,.DocSearch-Hit[aria-selected=true] mark{color:var(--docsearch-hit-active-color)!important}@media screen and (prefers-reduced-motion:reduce){.DocSearch-Hit-action-button:focus,.DocSearch-Hit-action-button:hover{background:rgba(0,0,0,.2);transition:none}}.DocSearch-ErrorScreen,.DocSearch-NoResults,.DocSearch-StartScreen{font-size:.9em;margin:0 auto;padding:36px 0;text-align:center;width:80%}.DocSearch-Screen-Icon{color:var(--docsearch-muted-color);padding-bottom:12px}.DocSearch-NoResults-Prefill-List{display:inline-block;padding-bottom:24px;text-align:left}.DocSearch-NoResults-Prefill-List ul{display:inline-block;padding:8px 0 0}.DocSearch-NoResults-Prefill-List li{list-style-position:inside;list-style-type:"» "}.DocSearch-Prefill{appearance:none;background:none;border:0;border-radius:1em;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;font-size:1em;font-weight:700;padding:0}.DocSearch-Prefill:focus,.DocSearch-Prefill:hover{outline:none;text-decoration:underline}.DocSearch-Footer{align-items:center;background:var(--docsearch-footer-background);border-radius:0 0 8px 8px;box-shadow:var(--docsearch-footer-shadow);display:flex;flex-direction:row-reverse;flex-shrink:0;height:var(--docsearch-footer-height);justify-content:space-between;padding:0 var(--docsearch-spacing);position:relative;user-select:none;width:100%;z-index:300}.DocSearch-Commands{color:var(--docsearch-muted-color);display:flex;list-style:none;margin:0;padding:0}.DocSearch-Commands li{align-items:center;display:flex}.DocSearch-Commands li:not(:last-of-type){margin-right:.8em}.DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}@media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.DocSearch{--docsearch-primary-color: var(--vp-c-brand);--docsearch-highlight-color: var(--docsearch-primary-color);--docsearch-text-color: var(--vp-c-text-1);--docsearch-muted-color: var(--vp-c-text-2);--docsearch-searchbox-shadow: none;--docsearch-searchbox-focus-background: transparent;--docsearch-key-gradient: transparent;--docsearch-key-shadow: none;--docsearch-modal-background: var(--vp-c-bg-soft);--docsearch-footer-background: var(--vp-c-bg)}.dark .DocSearch{--docsearch-modal-shadow: none;--docsearch-footer-shadow: none;--docsearch-logo-color: var(--vp-c-text-2);--docsearch-hit-background: var(--vp-c-bg-soft-mute);--docsearch-hit-color: var(--vp-c-text-2);--docsearch-hit-shadow: none}.DocSearch-Button{display:flex;justify-content:center;align-items:center;margin:0;padding:0;width:48px;height:55px;background:transparent;transition:border-color .25s}.DocSearch-Button:hover{background:transparent}.DocSearch-Button:focus{outline:1px dotted;outline:5px auto -webkit-focus-ring-color}.DocSearch-Button:focus:not(:focus-visible){outline:none!important}@media (min-width: 768px){.DocSearch-Button{justify-content:flex-start;border:1px solid transparent;border-radius:8px;padding:0 10px 0 12px;width:100%;height:40px;background-color:var(--vp-c-bg-alt)}.DocSearch-Button:hover{border-color:var(--vp-c-brand);background:var(--vp-c-bg-alt)}}.DocSearch-Button .DocSearch-Button-Container{display:flex;align-items:center}.DocSearch-Button .DocSearch-Search-Icon{position:relative;width:16px;height:16px;color:var(--vp-c-text-1);fill:currentColor;transition:color .5s}.DocSearch-Button:hover .DocSearch-Search-Icon{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Search-Icon{top:1px;margin-right:8px;width:14px;height:14px;color:var(--vp-c-text-2)}}.DocSearch-Button .DocSearch-Button-Placeholder{display:none;margin-top:2px;padding:0 16px 0 0;font-size:13px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.DocSearch-Button:hover .DocSearch-Button-Placeholder{color:var(--vp-c-text-1)}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Placeholder{display:inline-block}}.DocSearch-Button .DocSearch-Button-Keys{direction:ltr;display:none;min-width:auto}@media (min-width: 768px){.DocSearch-Button .DocSearch-Button-Keys{display:flex;align-items:center}}.DocSearch-Button .DocSearch-Button-Key{display:block;margin:2px 0 0;border:1px solid var(--vp-c-divider);border-right:none;border-radius:4px 0 0 4px;padding-left:6px;min-width:0;width:auto;height:22px;line-height:22px;font-family:var(--vp-font-family-base);font-size:12px;font-weight:500;transition:color .5s,border-color .5s}.DocSearch-Button .DocSearch-Button-Key+.DocSearch-Button-Key{border-right:1px solid var(--vp-c-divider);border-left:none;border-radius:0 4px 4px 0;padding-left:2px;padding-right:6px}.DocSearch-Button .DocSearch-Button-Key:first-child{font-size:1px;letter-spacing:-12px;color:transparent}.DocSearch-Button .DocSearch-Button-Key:first-child:after{content:var(--vp-meta-key);font-size:12px;letter-spacing:normal;color:var(--docsearch-muted-color)}.DocSearch-Button .DocSearch-Button-Key:first-child>*{display:none}.VPNavBarSearch{display:flex;align-items:center}@media (min-width: 768px){.VPNavBarSearch{flex-grow:1;padding-left:24px}}@media (min-width: 960px){.VPNavBarSearch{padding-left:32px}}.dark .DocSearch-Footer{border-top:1px solid var(--vp-c-divider)}.DocSearch-Form{border:1px solid var(--vp-c-brand);background-color:var(--vp-c-white)}.dark .DocSearch-Form{background-color:var(--vp-c-bg-soft-mute)}.DocSearch-Screen-Icon>svg{margin:auto}.icon[data-v-8f4dc553]{display:inline-block;margin-top:-1px;margin-left:4px;width:11px;height:11px;fill:var(--vp-c-text-3);transition:fill .25s;flex-shrink:0}.VPNavBarMenuLink[data-v-5e623618]{display:flex;align-items:center;padding:0 12px;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.VPNavBarMenuLink.active[data-v-5e623618],.VPNavBarMenuLink[data-v-5e623618]:hover{color:var(--vp-c-brand)}.VPMenuGroup+.VPMenuLink[data-v-2f2cfafc]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.link[data-v-2f2cfafc]{display:block;border-radius:6px;padding:0 12px;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);white-space:nowrap;transition:background-color .25s,color .25s}.link[data-v-2f2cfafc]:hover{color:var(--vp-c-brand);background-color:var(--vp-c-bg-elv-mute)}.link.active[data-v-2f2cfafc]{color:var(--vp-c-brand)}.VPMenuGroup[data-v-69e747b5]{margin:12px -12px 0;border-top:1px solid var(--vp-c-divider);padding:12px 12px 0}.VPMenuGroup[data-v-69e747b5]:first-child{margin-top:0;border-top:0;padding-top:0}.VPMenuGroup+.VPMenuGroup[data-v-69e747b5]{margin-top:12px;border-top:1px solid var(--vp-c-divider)}.title[data-v-69e747b5]{padding:0 12px;line-height:32px;font-size:14px;font-weight:600;color:var(--vp-c-text-2);white-space:nowrap;transition:color .25s}.VPMenu[data-v-e7ea1737]{border-radius:12px;padding:12px;min-width:128px;border:1px solid var(--vp-c-divider);background-color:var(--vp-c-bg-elv);box-shadow:var(--vp-shadow-3);transition:background-color .5s;max-height:calc(100vh - var(--vp-nav-height));overflow-y:auto}.VPMenu[data-v-e7ea1737] .group{margin:0 -12px;padding:0 12px 12px}.VPMenu[data-v-e7ea1737] .group+.group{border-top:1px solid var(--vp-c-divider);padding:11px 12px 12px}.VPMenu[data-v-e7ea1737] .group:last-child{padding-bottom:0}.VPMenu[data-v-e7ea1737] .group+.item{border-top:1px solid var(--vp-c-divider);padding:11px 16px 0}.VPMenu[data-v-e7ea1737] .item{padding:0 16px;white-space:nowrap}.VPMenu[data-v-e7ea1737] .label{flex-grow:1;line-height:28px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.VPMenu[data-v-e7ea1737] .action{padding-left:24px}.VPFlyout[data-v-764effdf]{position:relative}.VPFlyout[data-v-764effdf]:hover{color:var(--vp-c-brand);transition:color .25s}.VPFlyout:hover .text[data-v-764effdf]{color:var(--vp-c-text-2)}.VPFlyout:hover .icon[data-v-764effdf]{fill:var(--vp-c-text-2)}.VPFlyout.active .text[data-v-764effdf]{color:var(--vp-c-brand)}.VPFlyout.active:hover .text[data-v-764effdf]{color:var(--vp-c-brand-dark)}.VPFlyout:hover .menu[data-v-764effdf],.button[aria-expanded=true]+.menu[data-v-764effdf]{opacity:1;visibility:visible;transform:translateY(0)}.button[data-v-764effdf]{display:flex;align-items:center;padding:0 12px;height:var(--vp-nav-height);color:var(--vp-c-text-1);transition:color .5s}.text[data-v-764effdf]{display:flex;align-items:center;line-height:var(--vp-nav-height);font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.option-icon[data-v-764effdf]{margin-right:0;width:16px;height:16px;fill:currentColor}.text-icon[data-v-764effdf]{margin-left:4px;width:14px;height:14px;fill:currentColor}.icon[data-v-764effdf]{width:20px;height:20px;fill:currentColor;transition:fill .25s}.menu[data-v-764effdf]{position:absolute;top:calc(var(--vp-nav-height) / 2 + 20px);right:0;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s,transform .25s}.VPNavBarMenu[data-v-7f418b0f]{display:none}@media (min-width: 768px){.VPNavBarMenu[data-v-7f418b0f]{display:flex}}.VPNavBarTranslations[data-v-74abcbb9]{display:none}@media (min-width: 1280px){.VPNavBarTranslations[data-v-74abcbb9]{display:flex;align-items:center}}.title[data-v-74abcbb9]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.VPSwitch[data-v-f3c41672]{position:relative;border-radius:11px;display:block;width:40px;height:22px;flex-shrink:0;border:1px solid var(--vp-input-border-color);background-color:var(--vp-input-switch-bg-color);transition:border-color .25s}.VPSwitch[data-v-f3c41672]:hover{border-color:var(--vp-input-hover-border-color)}.check[data-v-f3c41672]{position:absolute;top:1px;left:1px;width:18px;height:18px;border-radius:50%;background-color:var(--vp-c-neutral-inverse);box-shadow:var(--vp-shadow-1);transition:transform .25s}.icon[data-v-f3c41672]{position:relative;display:block;width:18px;height:18px;border-radius:50%;overflow:hidden}.icon[data-v-f3c41672] svg{position:absolute;top:3px;left:3px;width:12px;height:12px;fill:var(--vp-c-text-2)}.dark .icon[data-v-f3c41672] svg{fill:var(--vp-c-text-1);transition:opacity .25s}.sun[data-v-87de0873]{opacity:1}.moon[data-v-87de0873],.dark .sun[data-v-87de0873]{opacity:0}.dark .moon[data-v-87de0873]{opacity:1}.dark .VPSwitchAppearance[data-v-87de0873] .check{transform:translate(18px)}.VPNavBarAppearance[data-v-f6a63727]{display:none}@media (min-width: 1280px){.VPNavBarAppearance[data-v-f6a63727]{display:flex;align-items:center}}.VPSocialLink[data-v-c530cc0a]{display:flex;justify-content:center;align-items:center;width:36px;height:36px;color:var(--vp-c-text-2);transition:color .5s}.VPSocialLink[data-v-c530cc0a]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPSocialLink[data-v-c530cc0a]>svg{width:20px;height:20px;fill:currentColor}.VPSocialLinks[data-v-d7a53887]{display:flex;justify-content:center}.VPNavBarSocialLinks[data-v-0394ad82]{display:none}@media (min-width: 1280px){.VPNavBarSocialLinks[data-v-0394ad82]{display:flex;align-items:center}}.VPNavBarExtra[data-v-40855f84]{display:none;margin-right:-12px}@media (min-width: 768px){.VPNavBarExtra[data-v-40855f84]{display:block}}@media (min-width: 1280px){.VPNavBarExtra[data-v-40855f84]{display:none}}.trans-title[data-v-40855f84]{padding:0 24px 0 12px;line-height:32px;font-size:14px;font-weight:700;color:var(--vp-c-text-1)}.item.appearance[data-v-40855f84],.item.social-links[data-v-40855f84]{display:flex;align-items:center;padding:0 12px}.item.appearance[data-v-40855f84]{min-width:176px}.appearance-action[data-v-40855f84]{margin-right:-2px}.social-links-list[data-v-40855f84]{margin:-4px -8px}.VPNavBarHamburger[data-v-e5dd9c1c]{display:flex;justify-content:center;align-items:center;width:48px;height:var(--vp-nav-height)}@media (min-width: 768px){.VPNavBarHamburger[data-v-e5dd9c1c]{display:none}}.container[data-v-e5dd9c1c]{position:relative;width:16px;height:14px;overflow:hidden}.VPNavBarHamburger:hover .top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(4px)}.VPNavBarHamburger:hover .middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(0)}.VPNavBarHamburger:hover .bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(8px)}.VPNavBarHamburger.active .top[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(225deg)}.VPNavBarHamburger.active .middle[data-v-e5dd9c1c]{top:6px;transform:translate(16px)}.VPNavBarHamburger.active .bottom[data-v-e5dd9c1c]{top:6px;transform:translate(0) rotate(135deg)}.VPNavBarHamburger.active:hover .top[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .middle[data-v-e5dd9c1c],.VPNavBarHamburger.active:hover .bottom[data-v-e5dd9c1c]{background-color:var(--vp-c-text-2);transition:top .25s,background-color .25s,transform .25s}.top[data-v-e5dd9c1c],.middle[data-v-e5dd9c1c],.bottom[data-v-e5dd9c1c]{position:absolute;width:16px;height:2px;background-color:var(--vp-c-text-1);transition:top .25s,background-color .5s,transform .25s}.top[data-v-e5dd9c1c]{top:0;left:0;transform:translate(0)}.middle[data-v-e5dd9c1c]{top:6px;left:0;transform:translate(8px)}.bottom[data-v-e5dd9c1c]{top:12px;left:0;transform:translate(4px)}.VPNavBar[data-v-7c10cd25]{position:relative;border-bottom:1px solid transparent;padding:0 8px 0 24px;height:var(--vp-nav-height);transition:border-color .5s,background-color .5s;pointer-events:none;white-space:nowrap}.VPNavBar.has-sidebar[data-v-7c10cd25]{border-bottom-color:var(--vp-c-gutter)}@media (min-width: 768px){.VPNavBar[data-v-7c10cd25]{padding:0 32px}}@media (min-width: 960px){.VPNavBar.has-sidebar[data-v-7c10cd25]{border-bottom-color:transparent;padding:0}.VPNavBar.fill[data-v-7c10cd25]:not(.has-sidebar){border-bottom-color:var(--vp-c-gutter);background-color:var(--vp-nav-bg-color)}}.container[data-v-7c10cd25]{display:flex;justify-content:space-between;margin:0 auto;max-width:calc(var(--vp-layout-max-width) - 64px);height:var(--vp-nav-height);pointer-events:none}.container>.title[data-v-7c10cd25],.container>.content[data-v-7c10cd25]{pointer-events:none}.container[data-v-7c10cd25] *{pointer-events:auto}@media (min-width: 960px){.VPNavBar.has-sidebar .container[data-v-7c10cd25]{max-width:100%}}.title[data-v-7c10cd25]{flex-shrink:0;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .title[data-v-7c10cd25]{position:absolute;top:0;left:0;z-index:2;padding:0 32px;width:var(--vp-sidebar-width);height:var(--vp-nav-height);background-color:transparent}}@media (min-width: 1440px){.VPNavBar.has-sidebar .title[data-v-7c10cd25]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}.content[data-v-7c10cd25]{flex-grow:1}@media (min-width: 960px){.VPNavBar.has-sidebar .content[data-v-7c10cd25]{position:relative;z-index:1;padding-right:32px;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPNavBar.has-sidebar .content[data-v-7c10cd25]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2 + 32px);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.content-body[data-v-7c10cd25]{display:flex;justify-content:flex-end;align-items:center;height:calc(var(--vp-nav-height) - 1px);transition:background-color .5s}@media (min-width: 960px){.VPNavBar.has-sidebar .content-body[data-v-7c10cd25],.VPNavBar.fill .content-body[data-v-7c10cd25]{position:relative;background-color:var(--vp-nav-bg-color)}}@media (max-width: 768px){.content-body[data-v-7c10cd25]{column-gap:.5rem}}.menu+.translations[data-v-7c10cd25]:before,.menu+.appearance[data-v-7c10cd25]:before,.menu+.social-links[data-v-7c10cd25]:before,.translations+.appearance[data-v-7c10cd25]:before,.appearance+.social-links[data-v-7c10cd25]:before{margin-right:8px;margin-left:8px;width:1px;height:24px;background-color:var(--vp-c-divider);content:""}.menu+.appearance[data-v-7c10cd25]:before,.translations+.appearance[data-v-7c10cd25]:before{margin-right:16px}.appearance+.social-links[data-v-7c10cd25]:before{margin-left:16px}.social-links[data-v-7c10cd25]{margin-right:-8px}@media (min-width: 960px){.VPNavBar.has-sidebar .curtain[data-v-7c10cd25]{position:absolute;right:0;bottom:-31px;width:calc(100% - var(--vp-sidebar-width));height:32px}.VPNavBar.has-sidebar .curtain[data-v-7c10cd25]:before{display:block;width:100%;height:32px;background:linear-gradient(var(--vp-c-bg),transparent 70%);content:""}}@media (min-width: 1440px){.VPNavBar.has-sidebar .curtain[data-v-7c10cd25]{width:calc(100% - ((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width)))}}.VPNavScreenMenuLink[data-v-30be0acb]{display:block;border-bottom:1px solid var(--vp-c-divider);padding:12px 0 11px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:border-color .25s,color .25s}.VPNavScreenMenuLink[data-v-30be0acb]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupLink[data-v-6656c42a]{display:block;margin-left:12px;line-height:32px;font-size:14px;font-weight:400;color:var(--vp-c-text-1);transition:color .25s}.VPNavScreenMenuGroupLink[data-v-6656c42a]:hover{color:var(--vp-c-brand)}.VPNavScreenMenuGroupSection[data-v-8133b170]{display:block}.title[data-v-8133b170]{line-height:32px;font-size:13px;font-weight:700;color:var(--vp-c-text-2);transition:color .25s}.VPNavScreenMenuGroup[data-v-338a1689]{border-bottom:1px solid var(--vp-c-divider);height:48px;overflow:hidden;transition:border-color .5s}.VPNavScreenMenuGroup .items[data-v-338a1689]{visibility:hidden}.VPNavScreenMenuGroup.open .items[data-v-338a1689]{visibility:visible}.VPNavScreenMenuGroup.open[data-v-338a1689]{padding-bottom:10px;height:auto}.VPNavScreenMenuGroup.open .button[data-v-338a1689]{padding-bottom:6px;color:var(--vp-c-brand)}.VPNavScreenMenuGroup.open .button-icon[data-v-338a1689]{transform:rotate(45deg)}.button[data-v-338a1689]{display:flex;justify-content:space-between;align-items:center;padding:12px 4px 11px 0;width:100%;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-1);transition:color .25s}.button[data-v-338a1689]:hover{color:var(--vp-c-brand)}.button-icon[data-v-338a1689]{width:14px;height:14px;fill:var(--vp-c-text-2);transition:fill .5s,transform .25s}.group[data-v-338a1689]:first-child{padding-top:0}.group+.group[data-v-338a1689],.group+.item[data-v-338a1689]{padding-top:4px}.VPNavScreenAppearance[data-v-add8f686]{display:flex;justify-content:space-between;align-items:center;border-radius:8px;padding:12px 14px 12px 16px;background-color:var(--vp-c-bg-soft)}.text[data-v-add8f686]{line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.VPNavScreenTranslations[data-v-d72aa483]{height:24px;overflow:hidden}.VPNavScreenTranslations.open[data-v-d72aa483]{height:auto}.title[data-v-d72aa483]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-text-1)}.icon[data-v-d72aa483]{width:16px;height:16px;fill:currentColor}.icon.lang[data-v-d72aa483]{margin-right:8px}.icon.chevron[data-v-d72aa483]{margin-left:4px}.list[data-v-d72aa483]{padding:4px 0 0 24px}.link[data-v-d72aa483]{line-height:32px;font-size:13px;color:var(--vp-c-text-1)}.VPNavScreen[data-v-724636ae]{position:fixed;top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 1px);right:0;bottom:0;left:0;padding:0 32px;width:100%;background-color:var(--vp-nav-screen-bg-color);overflow-y:auto;transition:background-color .5s;pointer-events:auto}.VPNavScreen.fade-enter-active[data-v-724636ae],.VPNavScreen.fade-leave-active[data-v-724636ae]{transition:opacity .25s}.VPNavScreen.fade-enter-active .container[data-v-724636ae],.VPNavScreen.fade-leave-active .container[data-v-724636ae]{transition:transform .25s ease}.VPNavScreen.fade-enter-from[data-v-724636ae],.VPNavScreen.fade-leave-to[data-v-724636ae]{opacity:0}.VPNavScreen.fade-enter-from .container[data-v-724636ae],.VPNavScreen.fade-leave-to .container[data-v-724636ae]{transform:translateY(-8px)}@media (min-width: 768px){.VPNavScreen[data-v-724636ae]{display:none}}.container[data-v-724636ae]{margin:0 auto;padding:24px 0 96px;max-width:288px}.menu+.translations[data-v-724636ae],.menu+.appearance[data-v-724636ae],.translations+.appearance[data-v-724636ae]{margin-top:24px}.menu+.social-links[data-v-724636ae]{margin-top:16px}.appearance+.social-links[data-v-724636ae]{margin-top:16px}.VPNav[data-v-7e5bc4a5]{position:relative;top:var(--vp-layout-top-height, 0px);left:0;z-index:var(--vp-z-index-nav);width:100%;pointer-events:none;transition:background-color .5s}@media (min-width: 960px){.VPNav[data-v-7e5bc4a5]{position:fixed}}.root[data-v-9a431c33]{position:relative;z-index:1}.nested[data-v-9a431c33]{padding-left:13px}.outline-link[data-v-9a431c33]{display:block;line-height:28px;color:var(--vp-c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .5s;font-weight:500}.outline-link[data-v-9a431c33]:hover,.outline-link.active[data-v-9a431c33]{color:var(--vp-c-text-1);transition:color .25s}.outline-link.nested[data-v-9a431c33]{padding-left:13px}.VPLocalNavOutlineDropdown[data-v-079b16a8]{padding:12px 20px 11px}.VPLocalNavOutlineDropdown button[data-v-079b16a8]{display:block;font-size:12px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;position:relative}.VPLocalNavOutlineDropdown button[data-v-079b16a8]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPLocalNavOutlineDropdown button.open[data-v-079b16a8]{color:var(--vp-c-text-1)}.icon[data-v-079b16a8]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-079b16a8] .outline-link{font-size:14px;padding:2px 0}.open>.icon[data-v-079b16a8]{transform:rotate(90deg)}.items[data-v-079b16a8]{position:absolute;left:20px;right:20px;top:64px;background-color:var(--vp-local-nav-bg-color);padding:4px 10px 16px;border:1px solid var(--vp-c-divider);border-radius:8px;max-height:calc(var(--vp-vh, 100vh) - 86px);overflow:hidden auto;box-shadow:var(--vp-shadow-3)}.top-link[data-v-079b16a8]{display:block;color:var(--vp-c-brand);font-size:13px;font-weight:500;padding:6px 0;margin:0 13px 10px;border-bottom:1px solid var(--vp-c-divider)}.flyout-enter-active[data-v-079b16a8]{transition:all .2s ease-out}.flyout-leave-active[data-v-079b16a8]{transition:all .15s ease-in}.flyout-enter-from[data-v-079b16a8],.flyout-leave-to[data-v-079b16a8]{opacity:0;transform:translateY(-16px)}.VPLocalNav[data-v-392e1bf8]{position:sticky;top:0;left:0;z-index:var(--vp-z-index-local-nav);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--vp-c-gutter);padding-top:var(--vp-layout-top-height, 0px);width:100%;background-color:var(--vp-local-nav-bg-color);transition:border-color .5s,background-color .5s}@media (min-width: 960px){.VPLocalNav[data-v-392e1bf8]{display:none}}.menu[data-v-392e1bf8]{display:flex;align-items:center;padding:12px 24px 11px;line-height:24px;font-size:12px;font-weight:500;color:var(--vp-c-text-2);transition:color .5s}.menu[data-v-392e1bf8]:hover{color:var(--vp-c-text-1);transition:color .25s}@media (min-width: 768px){.menu[data-v-392e1bf8]{padding:0 32px}}.menu-icon[data-v-392e1bf8]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPOutlineDropdown[data-v-392e1bf8]{padding:12px 24px 11px}@media (min-width: 768px){.VPOutlineDropdown[data-v-392e1bf8]{padding:12px 32px 11px}}.VPSidebarItem.level-0[data-v-c4656e6d]{padding-bottom:24px}.VPSidebarItem.collapsed.level-0[data-v-c4656e6d]{padding-bottom:10px}.item[data-v-c4656e6d]{position:relative;display:flex;width:100%}.VPSidebarItem.collapsible>.item[data-v-c4656e6d]{cursor:pointer}.indicator[data-v-c4656e6d]{position:absolute;top:6px;bottom:6px;left:-17px;width:1px;transition:background-color .25s}.VPSidebarItem.level-2.is-active>.item>.indicator[data-v-c4656e6d],.VPSidebarItem.level-3.is-active>.item>.indicator[data-v-c4656e6d],.VPSidebarItem.level-4.is-active>.item>.indicator[data-v-c4656e6d],.VPSidebarItem.level-5.is-active>.item>.indicator[data-v-c4656e6d]{background-color:var(--vp-c-brand)}.link[data-v-c4656e6d]{display:flex;align-items:center;flex-grow:1}.text[data-v-c4656e6d]{flex-grow:1;padding:4px 0;line-height:24px;font-size:14px;transition:color .25s}.VPSidebarItem.level-0 .text[data-v-c4656e6d]{font-weight:700;color:var(--vp-c-text-1)}.VPSidebarItem.level-1 .text[data-v-c4656e6d],.VPSidebarItem.level-2 .text[data-v-c4656e6d],.VPSidebarItem.level-3 .text[data-v-c4656e6d],.VPSidebarItem.level-4 .text[data-v-c4656e6d],.VPSidebarItem.level-5 .text[data-v-c4656e6d]{font-weight:500;color:var(--vp-c-text-2)}.VPSidebarItem.level-0.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-1.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-2.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-3.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-4.is-link>.item>.link:hover .text[data-v-c4656e6d],.VPSidebarItem.level-5.is-link>.item>.link:hover .text[data-v-c4656e6d]{color:var(--vp-c-brand)}.VPSidebarItem.level-0.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-1.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-2.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-3.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-4.has-active>.item>.link>.text[data-v-c4656e6d],.VPSidebarItem.level-5.has-active>.item>.link>.text[data-v-c4656e6d]{color:var(--vp-c-text-1)}.VPSidebarItem.level-0.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-1.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-2.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-3.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-4.is-active>.item .link>.text[data-v-c4656e6d],.VPSidebarItem.level-5.is-active>.item .link>.text[data-v-c4656e6d]{color:var(--vp-c-brand)}.caret[data-v-c4656e6d]{display:flex;justify-content:center;align-items:center;margin-right:-7px;width:32px;height:32px;color:var(--vp-c-text-3);cursor:pointer;transition:color .25s}.item:hover .caret[data-v-c4656e6d]{color:var(--vp-c-text-2)}.item:hover .caret[data-v-c4656e6d]:hover{color:var(--vp-c-text-1)}.caret-icon[data-v-c4656e6d]{width:18px;height:18px;fill:currentColor;transform:rotate(90deg);transition:transform .25s}.VPSidebarItem.collapsed .caret-icon[data-v-c4656e6d]{transform:rotate(0)}.VPSidebarItem.level-1 .items[data-v-c4656e6d],.VPSidebarItem.level-2 .items[data-v-c4656e6d],.VPSidebarItem.level-3 .items[data-v-c4656e6d],.VPSidebarItem.level-4 .items[data-v-c4656e6d],.VPSidebarItem.level-5 .items[data-v-c4656e6d]{border-left:1px solid var(--vp-c-divider);padding-left:16px}.VPSidebarItem.collapsed .items[data-v-c4656e6d]{display:none}.VPSidebar[data-v-af16598e]{position:fixed;top:var(--vp-layout-top-height, 0px);bottom:0;left:0;z-index:var(--vp-z-index-sidebar);padding:32px 32px 96px;width:calc(100vw - 64px);max-width:320px;background-color:var(--vp-sidebar-bg-color);opacity:0;box-shadow:var(--vp-c-shadow-3);overflow-x:hidden;overflow-y:auto;transform:translate(-100%);transition:opacity .5s,transform .25s ease;overscroll-behavior:contain}.VPSidebar.open[data-v-af16598e]{opacity:1;visibility:visible;transform:translate(0);transition:opacity .25s,transform .5s cubic-bezier(.19,1,.22,1)}.dark .VPSidebar[data-v-af16598e]{box-shadow:var(--vp-shadow-1)}@media (min-width: 960px){.VPSidebar[data-v-af16598e]{z-index:1;padding-top:var(--vp-nav-height);padding-bottom:128px;width:var(--vp-sidebar-width);max-width:100%;background-color:var(--vp-sidebar-bg-color);opacity:1;visibility:visible;box-shadow:none;transform:translate(0)}}@media (min-width: 1440px){.VPSidebar[data-v-af16598e]{padding-left:max(32px,calc((100% - (var(--vp-layout-max-width) - 64px)) / 2));width:calc((100% - (var(--vp-layout-max-width) - 64px)) / 2 + var(--vp-sidebar-width) - 32px)}}@media (min-width: 960px){.curtain[data-v-af16598e]{position:sticky;top:-64px;left:0;z-index:1;margin-top:calc(var(--vp-nav-height) * -1);margin-right:-32px;margin-left:-32px;height:var(--vp-nav-height);background-color:var(--vp-sidebar-bg-color)}}.nav[data-v-af16598e]{outline:0}.group+.group[data-v-af16598e]{border-top:1px solid var(--vp-c-divider);padding-top:10px}@media (min-width: 960px){.group[data-v-af16598e]{padding-top:10px;width:calc(var(--vp-sidebar-width) - 64px)}}.VPButton[data-v-567ba664]{display:inline-block;border:1px solid transparent;text-align:center;font-weight:600;white-space:nowrap;transition:color .25s,border-color .25s,background-color .25s}.VPButton[data-v-567ba664]:active{transition:color .1s,border-color .1s,background-color .1s}.VPButton.medium[data-v-567ba664]{border-radius:20px;padding:0 20px;line-height:38px;font-size:14px}.VPButton.big[data-v-567ba664]{border-radius:24px;padding:0 24px;line-height:46px;font-size:16px}.VPButton.brand[data-v-567ba664]{border-color:var(--vp-button-brand-border);color:var(--vp-button-brand-text);background-color:var(--vp-button-brand-bg)}.VPButton.brand[data-v-567ba664]:hover{border-color:var(--vp-button-brand-hover-border);color:var(--vp-button-brand-hover-text);background-color:var(--vp-button-brand-hover-bg)}.VPButton.brand[data-v-567ba664]:active{border-color:var(--vp-button-brand-active-border);color:var(--vp-button-brand-active-text);background-color:var(--vp-button-brand-active-bg)}.VPButton.alt[data-v-567ba664]{border-color:var(--vp-button-alt-border);color:var(--vp-button-alt-text);background-color:var(--vp-button-alt-bg)}.VPButton.alt[data-v-567ba664]:hover{border-color:var(--vp-button-alt-hover-border);color:var(--vp-button-alt-hover-text);background-color:var(--vp-button-alt-hover-bg)}.VPButton.alt[data-v-567ba664]:active{border-color:var(--vp-button-alt-active-border);color:var(--vp-button-alt-active-text);background-color:var(--vp-button-alt-active-bg)}.VPButton.sponsor[data-v-567ba664]{border-color:var(--vp-button-sponsor-border);color:var(--vp-button-sponsor-text);background-color:var(--vp-button-sponsor-bg)}.VPButton.sponsor[data-v-567ba664]:hover{border-color:var(--vp-button-sponsor-hover-border);color:var(--vp-button-sponsor-hover-text);background-color:var(--vp-button-sponsor-hover-bg)}.VPButton.sponsor[data-v-567ba664]:active{border-color:var(--vp-button-sponsor-active-border);color:var(--vp-button-sponsor-active-text);background-color:var(--vp-button-sponsor-active-bg)}.VPHero[data-v-fd2650d5]{margin-top:calc((var(--vp-nav-height) + var(--vp-layout-top-height, 0px)) * -1);padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 48px) 24px 48px}@media (min-width: 640px){.VPHero[data-v-fd2650d5]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 48px 64px}}@media (min-width: 960px){.VPHero[data-v-fd2650d5]{padding:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 80px) 64px 64px}}.container[data-v-fd2650d5]{display:flex;flex-direction:column;margin:0 auto;max-width:1152px}@media (min-width: 960px){.container[data-v-fd2650d5]{flex-direction:row}}.main[data-v-fd2650d5]{position:relative;z-index:10;order:2;flex-grow:1;flex-shrink:0}.VPHero.has-image .container[data-v-fd2650d5]{text-align:center}@media (min-width: 960px){.VPHero.has-image .container[data-v-fd2650d5]{text-align:left}}@media (min-width: 960px){.main[data-v-fd2650d5]{order:1;width:calc((100% / 3) * 2)}.VPHero.has-image .main[data-v-fd2650d5]{max-width:592px}}.name[data-v-fd2650d5],.text[data-v-fd2650d5]{max-width:392px;letter-spacing:-.4px;line-height:40px;font-size:32px;font-weight:700;white-space:pre-wrap}.VPHero.has-image .name[data-v-fd2650d5],.VPHero.has-image .text[data-v-fd2650d5]{margin:0 auto}.name[data-v-fd2650d5]{color:var(--vp-home-hero-name-color)}.clip[data-v-fd2650d5]{background:var(--vp-home-hero-name-background);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:var(--vp-home-hero-name-color)}@media (min-width: 640px){.name[data-v-fd2650d5],.text[data-v-fd2650d5]{max-width:576px;line-height:56px;font-size:48px}}@media (min-width: 960px){.name[data-v-fd2650d5],.text[data-v-fd2650d5]{line-height:64px;font-size:56px}.VPHero.has-image .name[data-v-fd2650d5],.VPHero.has-image .text[data-v-fd2650d5]{margin:0}}.tagline[data-v-fd2650d5]{padding-top:8px;max-width:392px;line-height:28px;font-size:18px;font-weight:500;white-space:pre-wrap;color:var(--vp-c-text-2)}.VPHero.has-image .tagline[data-v-fd2650d5]{margin:0 auto}@media (min-width: 640px){.tagline[data-v-fd2650d5]{padding-top:12px;max-width:576px;line-height:32px;font-size:20px}}@media (min-width: 960px){.tagline[data-v-fd2650d5]{line-height:36px;font-size:24px}.VPHero.has-image .tagline[data-v-fd2650d5]{margin:0}}.actions[data-v-fd2650d5]{display:flex;flex-wrap:wrap;margin:-6px;padding-top:24px}.VPHero.has-image .actions[data-v-fd2650d5]{justify-content:center}@media (min-width: 640px){.actions[data-v-fd2650d5]{padding-top:32px}}@media (min-width: 960px){.VPHero.has-image .actions[data-v-fd2650d5]{justify-content:flex-start}}.action[data-v-fd2650d5]{flex-shrink:0;padding:6px}.image[data-v-fd2650d5]{order:1;margin:-76px -24px -48px}@media (min-width: 640px){.image[data-v-fd2650d5]{margin:-108px -24px -48px}}@media (min-width: 960px){.image[data-v-fd2650d5]{flex-grow:1;order:2;margin:0;min-height:100%}}.image-container[data-v-fd2650d5]{position:relative;margin:0 auto;width:320px;height:320px}@media (min-width: 640px){.image-container[data-v-fd2650d5]{width:392px;height:392px}}@media (min-width: 960px){.image-container[data-v-fd2650d5]{display:flex;justify-content:center;align-items:center;width:100%;height:100%;transform:translate(-32px,-32px)}}.image-bg[data-v-fd2650d5]{position:absolute;top:50%;left:50%;border-radius:50%;width:192px;height:192px;background-image:var(--vp-home-hero-image-background-image);filter:var(--vp-home-hero-image-filter);transform:translate(-50%,-50%)}@media (min-width: 640px){.image-bg[data-v-fd2650d5]{width:256px;height:256px}}@media (min-width: 960px){.image-bg[data-v-fd2650d5]{width:320px;height:320px}}[data-v-fd2650d5] .image-src{position:absolute;top:50%;left:50%;max-width:192px;max-height:192px;transform:translate(-50%,-50%)}@media (min-width: 640px){[data-v-fd2650d5] .image-src{max-width:256px;max-height:256px}}@media (min-width: 960px){[data-v-fd2650d5] .image-src{max-width:320px;max-height:320px}}.VPFeature[data-v-837f6cca]{display:block;border:1px solid var(--vp-c-bg-soft);border-radius:12px;height:100%;background-color:var(--vp-c-bg-soft);transition:border-color .25s,background-color .25s}.VPFeature.link[data-v-837f6cca]:hover{border-color:var(--vp-c-brand);background-color:var(--vp-c-bg-soft-up)}.box[data-v-837f6cca]{display:flex;flex-direction:column;padding:24px;height:100%}.VPFeature[data-v-837f6cca] .VPImage{width:48px;height:48px;margin-bottom:20px}.icon[data-v-837f6cca]{display:flex;justify-content:center;align-items:center;margin-bottom:20px;border-radius:6px;background-color:var(--vp-c-bg-soft-down);width:48px;height:48px;font-size:24px;transition:background-color .25s}.title[data-v-837f6cca]{line-height:24px;font-size:16px;font-weight:600}.details[data-v-837f6cca]{flex-grow:1;padding-top:8px;line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.link-text[data-v-837f6cca]{padding-top:8px}.link-text-value[data-v-837f6cca]{display:flex;align-items:center;font-size:14px;font-weight:500;color:var(--vp-c-brand)}.link-text-icon[data-v-837f6cca]{display:inline-block;margin-left:6px;width:14px;height:14px;fill:currentColor}.VPFeatures[data-v-ba861f23]{position:relative;padding:0 24px}@media (min-width: 640px){.VPFeatures[data-v-ba861f23]{padding:0 48px}}@media (min-width: 960px){.VPFeatures[data-v-ba861f23]{padding:0 64px}}.container[data-v-ba861f23]{margin:0 auto;max-width:1152px}.items[data-v-ba861f23]{display:flex;flex-wrap:wrap;margin:-8px}.item[data-v-ba861f23]{padding:8px;width:100%}@media (min-width: 640px){.item.grid-2[data-v-ba861f23],.item.grid-4[data-v-ba861f23],.item.grid-6[data-v-ba861f23]{width:50%}}@media (min-width: 768px){.item.grid-2[data-v-ba861f23],.item.grid-4[data-v-ba861f23]{width:50%}.item.grid-3[data-v-ba861f23],.item.grid-6[data-v-ba861f23]{width:calc(100% / 3)}}@media (min-width: 960px){.item.grid-4[data-v-ba861f23]{width:25%}}.VPHome[data-v-d82743a8]{padding-bottom:96px}.VPHome[data-v-d82743a8] .VPHomeSponsors{margin-top:112px;margin-bottom:-128px}@media (min-width: 768px){.VPHome[data-v-d82743a8]{padding-bottom:128px}}.VPDocAsideOutline[data-v-ff0f39c8]{display:none}.VPDocAsideOutline.has-outline[data-v-ff0f39c8]{display:block}.content[data-v-ff0f39c8]{position:relative;border-left:1px solid var(--vp-c-divider);padding-left:16px;font-size:13px;font-weight:500}.outline-marker[data-v-ff0f39c8]{position:absolute;top:32px;left:-1px;z-index:0;opacity:0;width:1px;height:18px;background-color:var(--vp-c-brand);transition:top .25s cubic-bezier(0,1,.5,1),background-color .5s,opacity .25s}.outline-title[data-v-ff0f39c8]{letter-spacing:.4px;line-height:28px;font-size:13px;font-weight:600}.VPDocAside[data-v-3f215769]{display:flex;flex-direction:column;flex-grow:1}.spacer[data-v-3f215769]{flex-grow:1}.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideSponsors,.VPDocAside[data-v-3f215769] .spacer+.VPDocAsideCarbonAds{margin-top:24px}.VPDocAside[data-v-3f215769] .VPDocAsideSponsors+.VPDocAsideCarbonAds{margin-top:16px}.VPLastUpdated[data-v-7b3ebfe1]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 640px){.VPLastUpdated[data-v-7b3ebfe1]{line-height:32px;font-size:14px;font-weight:500}}.VPDocFooter[data-v-face870a]{margin-top:64px}.edit-info[data-v-face870a]{padding-bottom:18px}@media (min-width: 640px){.edit-info[data-v-face870a]{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px}}.edit-link-button[data-v-face870a]{display:flex;align-items:center;border:0;line-height:32px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.edit-link-button[data-v-face870a]:hover{color:var(--vp-c-brand-dark)}.edit-link-icon[data-v-face870a]{margin-right:8px;width:14px;height:14px;fill:currentColor}.prev-next[data-v-face870a]{border-top:1px solid var(--vp-c-divider);padding-top:24px}@media (min-width: 640px){.prev-next[data-v-face870a]{display:flex}}.pager.has-prev[data-v-face870a]{padding-top:8px}@media (min-width: 640px){.pager[data-v-face870a]{display:flex;flex-direction:column;flex-shrink:0;width:50%}.pager.has-prev[data-v-face870a]{padding-top:0;padding-left:16px}}.pager-link[data-v-face870a]{display:block;border:1px solid var(--vp-c-divider);border-radius:8px;padding:11px 16px 13px;width:100%;height:100%;transition:border-color .25s}.pager-link[data-v-face870a]:hover{border-color:var(--vp-c-brand)}.pager-link.next[data-v-face870a]{margin-left:auto;text-align:right}.desc[data-v-face870a]{display:block;line-height:20px;font-size:12px;font-weight:500;color:var(--vp-c-text-2)}.title[data-v-face870a]{display:block;line-height:20px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:color .25s}.VPDocOutlineDropdown[data-v-2edece88]{margin-bottom:42px}.VPDocOutlineDropdown button[data-v-2edece88]{display:block;font-size:14px;font-weight:500;line-height:24px;color:var(--vp-c-text-2);transition:color .5s;border:1px solid var(--vp-c-border);padding:4px 12px;border-radius:8px}.VPDocOutlineDropdown button[data-v-2edece88]:hover{color:var(--vp-c-text-1);transition:color .25s}.VPDocOutlineDropdown button.open[data-v-2edece88]{color:var(--vp-c-text-1)}.icon[data-v-2edece88]{display:inline-block;vertical-align:middle;margin-left:2px;width:14px;height:14px;fill:currentColor}[data-v-2edece88] .outline-link{font-size:13px}.open>.icon[data-v-2edece88]{transform:rotate(90deg)}.items[data-v-2edece88]{margin-top:10px;border-left:1px solid var(--vp-c-divider)}.VPDoc[data-v-c4b0d3cf]{padding:32px 24px 96px;width:100%}.VPDoc .VPDocOutlineDropdown[data-v-c4b0d3cf]{display:none}@media (min-width: 960px) and (max-width: 1280px){.VPDoc .VPDocOutlineDropdown[data-v-c4b0d3cf]{display:block}}@media (min-width: 768px){.VPDoc[data-v-c4b0d3cf]{padding:48px 32px 128px}}@media (min-width: 960px){.VPDoc[data-v-c4b0d3cf]{padding:32px 32px 0}.VPDoc:not(.has-sidebar) .container[data-v-c4b0d3cf]{display:flex;justify-content:center;max-width:992px}.VPDoc:not(.has-sidebar) .content[data-v-c4b0d3cf]{max-width:752px}}@media (min-width: 1280px){.VPDoc .container[data-v-c4b0d3cf]{display:flex;justify-content:center}.VPDoc .aside[data-v-c4b0d3cf]{display:block}}@media (min-width: 1440px){.VPDoc:not(.has-sidebar) .content[data-v-c4b0d3cf]{max-width:784px}.VPDoc:not(.has-sidebar) .container[data-v-c4b0d3cf]{max-width:1104px}}.container[data-v-c4b0d3cf]{margin:0 auto;width:100%}.aside[data-v-c4b0d3cf]{position:relative;display:none;order:2;flex-grow:1;padding-left:32px;width:100%;max-width:256px}.left-aside[data-v-c4b0d3cf]{order:1;padding-left:unset;padding-right:32px}.aside-container[data-v-c4b0d3cf]{position:fixed;top:0;padding-top:calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 32px);width:224px;height:100vh;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}.aside-container[data-v-c4b0d3cf]::-webkit-scrollbar{display:none}.aside-curtain[data-v-c4b0d3cf]{position:fixed;bottom:0;z-index:10;width:224px;height:32px;background:linear-gradient(transparent,var(--vp-c-bg) 70%)}.aside-content[data-v-c4b0d3cf]{display:flex;flex-direction:column;min-height:calc(100vh - (var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + 32px));padding-bottom:32px}.content[data-v-c4b0d3cf]{position:relative;margin:0 auto;width:100%}@media (min-width: 960px){.content[data-v-c4b0d3cf]{padding:0 32px 128px}}@media (min-width: 1280px){.content[data-v-c4b0d3cf]{order:1;margin:0;min-width:640px}}.content-container[data-v-c4b0d3cf]{margin:0 auto}.VPDoc.has-aside .content-container[data-v-c4b0d3cf]{max-width:688px}.NotFound[data-v-c70503b8]{padding:64px 24px 96px;text-align:center}@media (min-width: 768px){.NotFound[data-v-c70503b8]{padding:96px 32px 168px}}.code[data-v-c70503b8]{line-height:64px;font-size:64px;font-weight:600}.title[data-v-c70503b8]{padding-top:12px;letter-spacing:2px;line-height:20px;font-size:20px;font-weight:700}.divider[data-v-c70503b8]{margin:24px auto 18px;width:64px;height:1px;background-color:var(--vp-c-divider)}.quote[data-v-c70503b8]{margin:0 auto;max-width:256px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.action[data-v-c70503b8]{padding-top:20px}.link[data-v-c70503b8]{display:inline-block;border:1px solid var(--vp-c-brand);border-radius:16px;padding:3px 16px;font-size:14px;font-weight:500;color:var(--vp-c-brand);transition:border-color .25s,color .25s}.link[data-v-c70503b8]:hover{border-color:var(--vp-c-brand-dark);color:var(--vp-c-brand-dark)}.VPContent[data-v-a494bd1d]{flex-grow:1;flex-shrink:0;margin:var(--vp-layout-top-height, 0px) auto 0;width:100%}.VPContent.is-home[data-v-a494bd1d]{width:100%;max-width:100%}.VPContent.has-sidebar[data-v-a494bd1d]{margin:0}@media (min-width: 960px){.VPContent[data-v-a494bd1d]{padding-top:var(--vp-nav-height)}.VPContent.has-sidebar[data-v-a494bd1d]{margin:var(--vp-layout-top-height, 0px) 0 0;padding-left:var(--vp-sidebar-width)}}@media (min-width: 1440px){.VPContent.has-sidebar[data-v-a494bd1d]{padding-right:calc((100vw - var(--vp-layout-max-width)) / 2);padding-left:calc((100vw - var(--vp-layout-max-width)) / 2 + var(--vp-sidebar-width))}}.VPFooter[data-v-2f86ebd2]{position:relative;z-index:var(--vp-z-index-footer);border-top:1px solid var(--vp-c-gutter);padding:32px 24px;background-color:var(--vp-c-bg)}.VPFooter.has-sidebar[data-v-2f86ebd2]{display:none}@media (min-width: 768px){.VPFooter[data-v-2f86ebd2]{padding:32px}}.container[data-v-2f86ebd2]{margin:0 auto;max-width:var(--vp-layout-max-width);text-align:center}.message[data-v-2f86ebd2],.copyright[data-v-2f86ebd2]{line-height:24px;font-size:14px;font-weight:500;color:var(--vp-c-text-2)}.message[data-v-2f86ebd2]{order:2}.copyright[data-v-2f86ebd2]{order:1}.Layout[data-v-b2cf3e0b]{display:flex;flex-direction:column;min-height:100vh}.VPHomeSponsors[data-v-3c6e61c2]{border-top:1px solid var(--vp-c-gutter);padding:88px 24px 96px;background-color:var(--vp-c-bg)}.container[data-v-3c6e61c2]{margin:0 auto;max-width:1152px}.love[data-v-3c6e61c2]{margin:0 auto;width:28px;height:28px;color:var(--vp-c-text-3)}.icon[data-v-3c6e61c2]{width:28px;height:28px;fill:currentColor}.message[data-v-3c6e61c2]{margin:0 auto;padding-top:10px;max-width:320px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.sponsors[data-v-3c6e61c2]{padding-top:32px}.action[data-v-3c6e61c2]{padding-top:40px;text-align:center}.VPTeamPage[data-v-10b00018]{padding-bottom:96px}@media (min-width: 768px){.VPTeamPage[data-v-10b00018]{padding-bottom:128px}}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:64px}.VPTeamMembers+.VPTeamMembers[data-v-10b00018-s]{margin-top:24px}@media (min-width: 768px){.VPTeamPageTitle+.VPTeamPageSection[data-v-10b00018-s]{margin-top:16px}.VPTeamPageSection+.VPTeamPageSection[data-v-10b00018-s],.VPTeamMembers+.VPTeamPageSection[data-v-10b00018-s]{margin-top:96px}}.VPTeamMembers[data-v-10b00018-s]{padding:0 24px}@media (min-width: 768px){.VPTeamMembers[data-v-10b00018-s]{padding:0 48px}}@media (min-width: 960px){.VPTeamMembers[data-v-10b00018-s]{padding:0 64px}}.VPTeamPageTitle[data-v-bf2cbdac]{padding:48px 32px;text-align:center}@media (min-width: 768px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:64px 48px 48px}}@media (min-width: 960px){.VPTeamPageTitle[data-v-bf2cbdac]{padding:80px 64px 48px}}.title[data-v-bf2cbdac]{letter-spacing:0;line-height:44px;font-size:36px;font-weight:500}@media (min-width: 768px){.title[data-v-bf2cbdac]{letter-spacing:-.5px;line-height:56px;font-size:48px}}.lead[data-v-bf2cbdac]{margin:0 auto;max-width:512px;padding-top:12px;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}@media (min-width: 768px){.lead[data-v-bf2cbdac]{max-width:592px;letter-spacing:.15px;line-height:28px;font-size:20px}}.VPTeamPageSection[data-v-b1a88750]{padding:0 32px}@media (min-width: 768px){.VPTeamPageSection[data-v-b1a88750]{padding:0 48px}}@media (min-width: 960px){.VPTeamPageSection[data-v-b1a88750]{padding:0 64px}}.title[data-v-b1a88750]{position:relative;margin:0 auto;max-width:1152px;text-align:center;color:var(--vp-c-text-2)}.title-line[data-v-b1a88750]{position:absolute;top:16px;left:0;width:100%;height:1px;background-color:var(--vp-c-divider)}.title-text[data-v-b1a88750]{position:relative;display:inline-block;padding:0 24px;letter-spacing:0;line-height:32px;font-size:20px;font-weight:500;background-color:var(--vp-c-bg)}.lead[data-v-b1a88750]{margin:0 auto;max-width:480px;padding-top:12px;text-align:center;line-height:24px;font-size:16px;font-weight:500;color:var(--vp-c-text-2)}.members[data-v-b1a88750]{padding-top:40px}.VPTeamMembersItem[data-v-a3462077]{display:flex;flex-direction:column;gap:2px;border-radius:12px;width:100%;height:100%;overflow:hidden}.VPTeamMembersItem.small .profile[data-v-a3462077]{padding:32px}.VPTeamMembersItem.small .data[data-v-a3462077]{padding-top:20px}.VPTeamMembersItem.small .avatar[data-v-a3462077]{width:64px;height:64px}.VPTeamMembersItem.small .name[data-v-a3462077]{line-height:24px;font-size:16px}.VPTeamMembersItem.small .affiliation[data-v-a3462077]{padding-top:4px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .desc[data-v-a3462077]{padding-top:12px;line-height:20px;font-size:14px}.VPTeamMembersItem.small .links[data-v-a3462077]{margin:0 -16px -20px;padding:10px 0 0}.VPTeamMembersItem.medium .profile[data-v-a3462077]{padding:48px 32px}.VPTeamMembersItem.medium .data[data-v-a3462077]{padding-top:24px;text-align:center}.VPTeamMembersItem.medium .avatar[data-v-a3462077]{width:96px;height:96px}.VPTeamMembersItem.medium .name[data-v-a3462077]{letter-spacing:.15px;line-height:28px;font-size:20px}.VPTeamMembersItem.medium .affiliation[data-v-a3462077]{padding-top:4px;font-size:16px}.VPTeamMembersItem.medium .desc[data-v-a3462077]{padding-top:16px;max-width:288px;font-size:16px}.VPTeamMembersItem.medium .links[data-v-a3462077]{margin:0 -16px -12px;padding:16px 12px 0}.profile[data-v-a3462077]{flex-grow:1;background-color:var(--vp-c-bg-soft)}.data[data-v-a3462077]{text-align:center}.avatar[data-v-a3462077]{position:relative;flex-shrink:0;margin:0 auto;border-radius:50%;box-shadow:var(--vp-shadow-3)}.avatar-img[data-v-a3462077]{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;object-fit:cover}.name[data-v-a3462077]{margin:0;font-weight:600}.affiliation[data-v-a3462077]{margin:0;font-weight:500;color:var(--vp-c-text-2)}.org.link[data-v-a3462077]{color:var(--vp-c-text-2);transition:color .25s}.org.link[data-v-a3462077]:hover{color:var(--vp-c-brand)}.desc[data-v-a3462077]{margin:0 auto}.desc[data-v-a3462077] a{font-weight:500;color:var(--vp-c-brand);text-decoration-style:dotted;transition:color .25s}.links[data-v-a3462077]{display:flex;justify-content:center;height:56px}.sp-link[data-v-a3462077]{display:flex;justify-content:center;align-items:center;text-align:center;padding:16px;font-size:14px;font-weight:500;color:var(--vp-c-sponsor);background-color:var(--vp-c-bg-soft);transition:color .25s,background-color .25s}.sp .sp-link.link[data-v-a3462077]:hover,.sp .sp-link.link[data-v-a3462077]:focus{outline:none;color:var(--vp-c-white);background-color:var(--vp-c-sponsor)}.sp-icon[data-v-a3462077]{margin-right:8px;width:16px;height:16px;fill:currentColor}.VPTeamMembers.small .container[data-v-04685dce]{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}.VPTeamMembers.small.count-1 .container[data-v-04685dce]{max-width:276px}.VPTeamMembers.small.count-2 .container[data-v-04685dce]{max-width:576px}.VPTeamMembers.small.count-3 .container[data-v-04685dce]{max-width:876px}.VPTeamMembers.medium .container[data-v-04685dce]{grid-template-columns:repeat(auto-fit,minmax(256px,1fr))}@media (min-width: 375px){.VPTeamMembers.medium .container[data-v-04685dce]{grid-template-columns:repeat(auto-fit,minmax(288px,1fr))}}.VPTeamMembers.medium.count-1 .container[data-v-04685dce]{max-width:368px}.VPTeamMembers.medium.count-2 .container[data-v-04685dce]{max-width:760px}.container[data-v-04685dce]{display:grid;gap:24px;margin:0 auto;max-width:1152px}img[data-v-72ad4494]{margin:0 auto}:root{--vp-c-brand: #16c5fe;--vp-c-green: #16c5fe;--vp-c-green-light: #109ef7;--vp-c-green-lighter: #109ef7;--vp-c-green-dark: #109ef7;--vp-c-green-darker: #109ef7}.dark{--vp-c-bg: #000;--vp-code-block-bg: #111;--vp-c-bg-alt: rgba(0, 0, 0, .5)}@media (min-width: 960px){.dark .VPNavBar.has-sidebar .content[data-v-d84f2262]{background:rgba(36,36,36,.1)}}.Layout:before{content:"";background-size:100% 100%;background-position:right;background-repeat:no-repeat;opacity:1;max-width:100%;height:100%;width:50%;position:fixed;top:-20%;right:-10%;display:block}.Layout:after{content:"";background-size:100% 100%;background-position:right;background-repeat:no-repeat;opacity:1;max-width:100%;height:100%;width:50%;position:fixed;bottom:-20%;left:-10%;display:block;z-index:-1}@media (min-width: 960px){.title{font-size:18px!important}}.image-src{max-width:220px!important} diff --git a/guide/about/index.html b/guide/about/index.html index 6f2b0d4..ae42f5c 100644 --- a/guide/about/index.html +++ b/guide/about/index.html @@ -5,18 +5,18 @@ Vue-H5-Template | Vue-H5-Template - + - + - - diff --git a/guide/edit.html b/guide/edit.html index e04e2be..9946152 100644 --- a/guide/edit.html +++ b/guide/edit.html @@ -5,28 +5,28 @@ 参与编辑 | Vue-H5-Template - + - + -
Skip to content
On this page

参与编辑

欢迎有意愿参与到开源的朋友,加入到本文档的编写,书写文档不仅是教会别人知识,更是用自己的表达方式概括自己所学习知识的一种方式,这对个人来说是不可多得的成长机会。

js
// 拉取项目
-git clone https://github.com/sunniejs/vue-h5-template
+    
Skip to content
On this page

参与编辑

欢迎有意愿参与到开源的朋友,加入到本文档的编写,书写文档不仅是教会别人知识,更是用自己的表达方式概括自己所学习知识的一种方式,这对个人来说是不可多得的成长机会。

bash
# 拉取项目
+git clone https://github.com/sunniejs/vue-h5-template
 
-// 切换分支
-git checkout -b docs origin/docs
+# 切换分支
+git checkout -b docs origin/docs
 
-// 安装依赖
-yarn install
+# 安装依赖
+yarn install
 
-// 启动项目
-yarn start

Released under the MIT License.

- diff --git a/guide/index.html b/guide/index.html index 99f11f9..85badd8 100644 --- a/guide/index.html +++ b/guide/index.html @@ -5,18 +5,18 @@ Vue-H5-Template | Vue-H5-Template - + - + -
Skip to content
On this page

Vue-H5-Template

Vue-H5-Template,是基于 vite3 + vue3 + pinia + ( Vant or Varlet or NutUI ) + viewport 适配方案 ,构建移动端快速开发脚手架

特点

最新技术栈

  • 框架选型基于当下流行的 vue + vite + ts 模式,精选社区 star 和满意度均不错的 ui 框架和 vite 插件,并时常进行更新,确保与官方文档一致

基于 TypeScript

  • Typescript 逐渐在各种大型的 js 项目中使用,明确的类型定义可以省下不少的开发和维护成本

轻量级

  • 不同于集成的脚手架,尽量做到轻量不冗杂,只引入高频次的插件和清晰的示例
  • 轻装上阵,便于拓展开发,减少学习成本

通俗易懂的文档

  • 基于最新 VitePress 构建的文档,更快,更便捷
  • 更快的热更新

Released under the MIT License.

- diff --git a/guide/other/index.html b/guide/other/index.html index 0a4089f..1c80791 100644 --- a/guide/other/index.html +++ b/guide/other/index.html @@ -5,18 +5,18 @@ Vue-H5-Template | Vue-H5-Template - + - + -
Skip to content
On this page

1、为什么有多个组件库?

本模版想做到的是尽可能的开箱即用,不用去看别的文档引入相关组件库,毕竟做减法比做加法要容易些,如你不需要某个组件库可以根据这篇指引去移除某个组件库

2、我可以用在个人或公司的项目吗?

模版基于 MIT License,你可以根据自己的需求用到不同的项目里,如果对你有帮助点个 star 支持一下呗 🌟

3、我是一个新手,有什么好的学习建议吗?

过来人的经验就是熟读文档可以少走很多弯路,很多的人文档没读熟就开始动手,出了问题也不知道如何去解决,墙裂建议先把文档熟读

Released under the MIT License.

- diff --git a/guide/start.html b/guide/start.html index 3cb0350..139422b 100644 --- a/guide/start.html +++ b/guide/start.html @@ -5,18 +5,18 @@ 快速上手 | Vue-H5-Template - + - + -
Skip to content
On this page

快速上手

node 版本要求

推荐 16.17.0+以上的版本,毕竟 2022 年了,别掐着 12+的版本了,你也可以使用nvmnvm-windows在同一台电脑上管理多个 node 版本。

包管理器

尽量使用 yarn 或者 pnpm,本项目仅保证在 yarn 或 pnpm 下正确运行,npm 涉及到网络环境等各种情况的限制不做过多考虑。如要使用 npm 请不要切换淘宝镜像,会有各种奇怪的 bug。

启动项目

项目中包含 vue2 和 vue3 两套模版

如你使用的是 vue2-template,请参考vue2 项目启动

如你使用的是 vue3-template,请参考vue3 项目启动

Released under the MIT License.

- diff --git a/guide/vue2/alias.html b/guide/vue2/alias.html index ff7840c..14927fc 100644 --- a/guide/vue2/alias.html +++ b/guide/vue2/alias.html @@ -5,12 +5,12 @@ 配置 alias 别名 | Vue-H5-Template - + - + @@ -29,8 +29,8 @@ .set("views", resolve("src/views")) .set("components", resolve("src/components")); }, -};

Released under the MIT License.

- diff --git a/guide/vue2/axios.html b/guide/vue2/axios.html index e66da0f..53d0f85 100644 --- a/guide/vue2/axios.html +++ b/guide/vue2/axios.html @@ -5,17 +5,17 @@ Axios 封装及接口管理 | Vue-H5-Template - + - + -
Skip to content
On this page

Axios 封装及接口管理

utils/request.js 封装 axios ,开发者需要根据后台接口做修改。

  • service.interceptors.request.use 里可以设置请求头,比如设置 token
  • config.hideloading 是在 api 文件夹下的接口参数里设置,下文会讲
  • service.interceptors.response.use 里可以对接口返回数据处理,比如 401 删除本地信息,重新登录
javascript
import axios from "axios";
+    
Skip to content
On this page

Axios 封装及接口管理

utils/request.js 封装 axios ,开发者需要根据后台接口做修改。

  • service.interceptors.request.use 里可以设置请求头,比如设置 token
  • config.hideloading 是在 api 文件夹下的接口参数里设置,下文会讲
  • service.interceptors.response.use 里可以对接口返回数据处理,比如 401 删除本地信息,重新登录
javascript
import axios from "axios";
 import store from "@/store";
 import { Toast } from "vant";
 // 根据环境不同引入不同api地址
@@ -71,7 +71,7 @@
     return Promise.reject(error);
   }
 );
-export default service;

接口管理

src/api 文件夹下统一管理接口

  • 你可以建立多个模块对接接口, 比如 home.js 里是首页的接口这里讲解 user.js
  • url 接口地址,请求的时候会拼接上 config 下的 baseApi
  • method 请求方法
  • data 请求参数 qs.stringify(params) 是对数据系列化操作
  • hideloading 默认 false,设置为 true 后,不显示 loading ui 交互中有些接口不需要让用户感知
javascript
import qs from "qs";
+export default service;

接口管理

src/api 文件夹下统一管理接口

  • 你可以建立多个模块对接接口, 比如 home.js 里是首页的接口这里讲解 user.js
  • url 接口地址,请求的时候会拼接上 config 下的 baseApi
  • method 请求方法
  • data 请求参数 qs.stringify(params) 是对数据系列化操作
  • hideloading 默认 false,设置为 true 后,不显示 loading ui 交互中有些接口不需要让用户感知
javascript
import qs from "qs";
 // axios
 import request from "@/utils/request";
 //user api
@@ -90,8 +90,8 @@
 const params = { user: "sunnie" };
 getUserInfo(params)
   .then(() => {})
-  .catch(() => {});

Released under the MIT License.

- diff --git a/guide/vue2/base.html b/guide/vue2/base.html index 26a7715..936adf5 100644 --- a/guide/vue2/base.html +++ b/guide/vue2/base.html @@ -5,12 +5,12 @@ Webpack 4 vue.config.js 基础配置 | Vue-H5-Template - + - + @@ -61,8 +61,8 @@ }, }, }; -}

Released under the MIT License.

- diff --git a/guide/vue2/bundle.html b/guide/vue2/bundle.html index 693de3c..d17b0a0 100644 --- a/guide/vue2/bundle.html +++ b/guide/vue2/bundle.html @@ -5,12 +5,12 @@ 配置打包分析 | Vue-H5-Template - + - + @@ -29,8 +29,8 @@ ]); } }, -};
bash
npm run build

Released under the MIT License.

- diff --git a/guide/vue2/chunks.html b/guide/vue2/chunks.html index 011dd20..e07001b 100644 --- a/guide/vue2/chunks.html +++ b/guide/vue2/chunks.html @@ -5,12 +5,12 @@ splitChunks 单独打包第三方模块 | Vue-H5-Template - + - + @@ -55,8 +55,8 @@ config.optimization.runtimeChunk("single"); }); }, -};

Released under the MIT License.

- diff --git a/guide/vue2/console.html b/guide/vue2/console.html index c9926cf..a31cd05 100644 --- a/guide/vue2/console.html +++ b/guide/vue2/console.html @@ -5,12 +5,12 @@ 去掉 console.log | Vue-H5-Template - + - + @@ -36,8 +36,8 @@ module.exports = { presets: [["@vue/cli-plugin-babel/preset", { useBuiltIns: "entry" }]], plugins, -};

Released under the MIT License.

- diff --git a/guide/vue2/env.html b/guide/vue2/env.html index 0b15a4a..ca6539d 100644 --- a/guide/vue2/env.html +++ b/guide/vue2/env.html @@ -5,12 +5,12 @@ 配置多环境变量 | Vue-H5-Template - + - + @@ -19,13 +19,13 @@ "serve": "vue-cli-service serve --open", "stage": "vue-cli-service build --mode staging", "build": "vue-cli-service build", -}
配置介绍

  以 VUE_APP_ 开头的变量,在代码中可以通过 process.env.VUE_APP_ 访问。
  比如,VUE_APP_ENV = 'development' 通过process.env.VUE_APP_ENV 访问。
  除了 VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量NODE_ENVBASE_URL

在项目根目录中新建.env.*

  • .env.development 本地开发环境配置
bash
NODE_ENV='development'
+}
配置介绍

  以 VUE_APP_ 开头的变量,在代码中可以通过 process.env.VUE_APP_ 访问。   比如:VUE_APP_ENV = 'development' 通过 process.env.VUE_APP_ENV 访问。   当然,除了 VUE_APP_* 变量之外,在你的应用代码中始终可用的还有两个特殊的变量NODE_ENVBASE_URL

在项目根目录中新建.env.*

  • .env.development 本地开发环境配置
bash
NODE_ENV='development'
 # must start with VUE_APP_
 VUE_APP_ENV = 'development'
  • .env.staging 测试环境配置
bash
NODE_ENV='production'
 # must start with VUE_APP_
 VUE_APP_ENV = 'staging'
  • .env.production 正式环境配置
bash
NODE_ENV='production'
 # must start with VUE_APP_
-VUE_APP_ENV = 'production'

这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV development staging production
变量我们统一在 src/config/env.*.js 里进行管理。

这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢?
修改起来方便,不需 要重启项目,符合开发习惯。

config/index.js

javascript
// 根据环境引入不同配置 process.env.NODE_ENV
+VUE_APP_ENV = 'production'

这里我们并没有定义很多变量,只定义了基础的 VUE_APP_ENV development staging production 变量我们统一在 src/config/env.*.js 里进行管理。

这里有个问题,既然这里有了根据不同环境设置变量的文件,为什么还要去 config 下新建三个对应的文件呢? 修改起来方便,不需 要重启项目,符合开发习惯。

config/index.js

javascript
// 根据环境引入不同配置 process.env.NODE_ENV
 const config = require("./env." + process.env.VUE_APP_ENV);
 module.exports = config;

配置对应环境的变量,拿本地环境文件 env.development.js 举例,用户可以根据需求修改

javascript
// 本地环境配置
 module.exports = {
@@ -36,8 +36,8 @@
   APPSECRET: "xxx",
 };

根据环境不同,变量就会不同了

javascript
// 根据环境不同引入不同baseApi地址
 import { baseApi } from "@/config";
-console.log(baseApi);

Released under the MIT License.

- diff --git a/guide/vue2/externals.html b/guide/vue2/externals.html index 23ad294..3d10caf 100644 --- a/guide/vue2/externals.html +++ b/guide/vue2/externals.html @@ -5,17 +5,17 @@ 配置 externals 引入 cdn 资源 | Vue-H5-Template - + - + -
Skip to content
On this page

配置 externals 引入 cdn 资源

这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可 以实际测试一下。

另外项目中使用的是公共 CDN 不稳定,域名解析也是需要时间的(如果你要使用请尽量使用同一个域名)

因为页面每次遇到<script>标签都会停下来解析执行,所以应该尽可能减少<script>标签的数量 HTTP请求存在一定的开销,100K 的文件比 5 个 20K 的文件下载的更快,所以较少脚本数量也是很有必要的

暂时还没有研究放到自己的 cdn 服务器上。

javascript
const defaultSettings = require("./src/config/index.js");
+    
Skip to content
On this page

配置 externals 引入 cdn 资源

这个版本 CDN 不再引入,我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块,这个开发者可 以实际测试一下。

另外项目中使用的是公共 CDN 不稳定,域名解析也是需要时间的(如果你要使用请尽量使用同一个域名)

因为页面每次遇到<script>标签都会停下来解析执行,所以应该尽可能减少<script>标签的数量 HTTP请求存在一定的开销,100K 的文件比 5 个 20K 的文件下载的更快,所以较少脚本数量也是很有必要的

暂时还没有研究放到自己的 cdn 服务器上。

javascript
const defaultSettings = require("./src/config/index.js");
 const name = defaultSettings.title || "vue mobile template";
 const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
 
@@ -78,8 +78,8 @@
     <% for (var i in
       htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
       <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
-    <% } %>

Released under the MIT License.

- diff --git a/guide/vue2/ie.html b/guide/vue2/ie.html index 6a04d40..eea5ed1 100644 --- a/guide/vue2/ie.html +++ b/guide/vue2/ie.html @@ -5,12 +5,12 @@ 添加 IE 兼容 | Vue-H5-Template - + - + @@ -25,8 +25,8 @@ ["@vue/cli-plugin-babel/preset", { useBuiltIns: "usage", corejs: 3 }], ], plugins, -};

Released under the MIT License.

- diff --git a/guide/vue2/lint.html b/guide/vue2/lint.html index 2c550a0..78ca683 100644 --- a/guide/vue2/lint.html +++ b/guide/vue2/lint.html @@ -5,17 +5,17 @@ Eslint + Pettier 统一开发规范 | Vue-H5-Template - + - + -
Skip to content
On this page

Eslint + Pettier 统一开发规范

VScode (版本 1.47.3)安装 eslint prettier vetur 插件 .vue 文件使用 vetur 进行格式化,其他使用prettier,后面会 专门写个如何使用配合使用这三个玩意

在文件 .prettierrc 里写 属于你的 pettier 规则

bash
{
+    
Skip to content
On this page

Eslint + Pettier 统一开发规范

VScode (版本 1.47.3)安装 eslint prettier vetur 插件 .vue 文件使用 vetur 进行格式化,其他使用prettier,后面会专门写个如何使用配合使用这三个玩意儿

在文件 .prettierrc 里写 属于你的 pettier 规则

bash
{
    "printWidth": 120,
    "tabWidth": 2,
    "singleQuote": true,
@@ -163,8 +163,8 @@
   "minapp-vscode.disableAutoConfig": true,
   "javascript.implicitProjectConfig.experimentalDecorators": true,
   "editor.maxTokenizationLineLength": 200000
-}

Released under the MIT License.

- diff --git a/guide/vue2/proxy.html b/guide/vue2/proxy.html index 53b8b23..3527c09 100644 --- a/guide/vue2/proxy.html +++ b/guide/vue2/proxy.html @@ -5,12 +5,12 @@ 配置 proxy 跨域 | Vue-H5-Template - + - + @@ -36,8 +36,8 @@ method: "post", data: qs.stringify(params), }); -}

Released under the MIT License.

- diff --git a/guide/vue2/rem.html b/guide/vue2/rem.html index fd3c85b..0cacfda 100644 --- a/guide/vue2/rem.html +++ b/guide/vue2/rem.html @@ -5,12 +5,12 @@ rem 适配方案 | Vue-H5-Template - + - + @@ -32,7 +32,7 @@ propList: ["*"], }, }, -};

更多详细信息: vant

新手必看,老鸟跳过

很多小伙伴会问我,适配的问题,因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上传到蓝湖,我们就可以需要的尺寸了。下面就大概普及一下 rem。

我们知道 1rem 等于html 根元素设定的 font-sizepx 值。Vant UI 设置 rootValue: 37.5,你可以看到在 iPhone 6 下看到 (1rem 等于 37.5px):

html
<html data-dpr="1" style="font-size: 37.5px;"></html>

切换不同的机型,根元素可能会有不同的font-size。当你写 css px 样式时,会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件,需要按照 rootValue: 37.5 来写样式。

举个例子:设计给了你一张 750px * 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。

  • rootValue: 70 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
  • rootValue: 37.5 的时候,样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。

当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。

html
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
+};

更多详细信息: vant

新手必看,老鸟跳过

很多小伙伴会问我,适配的问题,因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上传到蓝湖,我们就可以得到需要的尺寸了。下面就简单普及一下 rem 适配的原理。

我们知道 1rem 等于html 根元素设定的 font-sizepx 值。Vant UI 设置 rootValue: 37.5,你可以看到在 iPhone 6 下看到 (1rem 等于 37.5px):

html
<html data-dpr="1" style="font-size: 37.5px;"></html>

切换不同的机型,根元素可能会有不同的font-size。当你写 css px 样式时,会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件,需要按照 rootValue: 37.5 来写样式。

举个例子:设计给了你一张 750px * 1334px 图片,在 iPhone6 上铺满屏幕,其他机型适配。

  • rootValue: 70 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
  • rootValue: 37.5 的时候,样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。

当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。

html
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
 
 <style>
   /* rootValue: 75 */
@@ -45,8 +45,8 @@
     width: 375px;
     height: 667px;
   }
-</style>

Released under the MIT License.

- diff --git a/guide/vue2/router.html b/guide/vue2/router.html index a6c37cc..2b29328 100644 --- a/guide/vue2/router.html +++ b/guide/vue2/router.html @@ -5,17 +5,17 @@ Vue-router | Vue-H5-Template - + - + -
Skip to content
On this page

Vue-router

本案例采用 hash 模式,开发者根据需求修改 mode base

注意:如果你使用了 history 模式,vue.config.js 中的 publicPath 要做对应的修改

前往:vue.config.js 基础配置

javascript
import Vue from "vue";
+    
Skip to content
On this page

Vue-router

本案例采用 hash 模式,开发者根据需求修改 mode base

注意:如果你使用了 history 模式,vue.config.js 中的 publicPath 要做对应的修改

前往: vue.config.js 基础配置

javascript
import Vue from "vue";
 import Router from "vue-router";
 
 Vue.use(Router);
@@ -38,8 +38,8 @@
     routes: router,
   });
 
-export default createRouter();

Released under the MIT License.

- diff --git a/guide/vue2/sass.html b/guide/vue2/sass.html index 1ab8fb8..0ddcd1e 100644 --- a/guide/vue2/sass.html +++ b/guide/vue2/sass.html @@ -5,12 +5,12 @@ Sass 全局样式 | Vue-H5-Template - + - + @@ -33,7 +33,7 @@ } }

父组件改变子组件样式 深度选择器

当你子组件使用了 scoped 但在父组件又想修改子组件的样式可以 通过 >>> 来实现:

css
<style scoped>
 .a >>> .b { /* ... */ }
-</style>

全局变量

vue.config.js 配置使用 css.loaderOptions 选项,注入 sassmixin variables 到全局,不需要手动引入 ,配置$cdn通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量:

javascript
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
+</style>

全局变量

vue.config.js 配置使用 css.loaderOptions 选项,注入 sassmixin variables 到全局,不需要手动引入,配置$cdn通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量:

javascript
const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
 const defaultSettings = require("./src/config/index.js");
 module.exports = {
   css: {
@@ -52,7 +52,7 @@
       },
     },
   },
-};

设置 js 中可以访问 $cdn,.vue 文件中使用this.$cdn访问

javascript
// 引入全局样式
+};

设置 js 中可以访问 $cdn.vue 文件中使用this.$cdn访问

javascript
// 引入全局样式
 import "@/assets/css/index.scss";
 
 // 设置 js中可以访问 $cdn
@@ -67,8 +67,8 @@
     height: 120px;
     background: url($cdn + "/weapp/logo.png") center / contain no-repeat;
   }
-</style>

Released under the MIT License.

- diff --git a/guide/vue2/start.html b/guide/vue2/start.html index 55bac28..6605706 100644 --- a/guide/vue2/start.html +++ b/guide/vue2/start.html @@ -5,28 +5,28 @@ 启动项目 | Vue-H5-Template - + - + -
Skip to content
On this page

启动项目

js
// 拉取项目
-git clone https://github.com/sunniejs/vue-h5-template
+    
Skip to content
On this page

启动项目

bash
# 拉取项目
+git clone https://github.com/sunniejs/vue-h5-template
 
-// 切换分支
-git checkout -b vue2-h5-template origin/vue2-h5-template
+# 切换分支
+git checkout -b vue2-h5-template origin/vue2-h5-template
 
-// 安装依赖
-yarn install
+# 安装依赖
+yarn install
 
-// 启动项目
-yarn serve

Released under the MIT License.

- diff --git a/guide/vue2/vant.html b/guide/vue2/vant.html index e4b1643..0e754f1 100644 --- a/guide/vue2/vant.html +++ b/guide/vue2/vant.html @@ -5,12 +5,12 @@ VantUI 组件按需加载 | Vue-H5-Template - + - + @@ -38,8 +38,8 @@ Vue.use(Button); Vue.use(Cell); Vue.use(List); -Vue.use(Tabbar).use(TabbarItem);

Released under the MIT License.

- diff --git a/guide/vue2/vuex.html b/guide/vue2/vuex.html index 6fc3722..8ee1176 100644 --- a/guide/vue2/vuex.html +++ b/guide/vue2/vuex.html @@ -5,12 +5,12 @@ Vuex 状态管理 | Vue-H5-Template - + - + @@ -44,8 +44,8 @@ }, }, }; -</script>
- diff --git a/guide/vue2/vw.html b/guide/vue2/vw.html index 771e09a..6c79000 100644 --- a/guide/vue2/vw.html +++ b/guide/vue2/vw.html @@ -5,17 +5,17 @@ vm 适配方案 | Vue-H5-Template - + - + -
Skip to content
On this page

vm 适配方案

本项目使用的是 rem 的 适配方案,其实无论你使用哪种方案,都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做 。如果你想用 vw,你可以按照下面的方式切换。

1.安装依赖

bash
npm install postcss-px-to-viewport -D

2.修改 .postcssrc.js

将根目录下 .postcssrc.js 文件修改如下

javascript
// https://github.com/michael-ciniawsky/postcss-load-config
+    
Skip to content
On this page

vm 适配方案

本项目使用的是 rem 的 适配方案,其实无论你使用哪种方案,都不需要你去计算 12px 是多少 rem 或者 vw, 会有专门的工具去帮你做 。如果你想用 vw,你可以按照下面的方式切换。

1.安装依赖

bash
npm install postcss-px-to-viewport -D

2.修改 .postcssrc.js

将根目录下 .postcssrc.js 文件修改如下

javascript
// https://github.com/michael-ciniawsky/postcss-load-config
 module.exports = {
   plugins: {
     autoprefixer: {
@@ -38,8 +38,8 @@
   },
 };

3.删除原来的 rem 相关代码

src/main.js 删除如下代码

javascript
// 移动端适配
 import "lib-flexible/flexible.js";

package.json 删除如下代码

javascript
"lib-flexible": "^0.3.2",
-"postcss-pxtorem": "^5.1.1",

运行起来,F12 元素 css style 就是 vw 单位了

Released under the MIT License.

- diff --git a/guide/vue3/alias.html b/guide/vue3/alias.html index d40c867..c622e04 100644 --- a/guide/vue3/alias.html +++ b/guide/vue3/alias.html @@ -5,12 +5,12 @@ alias | Vue-H5-Template - + - + @@ -31,8 +31,8 @@ replacement: pathResolve('types') + '/', }, ], -},

Released under the MIT License.

- diff --git a/guide/vue3/axios.html b/guide/vue3/axios.html index 4aa332b..8f8819a 100644 --- a/guide/vue3/axios.html +++ b/guide/vue3/axios.html @@ -5,12 +5,12 @@ axios 封装及接口管理 | Vue-H5-Template - + - + @@ -71,8 +71,8 @@ return Promise.reject(error); } ); -export default service; - diff --git a/guide/vue3/base.html b/guide/vue3/base.html index 7387863..1665cb7 100644 --- a/guide/vue3/base.html +++ b/guide/vue3/base.html @@ -5,17 +5,17 @@ vite.config.ts 基础配置 | Vue-H5-Template - + - + -
Skip to content
On this page

vite.config.ts 基础配置

如果你的 Vue Router 模式是 hash

javascript
publicPath: './',

如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Router base 保持一致

javascript
publicPath: '/app/',
javascript
export default function ({ command }: ConfigEnv): UserConfigExport {
+    
Skip to content
On this page

vite.config.ts 基础配置

如果你的 Vue Router 模式是 hash

javascript
base: './',

如果你的 Vue Router 模式是 history 这里的 publicPath 和你的 Vue Router base 保持一致

javascript
base: '/app/',
javascript
export default function ({ command }: ConfigEnv): UserConfigExport {
   const isProduction = command === "build";
   return {
     server: {
@@ -43,8 +43,8 @@
       },
     },
   };
-}

Released under the MIT License.

- diff --git a/guide/vue3/env.html b/guide/vue3/env.html index c65b7af..68e414f 100644 --- a/guide/vue3/env.html +++ b/guide/vue3/env.html @@ -5,12 +5,12 @@ Vue-H5-Template | Vue-H5-Template - + - + @@ -19,8 +19,8 @@ "dev": "vite", "dev:test": "vite --mode test", "dev:prod": "vite --mode production", -}

Released under the MIT License.

- diff --git a/guide/vue3/i18n.html b/guide/vue3/i18n.html index 0747166..a96ef39 100644 --- a/guide/vue3/i18n.html +++ b/guide/vue3/i18n.html @@ -5,12 +5,12 @@ i18n 文本多语言解决方案 | Vue-H5-Template - + - + @@ -47,7 +47,7 @@ localStorage.setItem('lang', locale); } i18n.global.locale = locale || localStorage.getItem('lang') || ''; -}

css图片解决方案

目前在业务开发中,css的样式多语言也会经常用到,可能一些图片的字体比较复杂,代码很难实现。或者我们为了减少多语言的配置,加快开发效率也会使用多语言的配置,目前这里提供scss的图片多语言的方案

css
@mixin main-lang-bg($width, $height, $preUrl, $posUrl) {
+}

css图片解决方案

目前在业务开发中,CSS 的样式多语言也会经常用到,可能一些图片的字体比较复杂,代码很难实现。或者我们为了减少多语言的配置,加快开发效率也会使用多语言的配置,目前这里提供 scss 的图片多语言的方案

css
@mixin main-lang-bg($width, $height, $preUrl, $posUrl) {
   width: $width;
   height: $height;
   background-repeat: no-repeat;
@@ -76,8 +76,8 @@
     .btn-confirm {
         @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png');
     }
-</style>
- diff --git a/guide/vue3/lint.html b/guide/vue3/lint.html index b3060c5..b3700fb 100644 --- a/guide/vue3/lint.html +++ b/guide/vue3/lint.html @@ -3,20 +3,20 @@ - Eslint+Pettier+stylelint 统一开发规范 | Vue-H5-Template + Eslint + Pettier + Stylelint 统一开发规范 | Vue-H5-Template - + - + -
- diff --git a/guide/vue3/pinia.html b/guide/vue3/pinia.html index 018f3ac..0979f42 100644 --- a/guide/vue3/pinia.html +++ b/guide/vue3/pinia.html @@ -5,12 +5,12 @@ Pinia 状态管理 | Vue-H5-Template - + - + @@ -18,7 +18,7 @@
Skip to content
On this page

Pinia 状态管理

下一代 vuex,使用极其方便,ts 兼容好

目录结构

bash
├── store
    ├── modules
       └── user.js
-   ├── index.js

目前pinia分为两种编程模式,options API和 Composition API,我们这边都会列举出来实现的业务逻辑效果是一样的,提供大家思路

options API:

javascript
interface StoreUser {
+   ├── index.js

目前pinia分为两种编程模式,Options API 和 Composition API,我们这边都会列举出来实现的业务逻辑效果是一样的,提供大家思路

Options API:

javascript
interface StoreUser {
   token: string;
   info: Record<any, any>;
 }
@@ -79,8 +79,8 @@
   import { useUserStore } from "@/store/modules/user";
   const userStore = useUserStore();
   userStore.login();
-</script>

Released under the MIT License.

- diff --git a/guide/vue3/proxy.html b/guide/vue3/proxy.html index ac0944d..6f08d2f 100644 --- a/guide/vue3/proxy.html +++ b/guide/vue3/proxy.html @@ -5,12 +5,12 @@ proxy 跨域 | Vue-H5-Template - + - + @@ -23,8 +23,8 @@ rewrite: (path) => path.replace(/^\/api/, '') } } -}, - diff --git a/guide/vue3/router.html b/guide/vue3/router.html index 69a428d..01d650a 100644 --- a/guide/vue3/router.html +++ b/guide/vue3/router.html @@ -5,17 +5,17 @@ vue-router | Vue-H5-Template - + - + -
Skip to content
On this page

vue-router

本案例采用 hash 模式,开发者根据需求修改 mode base

注意:如果你使用了 history 模式, vue.config.js 中的 publicPath 要做对应的修改

前往:vue.config.js 基础配置

javascript
import Vue from "vue";
+    
Skip to content
On this page

vue-router

本案例采用 hash 模式,开发者根据需求修改 mode base

注意:如果你使用了 history 模式, vue.config.js 中的 publicPath 要做对应的修改

前往: vite.config.js 基础配置

javascript
import Vue from "vue";
 import { createRouter, createWebHistory, Router } from "vue-router";
 
 Vue.use(Router);
@@ -33,8 +33,8 @@
   routes: routes,
 });
 
-export default router;

Released under the MIT License.

- diff --git a/guide/vue3/start.html b/guide/vue3/start.html index 3a927d7..0a093f8 100644 --- a/guide/vue3/start.html +++ b/guide/vue3/start.html @@ -5,25 +5,25 @@ 启动项目 | Vue-H5-Template - + - + -
Skip to content
On this page

启动项目

js
// 拉取项目
-git clone https://github.com/sunniejs/vue-h5-template
+    
-    
     
   
diff --git a/guide/vue3/ui.html b/guide/vue3/ui.html
index a3e88aa..cbda90b 100644
--- a/guide/vue3/ui.html
+++ b/guide/vue3/ui.html
@@ -5,17 +5,17 @@
     
     多 UI 组件库供选择 | Vue-H5-Template
     
-    
+    
     
     
   
   
-  
+  
   
   
   
   
-    
Skip to content
On this page

多 UI 组件库供选择

Vite 构建工具,使用 vite-plugin-style-import 和 unplugin-vue-components/vite 实现按需引入。

安装插件

bash
yarn add vite-plugin-style-import -D
+    
Skip to content
On this page

多 UI 组件库供选择

Vite 构建工具,使用 vite-plugin-style-importunplugin-vue-components/vite 实现按需引入。

安装插件

bash
yarn add vite-plugin-style-import -D
 yarn add unplugin-vue-components/vite -D

使用组件库

nutUI 没有按需加载的 resolvers,style 需要自己配置按需加载

config/vite/plugins/styleImport.ts 设置

javascript
// 按需加载样式文件
   ...
     createStyleImportPlugin({
@@ -32,8 +32,8 @@
 });

vant 和 varlet 可以使用组件按需加载

config/vite/plugins/component.ts

javascript
import { VueUseComponentsResolver, VantResolver, VarletUIResolver } from 'unplugin-vue-components/resolvers';
 ...
 resolvers: [VantResolver(), VarletUIResolver()],
-...

不需要某个组件库

nutUI 需删除src/plugins/nutUI.tsmain.ts文件下的引入

vant 和 varlet 只需删除对应的 resolvers 即可

删除后需全局搜索删除不需要的组件,避免报错

参考文档

Released under the MIT License.

- diff --git a/guide/vue3/viewport.html b/guide/vue3/viewport.html index 9157d35..7e646eb 100644 --- a/guide/vue3/viewport.html +++ b/guide/vue3/viewport.html @@ -5,12 +5,12 @@ viewport 适配方案 | Vue-H5-Template - + - + @@ -37,7 +37,7 @@ return designWidth; }, }, -};

新手必看,老鸟跳过

很多小伙伴会问我,适配的问题, 因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上传到蓝湖,我们就可以需要的尺寸了。下面就大概普及一下 rem。

我们知道 1rem 等于 html 根元素设定的 font-sizepx 值。Vant UI 设置 rootValue: 37.5 , 你可以看到在 iPhone 6 下看到 ( 1rem 等于 37.5px ):

html
<html data-dpr="1" style="font-size: 37.5px;"></html>

切换不同的机型,根元素可能会有不同的 font-size 。当你写 css px 样式时,会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件,需要按照 rootValue: 37.5 来写样式。

举个例子:设计给了你一张 750px * 1334px 图片,在 iPhone6 上铺满屏幕, 其他机型适配。

  • rootValue: 75 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
  • rootValue: 37.5 的时候,样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。

当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。

html
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
+};

新手必看,老鸟跳过

很多小伙伴会问我,适配的问题, 因为我们使用的是 Vant UI,所以必须根据 Vant UI 375 的设计规范走,一般我们的设计会将 UI 图上传到蓝湖,我们就可以得到需要的尺寸了。下面就简单普及一下 rem 适配的原理。

我们知道 1rem 等于 html 根元素设定的 font-sizepx 值。Vant UI 设置 rootValue: 37.5 , 你可以看到在 iPhone 6 下看到 ( 1rem 等于 37.5px ):

html
<html data-dpr="1" style="font-size: 37.5px;"></html>

切换不同的机型,根元素可能会有不同的 font-size 。当你写 css px 样式时,会被程序换算成 rem 达到适配。

因为我们用了 Vant 的组件,需要按照 rootValue: 37.5 来写样式。

举个例子:设计给了你一张 750px * 1334px 图片,在 iPhone6 上铺满屏幕, 其他机型适配。

  • rootValue: 75 , 样式 width: 750px;height: 1334px; 图片会撑满 iPhone6 屏幕,这个时候切换其他机型,图片也会跟着撑满。
  • rootValue: 37.5 的时候,样式 width: 375px;height: 667px; 图片会撑满 iPhone6 屏幕。

也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图,去写对应的样式就可以了。

当然,想要撑满屏幕你可以使用 100%,这里只是举例说明。

html
<img class="image" src="https://www.sunniejs.cn/static/weapp/logo.png" />
 
 <style>
   /* rootValue: 75 */
@@ -51,8 +51,8 @@
     width: 375px;
     height: 667px;
   }
-</style>

Released under the MIT License.

- diff --git a/guide/vue3/vite.html b/guide/vue3/vite.html index 78a4c0b..03c414a 100644 --- a/guide/vue3/vite.html +++ b/guide/vue3/vite.html @@ -5,18 +5,18 @@ vite | Vue-H5-Template - + - + -
Skip to content
On this page

vite

基于原生 ES 模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR),使用 Rollup 打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。更多关于vite

模版集成了如下的 vite 插件

  • unplugin-auto-import(按需加载,自动引入)
  • unplugin-vue-components(按需加载,自动引入组件)
  • vite-plugin-compression(开启.gz 压缩)
  • vite-plugin-eruda(控制台,方便移动端调试)
  • vite-plugin-imagemin(图片压缩)
  • vite-plugin-mock(引入 mockjs,本地模拟接口)
  • vite-plugin-pages(动态生成路由)
  • vite-plugin-progress(构建显示进度条)
  • vite-plugin-restart(监听配置文件修改自动重启 Vite)
  • vite-plugin-style-import(按需引入样式文件)
  • vite-plugin-svg-icons(加载 SVG 文件,自动引入)

Released under the MIT License.

- diff --git a/hashmap.json b/hashmap.json index 4cc3be0..2b92091 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"guide_other_index.md":"0962dd47","guide_start.md":"18fddbf4","guide_vue2_router.md":"d35b25e7","guide_vue2_sass.md":"723a4859","guide_vue2_start.md":"e13e8546","guide_vue2_vant.md":"9252795d","guide_vue3_lint.md":"b9504b63","guide_vue3_start.md":"f354f662","guide_vue3_ui.md":"cc6ae98b","guide_vue3_viewport.md":"ad1a10ef","guide_vue3_vite.md":"9ec8c052","guide_index.md":"3a64f07e","guide_vue2_vuex.md":"618230b5","guide_vue2_vw.md":"ca9fc79f","guide_vue3_alias.md":"d777bc16","guide_vue3_base.md":"732de433","guide_vue3_env.md":"83cf2a7e","guide_vue2_rem.md":"769a5fda","guide_about_index.md":"9cd5ee99","guide_edit.md":"4c959ba5","guide_vue2_axios.md":"a682218e","guide_vue3_axios.md":"cd29cfa2","guide_vue2_bundle.md":"2fe1a9fb","guide_vue2_chunks.md":"0130f8b3","guide_vue2_console.md":"51b49cb0","guide_vue2_env.md":"c800a293","guide_vue2_externals.md":"69c0669f","index.md":"bd639346","guide_vue3_i18n.md":"0436062d","guide_vue2_base.md":"7d4266ed","guide_vue2_ie.md":"83d021b7","guide_vue2_lint.md":"d5070d4f","guide_vue2_proxy.md":"f5f5a403","guide_vue2_alias.md":"306b63fa","guide_vue3_router.md":"bf1ddfb2","guide_vue3_pinia.md":"4c51a07c","guide_vue3_proxy.md":"b05cbab3"} +{"guide_about_index.md":"3268f72f","guide_index.md":"46287c77","guide_vue2_base.md":"bd933227","guide_edit.md":"7944bd49","guide_vue2_alias.md":"c0d9e31c","guide_vue2_env.md":"71078dec","guide_vue2_chunks.md":"93504c3d","guide_vue3_axios.md":"0778382b","guide_vue2_router.md":"369637ff","guide_vue2_vant.md":"4ed27c84","guide_vue2_vw.md":"f3d8795c","guide_start.md":"634b98ba","guide_vue3_i18n.md":"51f27eff","guide_vue2_rem.md":"05f1a99e","guide_vue3_pinia.md":"0d738d45","guide_vue3_lint.md":"18663aed","guide_vue3_start.md":"6f88b41c","guide_vue3_proxy.md":"94d7124b","guide_vue2_vuex.md":"399839b6","guide_vue2_proxy.md":"0d483f53","guide_vue3_base.md":"462dbdb9","guide_vue2_console.md":"68673d37","guide_other_index.md":"5aef07ec","guide_vue2_bundle.md":"73aeb293","guide_vue3_alias.md":"6e50bff0","guide_vue2_sass.md":"3616d11c","guide_vue2_start.md":"f6e40312","guide_vue3_env.md":"b928542e","guide_vue3_ui.md":"385fc808","guide_vue3_viewport.md":"0ef62fba","guide_vue3_router.md":"84936a90","guide_vue2_lint.md":"94bcc728","guide_vue2_axios.md":"f273628e","guide_vue2_externals.md":"6744fb41","guide_vue3_vite.md":"7a4b4162","index.md":"b1dbb931","guide_vue2_ie.md":"f5d567e9"} diff --git a/index.html b/index.html index fa58f5c..0ee9114 100644 --- a/index.html +++ b/index.html @@ -5,18 +5,18 @@ Vue-H5-Template | 一个快速开发的vue h5移动端脚手架 - + - +
Skip to content

Vue-H5-Template

一个快速开发的Vue H5移动端脚手架

sunnie
💡

开箱即用

集成vue2、vue3的移动端快速开发模版,学习成本低,易上手

📦

代码规范

完整的eslint、prettier、stylelint规范,加上husky,帮助你更好的管理代码

🛠️

配置优化

完整配置的vue脚手架插件和优化,让你专注于业务开发,更高效

⚙️

More

加入我们,更多能力等你挖掘....

Released under the MIT License.

-