mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-05 19:42:08 +08:00
deploy: 00dc099b2382879009a92040ebc5633f743d47f4
This commit is contained in:
fonghehe
parent
83ebe1083c
commit
716a155bd4
1
assets/app.88821414.js
Normal file
1
assets/app.88821414.js
Normal file
@ -0,0 +1 @@
|
||||
import{M as s,a4 as p,a5 as i,a6 as u,a7 as c,a8 as l,a9 as d,aa as f,ab as m,ac as h,ad as A,J as g,d as P,u as v,p as y,k as C,ae as w,af as _,ag as b,ah as E}from"./chunks/framework.6241eaf2.js";import{t as R}from"./chunks/theme.c4d303ac.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(R),D=P({name:"VitePressApp",setup(){const{site:e}=v();return y(()=>{C(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),w(),_(),b(),n.setup&&n.setup(),()=>E(n.Layout)}});async function O(){const e=T(),a=S();a.provide(i,e);const t=u(e.route);return a.provide(c,t),a.component("Content",l),a.component("ClientOnly",d),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:f}),{app:a,router:e,data:t}}function S(){return m(D)}function T(){let e=s,a;return h(t=>{let o=A(t);return e&&(a=o),(e||a===o)&&(o=o.replace(/\.js$/,".lean.js")),s&&(e=!1),g(()=>import(o),[])},n.NotFound)}s&&O().then(({app:e,router:a,data:t})=>{a.go().then(()=>{p(a.route,t.site),e.mount("#app")})});export{O as createApp};
|
||||
@ -1 +0,0 @@
|
||||
import{d as p,K as s,a3 as i,u,h as c,l,a4 as d,a5 as f,a6 as m,a7 as h,a8 as A,a9 as g,aa as P,ab as v,ac as y,ad as C,ae as w,af as _,ag as b,H as E}from"./chunks/framework.522debca.js";import{t as R}from"./chunks/theme.c3b80f96.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(R),D=p({name:"VitePressApp",setup(){const{site:e}=u();return c(()=>{l(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),d(),f(),m(),n.setup&&n.setup(),()=>h(n.Layout)}});async function O(){const e=T(),a=S();a.provide(A,e);const t=g(e.route);return a.provide(P,t),a.component("Content",v),a.component("ClientOnly",y),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:C}),{app:a,router:e,data:t}}function S(){return w(D)}function T(){let e=s,a;return _(t=>{let o=b(t);return e&&(a=o),(e||a===o)&&(o=o.replace(/\.js$/,".lean.js")),s&&(e=!1),E(()=>import(o),[])},n.NotFound)}s&&O().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{O as createApp};
|
||||
File diff suppressed because one or more lines are too long
14
assets/chunks/VPAlgoliaSearchBox.81ddc2b4.js
Normal file
14
assets/chunks/VPAlgoliaSearchBox.81ddc2b4.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
assets/chunks/framework.6241eaf2.js
Normal file
2
assets/chunks/framework.6241eaf2.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
7
assets/chunks/theme.c4d303ac.js
Normal file
7
assets/chunks/theme.c4d303ac.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/guide_about_index.md.253c741c.js
Normal file
1
assets/guide_about_index.md.253c741c.js
Normal file
@ -0,0 +1 @@
|
||||
import"./chunks/theme.c4d303ac.js";import{_ as s,o as a,c as d,O as n,Q as c,z as t}from"./chunks/framework.6241eaf2.js";const o=e=>(n("data-v-b936db02"),e=e(),c(),e),p=o(()=>t("p",{style:{"margin-bottom":"50px"}},[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/account.jpg",width:"300"})],-1)),_=o(()=>t("p",null,[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/group.jpg",width:"300"})],-1)),i=[p,_],b=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"guide/about/index.md","filePath":"guide/about/index.md","lastUpdated":1685617392000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(u,h)=>(a(),d("div",null,i))}}),x=s(l,[["__scopeId","data-v-b936db02"]]);export{b as __pageData,x as default};
|
||||
1
assets/guide_about_index.md.253c741c.lean.js
Normal file
1
assets/guide_about_index.md.253c741c.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import"./chunks/theme.c4d303ac.js";import{_ as s,o as a,c as d,O as n,Q as c,z as t}from"./chunks/framework.6241eaf2.js";const o=e=>(n("data-v-b936db02"),e=e(),c(),e),p=o(()=>t("p",{style:{"margin-bottom":"50px"}},[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/account.jpg",width:"300"})],-1)),_=o(()=>t("p",null,[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/group.jpg",width:"300"})],-1)),i=[p,_],b=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"guide/about/index.md","filePath":"guide/about/index.md","lastUpdated":1685617392000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(u,h)=>(a(),d("div",null,i))}}),x=s(l,[["__scopeId","data-v-b936db02"]]);export{b as __pageData,x as default};
|
||||
@ -1 +0,0 @@
|
||||
import"./chunks/theme.c3b80f96.js";import{o,c as a,_ as d,N as c,O as n,x as t}from"./chunks/framework.522debca.js";const s=e=>(c("data-v-e2ed34b6"),e=e(),n(),e),p=s(()=>t("p",{style:{"margin-bottom":"50px"}},[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/account.jpg",width:"300"})],-1)),_=s(()=>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","lastUpdated":1679905840000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(h,u)=>(o(),a("div",null,i))}}),f=d(l,[["__scopeId","data-v-e2ed34b6"]]);export{x as __pageData,f as default};
|
||||
@ -1 +0,0 @@
|
||||
import"./chunks/theme.c3b80f96.js";import{o,c as a,_ as d,N as c,O as n,x as t}from"./chunks/framework.522debca.js";const s=e=>(c("data-v-e2ed34b6"),e=e(),n(),e),p=s(()=>t("p",{style:{"margin-bottom":"50px"}},[t("img",{src:"https://cdn.jsdelivr.net/gh/fonghehe/picture/personal/account.jpg",width:"300"})],-1)),_=s(()=>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","lastUpdated":1679905840000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(h,u)=>(o(),a("div",null,i))}}),f=d(l,[["__scopeId","data-v-e2ed34b6"]]);export{x as __pageData,f as default};
|
||||
11
assets/guide_edit.md.2f737706.js
Normal file
11
assets/guide_edit.md.2f737706.js
Normal file
@ -0,0 +1,11 @@
|
||||
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":1685617392000}'),t={name:"guide/edit.md"},l=e(`<h1 id="参与编辑" tabindex="-1">参与编辑 <a class="header-anchor" href="#参与编辑" aria-label="Permalink to "参与编辑""></a></h1><p>欢迎有意愿参与到开源的朋友，加入到本文档的编写，书写文档不仅是教会别人知识，更是用自己的表达方式概括自己所学习知识的一种方式，这对个人来说是不可多得的成长机会。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 拉取项目</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">git clone </span><span style="color:#FFCB6B;">https</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//github.com/sunniejs/vue-h5-template</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 切换分支</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">git checkout </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">b docs origin</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">docs</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 安装依赖</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">yarn install</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 启动项目</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">yarn start</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_edit.md.2f737706.lean.js
Normal file
1
assets/guide_edit.md.2f737706.lean.js
Normal file
@ -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/edit.md","filePath":"guide/edit.md","lastUpdated":1685617392000}'),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};
|
||||
@ -1,14 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const C=JSON.parse('{"title":"参与编辑","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","lastUpdated":1679905840000}'),e={name:"guide/edit.md"},t=l(`<h1 id="参与编辑" tabindex="-1">参与编辑 <a class="header-anchor" href="#参与编辑" aria-label="Permalink to "参与编辑""></a></h1><p>欢迎有意愿参与到开源的朋友，加入到本文档的编写，书写文档不仅是教会别人知识，更是用自己的表达方式概括自己所学习知识的一种方式，这对个人来说是不可多得的成长机会。</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 拉取项目</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">git clone </span><span style="color:#FFCB6B;">https</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//github.com/sunniejs/vue-h5-template</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 切换分支</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">git checkout </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">b docs origin</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">docs</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 安装依赖</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">yarn install</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 启动项目</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">yarn start</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span></code></pre></div>`,3),p=[t];function o(c,i,r,d,_,y){return a(),n("div",null,p)}const u=s(e,[["render",o]]);export{C as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const C=JSON.parse('{"title":"参与编辑","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","lastUpdated":1679905840000}'),e={name:"guide/edit.md"},t=l("",3),p=[t];function o(c,i,r,d,_,y){return a(),n("div",null,p)}const u=s(e,[["render",o]]);export{C as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as t,Q as i}from"./chunks/framework.522debca.js";const m=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","lastUpdated":1679905840000}'),r={name:"guide/index.md"},l=i('<h1 id="vue-h5-template" tabindex="-1">Vue-H5-Template <a class="header-anchor" href="#vue-h5-template" aria-label="Permalink to "Vue-H5-Template""></a></h1><p><a href="https://github.com/sunniejs/vue-h5-template" target="_blank" rel="noreferrer">Vue-H5-Template</a>，是基于 vite3 + vue3 + pinia + ( Vant or Varlet or NutUI ) + viewport 适配方案 ，构建移动端快速开发脚手架</p><h2 id="特点" tabindex="-1">特点 <a class="header-anchor" href="#特点" aria-label="Permalink to "特点""></a></h2><h3 id="最新技术栈" tabindex="-1">最新技术栈 <a class="header-anchor" href="#最新技术栈" aria-label="Permalink to "最新技术栈""></a></h3><ul><li>框架选型基于当下流行的 vue + vite + ts 模式，精选社区 star 和满意度均不错的 ui 框架和 vite 插件，并时常进行更新，确保与官方文档一致</li></ul><h3 id="基于-typescript" tabindex="-1">基于 TypeScript <a class="header-anchor" href="#基于-typescript" aria-label="Permalink to "基于 TypeScript""></a></h3><ul><li>Typescript 逐渐在各种大型的 js 项目中使用，明确的类型定义可以省下不少的开发和维护成本</li></ul><h3 id="轻量级" tabindex="-1">轻量级 <a class="header-anchor" href="#轻量级" aria-label="Permalink to "轻量级""></a></h3><ul><li>不同于集成的脚手架，尽量做到轻量不冗杂，只引入高频次的插件和清晰的示例</li><li>轻装上阵，便于拓展开发，减少学习成本</li></ul><h3 id="通俗易懂的文档" tabindex="-1">通俗易懂的文档 <a class="header-anchor" href="#通俗易懂的文档" aria-label="Permalink to "通俗易懂的文档""></a></h3><ul><li>基于最新 VitePress 构建的文档，更快，更便捷</li><li>更快的热更新</li></ul>',11),o=[l];function n(s,h,u,c,d,p){return a(),t("div",null,o)}const f=e(r,[["render",n]]);export{m as __pageData,f as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as t,Q as i}from"./chunks/framework.522debca.js";const m=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md","lastUpdated":1679905840000}'),r={name:"guide/index.md"},l=i("",11),o=[l];function n(s,h,u,c,d,p){return a(),t("div",null,o)}const f=e(r,[["render",n]]);export{m as __pageData,f as default};
|
||||
1
assets/guide_index.md.8916baf2.js
Normal file
1
assets/guide_index.md.8916baf2.js
Normal file
@ -0,0 +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":1685617392000}'),r={name:"guide/index.md"},l=i('<h1 id="vue-h5-template" tabindex="-1">Vue-H5-Template <a class="header-anchor" href="#vue-h5-template" aria-label="Permalink to "Vue-H5-Template""></a></h1><p><a href="https://github.com/sunniejs/vue-h5-template" target="_blank" rel="noreferrer">Vue-H5-Template</a>，是基于 vite3 + vue3 + pinia + ( Vant or Varlet or NutUI ) + viewport 适配方案 ，构建移动端快速开发脚手架</p><h2 id="特点" tabindex="-1">特点 <a class="header-anchor" href="#特点" aria-label="Permalink to "特点""></a></h2><h3 id="最新技术栈" tabindex="-1">最新技术栈 <a class="header-anchor" href="#最新技术栈" aria-label="Permalink to "最新技术栈""></a></h3><ul><li>框架选型基于当下流行的 vue + vite + ts 模式，精选社区 star 和满意度均不错的 ui 框架和 vite 插件，并时常进行更新，确保与官方文档一致</li></ul><h3 id="基于-typescript" tabindex="-1">基于 TypeScript <a class="header-anchor" href="#基于-typescript" aria-label="Permalink to "基于 TypeScript""></a></h3><ul><li>Typescript 逐渐在各种大型的 js 项目中使用，明确的类型定义可以省下不少的开发和维护成本</li></ul><h3 id="轻量级" tabindex="-1">轻量级 <a class="header-anchor" href="#轻量级" aria-label="Permalink to "轻量级""></a></h3><ul><li>不同于集成的脚手架，尽量做到轻量不冗杂，只引入高频次的插件和清晰的示例</li><li>轻装上阵，便于拓展开发，减少学习成本</li></ul><h3 id="通俗易懂的文档" tabindex="-1">通俗易懂的文档 <a class="header-anchor" href="#通俗易懂的文档" aria-label="Permalink to "通俗易懂的文档""></a></h3><ul><li>基于最新 VitePress 构建的文档，更快，更便捷</li><li>更快的热更新</li></ul>',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};
|
||||
1
assets/guide_index.md.8916baf2.lean.js
Normal file
1
assets/guide_index.md.8916baf2.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
1
assets/guide_other_index.md.24383439.js
Normal file
1
assets/guide_other_index.md.24383439.js
Normal file
@ -0,0 +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":1685617392000}'),o={name:"guide/other/index.md"},i=r('<h3 id="_1、为什么有多个组件库" tabindex="-1">1、为什么有多个组件库？ <a class="header-anchor" href="#_1、为什么有多个组件库" aria-label="Permalink to "1、为什么有多个组件库？""></a></h3><p>本模版想做到的是尽可能的开箱即用，不用去看别的文档引入相关组件库，毕竟做减法比做加法要容易些，如你不需要某个组件库可以根据<a href="/vue-h5-template/guide/vue3/ui.html">这篇指引</a>去移除某个组件库</p><h3 id="_2、我可以用在个人或公司的项目吗" tabindex="-1">2、我可以用在个人或公司的项目吗？ <a class="header-anchor" href="#_2、我可以用在个人或公司的项目吗" aria-label="Permalink to "2、我可以用在个人或公司的项目吗？""></a></h3><p>模版基于 MIT License,你可以根据自己的需求用到不同的项目里，如果对你有帮助点个 star 支持一下呗 🌟</p><h3 id="_3、我是一个新手-有什么好的学习建议吗" tabindex="-1">3、我是一个新手，有什么好的学习建议吗？ <a class="header-anchor" href="#_3、我是一个新手-有什么好的学习建议吗" aria-label="Permalink to "3、我是一个新手，有什么好的学习建议吗？""></a></h3><p>过来人的经验就是熟读文档可以少走很多弯路，很多的人文档没读熟就开始动手，出了问题也不知道如何去解决，墙裂建议先把<a href="https://cn.vuejs.org/" target="_blank" rel="noreferrer">文档</a>熟读</p>',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};
|
||||
1
assets/guide_other_index.md.24383439.lean.js
Normal file
1
assets/guide_other_index.md.24383439.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as t,Q as r}from"./chunks/framework.522debca.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/other/index.md","lastUpdated":1679905840000}'),o={name:"guide/other/index.md"},n=r('<h3 id="_1、为什么有多个组件库" tabindex="-1">1、为什么有多个组件库？ <a class="header-anchor" href="#_1、为什么有多个组件库" aria-label="Permalink to "1、为什么有多个组件库？""></a></h3><p>本模版想做到的是尽可能的开箱即用，不用去看别的文档引入相关组件库，毕竟做减法比做加法要容易些，如你不需要某个组件库可以根据<a href="/vue-h5-template/guide/vue3/ui.html">这篇指引</a>去移除某个组件库</p><h3 id="_2、我可以用在个人或公司的项目吗" tabindex="-1">2、我可以用在个人或公司的项目吗？ <a class="header-anchor" href="#_2、我可以用在个人或公司的项目吗" aria-label="Permalink to "2、我可以用在个人或公司的项目吗？""></a></h3><p>模版基于 MIT License,你可以根据自己的需求用到不同的项目里，如果对你有帮助点个 star 支持一下呗 🌟</p><h3 id="_3、我是一个新手-有什么好的学习建议吗" tabindex="-1">3、我是一个新手，有什么好的学习建议吗？ <a class="header-anchor" href="#_3、我是一个新手-有什么好的学习建议吗" aria-label="Permalink to "3、我是一个新手，有什么好的学习建议吗？""></a></h3><p>过来人的经验就是熟读文档可以少走很多弯路，很多的人文档没读熟就开始动手，出了问题也不知道如何去解决，墙裂建议先把<a href="https://cn.vuejs.org/" target="_blank" rel="noreferrer">文档</a>熟读</p>',6),_=[n];function i(s,d,c,h,l,p){return a(),t("div",null,_)}const m=e(o,[["render",i]]);export{f as __pageData,m as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as t,Q as r}from"./chunks/framework.522debca.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/other/index.md","lastUpdated":1679905840000}'),o={name:"guide/other/index.md"},n=r("",6),_=[n];function i(s,d,c,h,l,p){return a(),t("div",null,_)}const m=e(o,[["render",i]]);export{f as __pageData,m as default};
|
||||
1
assets/guide_start.md.73063b28.js
Normal file
1
assets/guide_start.md.73063b28.js
Normal file
@ -0,0 +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":1685617392000}'),n={name:"guide/start.md"},o=r('<h1 id="快速上手" tabindex="-1">快速上手 <a class="header-anchor" href="#快速上手" aria-label="Permalink to "快速上手""></a></h1><h2 id="node-版本要求" tabindex="-1">node 版本要求 <a class="header-anchor" href="#node-版本要求" aria-label="Permalink to "node 版本要求""></a></h2><p>推荐 16.17.0+以上的版本，毕竟 2022 年了，别掐着 12+的版本了，你也可以使用<a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noreferrer">nvm</a>或<a href="https://github.com/coreybutler/nvm-windows" target="_blank" rel="noreferrer">nvm-windows</a>在同一台电脑上管理多个 node 版本。</p><h2 id="包管理器" tabindex="-1">包管理器 <a class="header-anchor" href="#包管理器" aria-label="Permalink to "包管理器""></a></h2><p>尽量使用 yarn 或者 pnpm，本项目仅保证在 yarn 或 pnpm 下正确运行，npm 涉及到网络环境等各种情况的限制不做过多考虑。如要使用 npm 请不要切换淘宝镜像，会有各种奇怪的 bug。</p><h2 id="启动项目" tabindex="-1">启动项目 <a class="header-anchor" href="#启动项目" aria-label="Permalink to "启动项目""></a></h2><p>项目中包含 vue2 和 vue3 两套模版</p><p>如你使用的是 vue2-template，请参考<a href="./vue2/start.html">vue2 项目启动</a></p><p>如你使用的是 vue3-template，请参考<a href="./vue3/start.html">vue3 项目启动</a></p>',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};
|
||||
1
assets/guide_start.md.73063b28.lean.js
Normal file
1
assets/guide_start.md.73063b28.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as t,Q as r}from"./chunks/framework.522debca.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start.md","lastUpdated":1679905840000}'),n={name:"guide/start.md"},o=r('<h1 id="快速上手" tabindex="-1">快速上手 <a class="header-anchor" href="#快速上手" aria-label="Permalink to "快速上手""></a></h1><h2 id="node-版本要求" tabindex="-1">node 版本要求 <a class="header-anchor" href="#node-版本要求" aria-label="Permalink to "node 版本要求""></a></h2><p>推荐 14.19.0+以上的版本，毕竟 2022 年了，别掐着 12+的版本了，你也可以使用<a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noreferrer">nvm</a>或<a href="https://github.com/coreybutler/nvm-windows" target="_blank" rel="noreferrer">nvm-windows</a>在同一台电脑上管理多个 node 版本。</p><h2 id="包管理器" tabindex="-1">包管理器 <a class="header-anchor" href="#包管理器" aria-label="Permalink to "包管理器""></a></h2><p>尽量使用 yarn 或者 pnpm，本项目仅保证在 yarn 或 pnpm 下正确运行，npm 涉及到网络环境等各种情况的限制不做过多考虑。如要使用 npm 请不要切换淘宝镜像，会有各种奇怪的 bug。</p><h2 id="启动项目" tabindex="-1">启动项目 <a class="header-anchor" href="#启动项目" aria-label="Permalink to "启动项目""></a></h2><p>项目中包含 vue2 和 vue3 两套模版</p><p>如你使用的是 vue2-template，请参考<a href="./vue2/start.html">vue2 项目启动</a></p><p>如你使用的是 vue3-template，请参考<a href="./vue3/start.html">vue3 项目启动</a></p>',9),s=[o];function h(d,i,l,p,c,_){return a(),t("div",null,s)}const f=e(n,[["render",h]]);export{u as __pageData,f as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as t,Q as r}from"./chunks/framework.522debca.js";const u=JSON.parse('{"title":"快速上手","description":"","frontmatter":{},"headers":[],"relativePath":"guide/start.md","lastUpdated":1679905840000}'),n={name:"guide/start.md"},o=r("",9),s=[o];function h(d,i,l,p,c,_){return a(),t("div",null,s)}const f=e(n,[["render",h]]);export{u as __pageData,f as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as o}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"配置 alias 别名","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","lastUpdated":1679905840000}'),l={name:"guide/vue2/alias.md"},p=o(`<h1 id="配置-alias-别名" tabindex="-1">配置 alias 别名 <a class="header-anchor" href="#配置-alias-别名" aria-label="Permalink to "配置 alias 别名""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> path </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">path</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
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":1685617392000}'),l={name:"guide/vue2/alias.md"},p=o(`<h1 id="配置-alias-别名" tabindex="-1">配置 alias 别名 <a class="header-anchor" href="#配置-alias-别名" aria-label="Permalink to "配置 alias 别名""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> path </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">path</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> resolve </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">dir</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> path</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">join</span><span style="color:#A6ACCD;">(__dirname</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> dir)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> IS_PROD </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">NODE_ENV)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
@ -12,5 +12,4 @@ import{_ as s,o as a,c as n,Q as o}from"./chunks/framework.522debca.js";const i=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">views</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">src/views</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">))</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">set</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">components</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">src/components</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_alias.md.8e3eac08.lean.js
Normal file
1
assets/guide_vue2_alias.md.8e3eac08.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as o}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"配置 alias 别名","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const C=JSON.parse('{"title":"Axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/axios.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const C=JSON.parse('{"title":"Axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/axios.md","lastUpdated":1679905840000}'),o={name:"guide/vue2/axios.md"},p=l(`<h1 id="axios-封装及接口管理" tabindex="-1">Axios 封装及接口管理 <a class="header-anchor" href="#axios-封装及接口管理" aria-label="Permalink to "Axios 封装及接口管理""></a></h1><p><code>utils/request.js</code> 封装 axios ,开发者需要根据后台接口做修改。</p><ul><li><code>service.interceptors.request.use</code> 里可以设置请求头，比如设置 <code>token</code></li><li><code>config.hideloading</code> 是在 api 文件夹下的接口参数里设置，下文会讲</li><li><code>service.interceptors.response.use</code> 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> axios </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">axios</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
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":1685617392000}'),o={name:"guide/vue2/axios.md"},p=l(`<h1 id="axios-封装及接口管理" tabindex="-1">Axios 封装及接口管理 <a class="header-anchor" href="#axios-封装及接口管理" aria-label="Permalink to "Axios 封装及接口管理""></a></h1><p><code>utils/request.js</code> 封装 axios ,开发者需要根据后台接口做修改。</p><ul><li><code>service.interceptors.request.use</code> 里可以设置请求头，比如设置 <code>token</code></li><li><code>config.hideloading</code> 是在 api 文件夹下的接口参数里设置，下文会讲</li><li><code>service.interceptors.response.use</code> 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> axios </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">axios</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/store</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Toast</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 根据环境不同引入不同api地址</span></span>
|
||||
@ -54,8 +54,7 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const C=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reject</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> service</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div><h4 id="接口管理" tabindex="-1">接口管理 <a class="header-anchor" href="#接口管理" aria-label="Permalink to "接口管理""></a></h4><p>在<code>src/api</code> 文件夹下统一管理接口</p><ul><li>你可以建立多个模块对接接口, 比如 <code>home.js</code> 里是首页的接口这里讲解 <code>user.js</code></li><li><code>url</code> 接口地址，请求的时候会拼接上 <code>config</code> 下的 <code>baseApi</code></li><li><code>method</code> 请求方法</li><li><code>data</code> 请求参数 <code>qs.stringify(params)</code> 是对数据系列化操作</li><li><code>hideloading</code> 默认 <code>false</code>,设置为 <code>true</code> 后，不显示 loading ui 交互中有些接口不需要让用户感知</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> qs </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">qs</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> service</span><span style="color:#89DDFF;">;</span></span></code></pre></div><h4 id="接口管理" tabindex="-1">接口管理 <a class="header-anchor" href="#接口管理" aria-label="Permalink to "接口管理""></a></h4><p>在<code>src/api</code> 文件夹下统一管理接口</p><ul><li>你可以建立多个模块对接接口, 比如 <code>home.js</code> 里是首页的接口这里讲解 <code>user.js</code></li><li><code>url</code> 接口地址，请求的时候会拼接上 <code>config</code> 下的 <code>baseApi</code></li><li><code>method</code> 请求方法</li><li><code>data</code> 请求参数 <code>qs.stringify(params)</code> 是对数据系列化操作</li><li><code>hideloading</code> 默认 <code>false</code>,设置为 <code>true</code> 后，不显示 loading ui 交互中有些接口不需要让用户感知</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> qs </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">qs</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// axios</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> request </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/utils/request</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">//user api</span></span>
|
||||
@ -68,12 +67,10 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const C=
|
||||
<span class="line"><span style="color:#F07178;"> data</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">qs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">params</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> hideloading</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 隐藏 loading 组件</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div><h4 id="如何调用" tabindex="-1">如何调用 <a class="header-anchor" href="#如何调用" aria-label="Permalink to "如何调用""></a></h4><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 请求接口</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h4 id="如何调用" tabindex="-1">如何调用 <a class="header-anchor" href="#如何调用" aria-label="Permalink to "如何调用""></a></h4><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 请求接口</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">getUserInfo</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/api/user.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> params </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">user</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">sunnie</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#82AAFF;">getUserInfo</span><span style="color:#A6ACCD;">(params)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">)</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_axios.md.3e1f1726.lean.js
Normal file
1
assets/guide_vue2_axios.md.3e1f1726.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1,6 +1,4 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"Webpack 4 vue.config.js 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/base.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/base.md"},o=l(`<h1 id="webpack-4-vue-config-js-基础配置" tabindex="-1">Webpack 4 vue.config.js 基础配置 <a class="header-anchor" href="#webpack-4-vue-config-js-基础配置" aria-label="Permalink to "Webpack 4 vue.config.js 基础配置""></a></h1><p>如果你的 <code>Vue Router</code> 模式是 hash</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span></code></pre></div><p>如果你的 <code>Vue Router</code> 模式是 history 这里的 publicPath 和你的 <code>Vue Router</code> <code>base</code> <strong>保持一致</strong></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/app/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span></code></pre></div><p>配置如下</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createVitePlugins</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./config/vite/plugins</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue2/base.md"},o=l(`<h1 id="webpack-4-vue-config-js-基础配置" tabindex="-1">Webpack 4 vue.config.js 基础配置 <a class="header-anchor" href="#webpack-4-vue-config-js-基础配置" aria-label="Permalink to "Webpack 4 vue.config.js 基础配置""></a></h1><p>如果你的 <code>Vue Router</code> 模式是 hash</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span></code></pre></div><p>如果你的 <code>Vue Router</code> 模式是 history 这里的 publicPath 和你的 <code>Vue Router</code> <code>base</code> <strong>保持一致</strong></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/app/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span></code></pre></div><p>配置如下</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createVitePlugins</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./config/vite/plugins</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">resolve</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">path</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">ConfigEnv</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">UserConfigExport</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vite</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
@ -46,5 +44,4 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const A=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_base.md.464b144c.lean.js
Normal file
1
assets/guide_vue2_base.md.464b144c.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"Webpack 4 vue.config.js 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/base.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const C=JSON.parse('{"title":"配置打包分析","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/bundle.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/bundle.md"},o=l(`<h1 id="配置打包分析" tabindex="-1">配置打包分析 <a class="header-anchor" href="#配置打包分析" aria-label="Permalink to "配置打包分析""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> BundleAnalyzerPlugin </span><span style="color:#89DDFF;">=</span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue2/bundle.md"},o=l(`<h1 id="配置打包分析" tabindex="-1">配置打包分析 <a class="header-anchor" href="#配置打包分析" aria-label="Permalink to "配置打包分析""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> BundleAnalyzerPlugin </span><span style="color:#89DDFF;">=</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">webpack-bundle-analyzer</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">BundleAnalyzerPlugin</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -12,6 +12,4 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const C=
|
||||
<span class="line"><span style="color:#F07178;"> ])</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">build</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">run</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">build</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_bundle.md.d9d24eef.lean.js
Normal file
1
assets/guide_vue2_bundle.md.d9d24eef.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const C=JSON.parse('{"title":"配置打包分析","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/bundle.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const u=JSON.parse('{"title":"splitChunks 单独打包第三方模块","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/chunks.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/chunks.md"},o=l(`<h1 id="splitchunks-单独打包第三方模块" tabindex="-1">splitChunks 单独打包第三方模块 <a class="header-anchor" href="#splitchunks-单独打包第三方模块" aria-label="Permalink to "splitChunks 单独打包第三方模块""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue2/chunks.md"},o=l(`<h1 id="splitchunks-单独打包第三方模块" tabindex="-1">splitChunks 单独打包第三方模块 <a class="header-anchor" href="#splitchunks-单独打包第三方模块" aria-label="Permalink to "splitChunks 单独打包第三方模块""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">chainWebpack</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">config</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">when</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">IS_PROD</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">config</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">config</span></span>
|
||||
@ -38,5 +38,4 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const u=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">optimization</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">runtimeChunk</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">single</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_chunks.md.0a3d1312.lean.js
Normal file
1
assets/guide_vue2_chunks.md.0a3d1312.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const u=JSON.parse('{"title":"splitChunks 单独打包第三方模块","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/chunks.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"去掉 console.log","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/console.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,5 +1,4 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"去掉 console.log","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/console.md","lastUpdated":1679905840000}'),o={name:"guide/vue2/console.md"},p=l(`<h1 id="去掉-console-log" tabindex="-1">去掉 console.log <a class="header-anchor" href="#去掉-console-log" aria-label="Permalink to "去掉 console.log""></a></h1><p>保留了测试环境和本地环境的 <code>console.log</code></p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">babel-plugin-transform-remove-console</span></span>
|
||||
<span class="line"></span></code></pre></div><p>在 babel.config.js 中配置</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console</span></span>
|
||||
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":1685617392000}'),o={name:"guide/vue2/console.md"},p=l(`<h1 id="去掉-console-log" tabindex="-1">去掉 console.log <a class="header-anchor" href="#去掉-console-log" aria-label="Permalink to "去掉 console.log""></a></h1><p>保留了测试环境和本地环境的 <code>console.log</code></p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">babel-plugin-transform-remove-console</span></span></code></pre></div><p>在 babel.config.js 中配置</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 获取 VUE_APP_ENV 非 NODE_ENV，测试环境依然 console</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> IS_PROD </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">VUE_APP_ENV)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> plugins </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> [</span></span>
|
||||
@ -20,5 +19,4 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const i=
|
||||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">presets</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@vue/cli-plugin-babel/preset</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">useBuiltIns</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">entry</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> plugins</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_console.md.d624aac3.lean.js
Normal file
1
assets/guide_vue2_console.md.d624aac3.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"配置多环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","lastUpdated":1679905840000}'),o={name:"guide/vue2/env.md"},p=l("",21),e=[p];function t(c,r,D,y,i,F){return a(),n("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
|
||||
@ -1,30 +1,22 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"配置多环境变量","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","lastUpdated":1679905840000}'),o={name:"guide/vue2/env.md"},p=l(`<h1 id="配置多环境变量" tabindex="-1">配置多环境变量 <a class="header-anchor" href="#配置多环境变量" aria-label="Permalink to "配置多环境变量""></a></h1><p><code>package.json</code> 里的 <code>scripts</code> 配置 <code>serve</code> <code>stage</code> <code>build</code>，通过 <code>--mode xxx</code> 来执行不同环境</p><ul><li>通过 <code>npm run serve</code> 启动本地 , 执行 <code>development</code></li><li>通过 <code>npm run stage</code> 打包测试 , 执行 <code>staging</code></li><li>通过 <code>npm run build</code> 打包正式 , 执行 <code>production</code></li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scripts</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
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":1685617392000}'),l={name:"guide/vue2/env.md"},p=o(`<h1 id="配置多环境变量" tabindex="-1">配置多环境变量 <a class="header-anchor" href="#配置多环境变量" aria-label="Permalink to "配置多环境变量""></a></h1><p><code>package.json</code> 里的 <code>scripts</code> 配置 <code>serve</code> <code>stage</code> <code>build</code>，通过 <code>--mode xxx</code> 来执行不同环境</p><ul><li>通过 <code>npm run serve</code> 启动本地 , 执行 <code>development</code></li><li>通过 <code>npm run stage</code> 打包测试 , 执行 <code>staging</code></li><li>通过 <code>npm run build</code> 打包正式 , 执行 <code>production</code></li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scripts</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">serve</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue-cli-service serve --open</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">stage</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue-cli-service build --mode staging</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue-cli-service build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div><h5 id="配置介绍" tabindex="-1">配置介绍 <a class="header-anchor" href="#配置介绍" aria-label="Permalink to "配置介绍""></a></h5><p> 以 <code>VUE_APP_</code> 开头的变量，在代码中可以通过 <code>p<wbr>rocess.env.VUE_APP_</code> 访问。<br> 比如,<code>VUE_APP_ENV = 'development'</code> 通过<code>p<wbr>rocess.env.VUE_APP_ENV</code> 访问。<br> 除了 <code>VUE_APP_*</code> 变量之外，在你的应用代码中始终可用的还有两个特殊的变量<code>NODE_ENV</code> 和<code>BASE_URL</code></p><p>在项目根目录中新建<code>.env.*</code></p><ul><li>.env.development 本地开发环境配置</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h5 id="配置介绍" tabindex="-1">配置介绍 <a class="header-anchor" href="#配置介绍" aria-label="Permalink to "配置介绍""></a></h5><p> 以 <code>VUE_APP_</code> 开头的变量，在代码中可以通过 <code>p<wbr>rocess.env.VUE_APP_</code> 访问。<br> 比如,<code>VUE_APP_ENV = 'development'</code> 通过<code>p<wbr>rocess.env.VUE_APP_ENV</code> 访问。<br> 除了 <code>VUE_APP_*</code> 变量之外，在你的应用代码中始终可用的还有两个特殊的变量<code>NODE_ENV</code> 和<code>BASE_URL</code></p><p>在项目根目录中新建<code>.env.*</code></p><ul><li>.env.development 本地开发环境配置</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># must start with VUE_APP_</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">VUE_APP_ENV</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span></code></pre></div><ul><li>.env.staging 测试环境配置</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">VUE_APP_ENV</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">'</span></span></code></pre></div><ul><li>.env.staging 测试环境配置</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># must start with VUE_APP_</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">VUE_APP_ENV</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">staging</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span></code></pre></div><ul><li>.env.production 正式环境配置</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;"> NODE_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">VUE_APP_ENV</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">staging</span><span style="color:#89DDFF;">'</span></span></code></pre></div><ul><li>.env.production 正式环境配置</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"># must start with VUE_APP_</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">VUE_APP_ENV</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span></code></pre></div><p>这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV <code>development</code> <code>staging</code> <code>production</code><br> 变量我们统一在 <code>src/config/env.*.js</code> 里进行管理。</p><p>这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？<br><strong>修改起来方便，不需 要重启项目，符合开发习惯。</strong></p><p>config/index.js</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 根据环境引入不同配置 p<wbr>rocess.env.NODE_ENV</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">VUE_APP_ENV</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">'</span></span></code></pre></div><p>这里我们并没有定义很多变量，只定义了基础的 VUE_APP_ENV <code>development</code> <code>staging</code> <code>production</code><br> 变量我们统一在 <code>src/config/env.*.js</code> 里进行管理。</p><p>这里有个问题，既然这里有了根据不同环境设置变量的文件，为什么还要去 config 下新建三个对应的文件呢？<br><strong>修改起来方便，不需 要重启项目，符合开发习惯。</strong></p><p>config/index.js</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 根据环境引入不同配置 p<wbr>rocess.env.NODE_ENV</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> config </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./env.</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">VUE_APP_ENV)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> config</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div><p>配置对应环境的变量，拿本地环境文件 <code>env.development.js</code> 举例，用户可以根据需求修改</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 本地环境配置</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> config</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>配置对应环境的变量，拿本地环境文件 <code>env.development.js</code> 举例，用户可以根据需求修改</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 本地环境配置</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">title</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue-h5-template</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">baseUrl</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">http://localhost:9018</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 项目地址</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">baseApi</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://test.xxx.com/api</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 本地api请求地址</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">APPID</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">xxx</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">APPSECRET</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">xxx</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div><p>根据环境不同，变量就会不同了</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 根据环境不同引入不同baseApi地址</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>根据环境不同，变量就会不同了</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 根据环境不同引入不同baseApi地址</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">baseApi</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/config</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(baseApi)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div>`,21),e=[p];function t(c,r,D,y,i,F){return a(),n("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
|
||||
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(baseApi)</span><span style="color:#89DDFF;">;</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_env.md.6e6e570e.lean.js
Normal file
1
assets/guide_vue2_env.md.6e6e570e.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"配置 externals 引入 cdn 资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/externals.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/externals.md"},o=l(`<h1 id="配置-externals-引入-cdn-资源" tabindex="-1">配置 externals 引入 cdn 资源 <a class="header-anchor" href="#配置-externals-引入-cdn-资源" aria-label="Permalink to "配置 externals 引入 cdn 资源""></a></h1><p>这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可 以实际测试一下。</p><p>另外项目中使用的是公共 CDN 不稳定，域名解析也是需要时间的（如果你要使用请尽量使用同一个域名）</p><p>因为页面每次遇到<code><script></code>标签都会停下来解析执行，所以应该尽可能减少<code><script></code>标签的数量 <code>HTTP</code>请求存在一定的开销，100K 的文件比 5 个 20K 的文件下载的更快，所以较少脚本数量也是很有必要的</p><p>暂时还没有研究放到自己的 cdn 服务器上。</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> defaultSettings </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./src/config/index.js</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue2/externals.md"},o=l(`<h1 id="配置-externals-引入-cdn-资源" tabindex="-1">配置 externals 引入 cdn 资源 <a class="header-anchor" href="#配置-externals-引入-cdn-资源" aria-label="Permalink to "配置 externals 引入 cdn 资源""></a></h1><p>这个版本 CDN 不再引入，我测试了一下使用引入 CDN 和不使用,不使用会比使用时间少。网上不少文章测试 CDN 速度块，这个开发者可 以实际测试一下。</p><p>另外项目中使用的是公共 CDN 不稳定，域名解析也是需要时间的（如果你要使用请尽量使用同一个域名）</p><p>因为页面每次遇到<code><script></code>标签都会停下来解析执行，所以应该尽可能减少<code><script></code>标签的数量 <code>HTTP</code>请求存在一定的开销，100K 的文件比 5 个 20K 的文件下载的更快，所以较少脚本数量也是很有必要的</p><p>暂时还没有研究放到自己的 cdn 服务器上。</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> defaultSettings </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./src/config/index.js</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> name </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> defaultSettings</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">title </span><span style="color:#89DDFF;">||</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue mobile template</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> IS_PROD </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">NODE_ENV)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
@ -51,8 +51,7 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const i=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div><p>在 public/index.html 中添加</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><!--</span><span style="color:#A6ACCD;"> 使用CDN的CSS文件 </span><span style="color:#89DDFF;">--></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>在 public/index.html 中添加</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><!--</span><span style="color:#A6ACCD;"> 使用CDN的CSS文件 </span><span style="color:#89DDFF;">--></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> i </span><span style="color:#89DDFF;">in</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> htmlWebpackPlugin</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cdn</span><span style="color:#89DDFF;">&&</span><span style="color:#A6ACCD;">htmlWebpackPlugin</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cdn</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">css) </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">%></span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">link</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;"><%= htmlWebpackPlugin.options.cdn.css[i] %></span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">preload</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">as</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">style</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
@ -62,5 +61,4 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const i=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><%</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">for</span><span style="color:#A6ACCD;"> (</span><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> i </span><span style="color:#89DDFF;">in</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> htmlWebpackPlugin</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cdn</span><span style="color:#89DDFF;">&&</span><span style="color:#A6ACCD;">htmlWebpackPlugin</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">options</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cdn</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">js) </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">%></span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;"><%= htmlWebpackPlugin.options.cdn.js[i] %></span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><%</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">%></span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;"><%</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">%></span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_externals.md.81bec8dc.lean.js
Normal file
1
assets/guide_vue2_externals.md.81bec8dc.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"配置 externals 引入 cdn 资源","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/externals.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"添加 IE 兼容","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/ie.md","lastUpdated":1679905840000}'),e={name:"guide/vue2/ie.md"},o=l("",8),p=[o];function t(c,r,i,D,y,C){return a(),n("div",null,p)}const A=s(e,[["render",t]]);export{d as __pageData,A as default};
|
||||
@ -1,14 +1,11 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"添加 IE 兼容","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/ie.md","lastUpdated":1679905840000}'),e={name:"guide/vue2/ie.md"},o=l(`<h1 id="添加-ie-兼容" tabindex="-1">添加 IE 兼容 <a class="header-anchor" href="#添加-ie-兼容" aria-label="Permalink to "添加 IE 兼容""></a></h1><p>之前的方式 会报 <code>@babel/polyfill</code> is deprecated. Please, use required parts of <code>core-js</code> and <code>regenerator-runtime/runtime</code> separately</p><p><code>@babel/polyfill</code> 废弃，使用 <code>core-js</code> 和 <code>regenerator-runtime</code></p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">--save</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">core-js</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">regenerator-runtime</span></span>
|
||||
<span class="line"></span></code></pre></div><p>在 <code>main.js</code> 中添加</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 兼容 IE</span></span>
|
||||
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":1685617392000}'),o={name:"guide/vue2/ie.md"},l=e(`<h1 id="添加-ie-兼容" tabindex="-1">添加 IE 兼容 <a class="header-anchor" href="#添加-ie-兼容" aria-label="Permalink to "添加 IE 兼容""></a></h1><p>之前的方式 会报 <code>@babel/polyfill</code> is deprecated. Please, use required parts of <code>core-js</code> and <code>regenerator-runtime/runtime</code> separately</p><p><code>@babel/polyfill</code> 废弃，使用 <code>core-js</code> 和 <code>regenerator-runtime</code></p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">--save</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">core-js</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">regenerator-runtime</span></span></code></pre></div><p>在 <code>main.js</code> 中添加</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 兼容 IE</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">core-js/stable</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">regenerator-runtime/runtime</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div><p>配置 <code>babel.config.js</code></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> plugins </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">regenerator-runtime/runtime</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>配置 <code>babel.config.js</code></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> plugins </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> []</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">presets</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@vue/cli-plugin-babel/preset</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">useBuiltIns</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">usage</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">corejs</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> plugins</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div>`,8),p=[o];function t(c,r,i,D,y,C){return a(),n("div",null,p)}const A=s(e,[["render",t]]);export{d as __pageData,A as default};
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_ie.md.bf16d405.lean.js
Normal file
1
assets/guide_vue2_ie.md.bf16d405.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1,152 +0,0 @@
|
||||
import{_ as s,o as n,c as a,Q as o}from"./chunks/framework.522debca.js";const u=JSON.parse('{"title":"Eslint + Pettier 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/lint.md","lastUpdated":1679905840000}'),l={name:"guide/vue2/lint.md"},p=o(`<h1 id="eslint-pettier-统一开发规范" tabindex="-1">Eslint + Pettier 统一开发规范 <a class="header-anchor" href="#eslint-pettier-统一开发规范" aria-label="Permalink to "Eslint + Pettier 统一开发规范""></a></h1><p>VScode （版本 1.47.3）安装 <code>eslint</code> <code>prettier</code> <code>vetur</code> 插件 <code>.vue</code> 文件使用 vetur 进行格式化，其他使用<code>prettier</code>,后面会 专门写个如何使用配合使用这三个玩意</p><p>在文件 <code>.prettierrc</code> 里写 属于你的 pettier 规则</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">printWidth</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">120</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">tabWidth</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">singleQuote</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">trailingComma</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">semi</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">wrap_line_length</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">120</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">wrap_attributes</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">auto</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">proseWrap</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">always</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">arrowParens</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">avoid</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">bracketSpacing</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">jsxBracketSameLine</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">useTabs</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">overrides</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">[</span><span style="color:#A6ACCD;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">files</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">.prettierrc</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">options</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: {</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">parser</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span><span style="color:#89DDFF;">]</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div><p>Vscode setting.json 设置</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">将设置放入此文件中以覆盖默认设置</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">files.autoSave</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">off</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">控制字体系列。</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.fontFamily</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">Consolas, 'Courier New', monospace,'宋体'</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">terminal.integrated.shell.windows</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">C:</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">Program Files</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">Git</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">bin</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">bash.exe</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">以像素为单位控制字号。</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.fontSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">16</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">控制选取范围是否有圆角</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.roundedSelection</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">建议小组件的字号</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.suggestFontSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">16</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">在“打开的编辑器”窗格中显示的编辑器数量。将其设置为</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">可隐藏窗格。</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">explorer.openEditors.visible</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">是否已启用自动刷新</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">git.autorefresh</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">以像素为单位控制终端的字号，这是</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">editor.fontSize</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">的默认值。</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">terminal.integrated.fontSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">14</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">控制终端游标是否闪烁。</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">terminal.integrated.cursorBlinking</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">一个制表符等于的空格数。该设置在</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#FFCB6B;">editor.detectIndentation</span><span style="color:#89DDFF;">\`</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">启用时根据文件内容进行重写。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Tab</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Size</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.tabSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">By</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">default,</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">common</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">template.</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Do</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">not</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">modify</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">it!!!!!</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.formatOnType</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">window.zoomLevel</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.detectIndentation</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">css.fileExtensions</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">css</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">files.associations</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">*.string</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">*.vue</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">*.wxss</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">css</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">*.wxml</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">wxml</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">*.wxs</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">*.cjson</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">jsonc</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">*.js</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">为指定的语法定义配置文件或使用带有特定规则的配置文件。</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">emmet.syntaxProfiles</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vue-html</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">search.exclude</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">**/node_modules</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">**/bower_components</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//保存时eslint自动修复错误</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.formatOnSave</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Enable</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">per-language</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//配置</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">ESLint</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">检查的文件类型</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.quickSuggestions</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">strings</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">添加</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">vue</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">支持</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">这里是针对vue文件的格式化设置，vue的规则在这里生效</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.options.tabSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.options.useTabs</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.html</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">js-beautify-html</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.css</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.scss</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.postcss</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.less</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.js</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vscode-typescript</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.sass</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">sass-formatter</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.ts</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.format.defaultFormatterOptions</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">js-beautify-html</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">wrap_attributes</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">aligned-multiple</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">, // 超过150折行</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">wrap-line-length</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">150</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">#vue组件中html代码格式化样式</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">printWidth</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">120</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">tabWidth</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">singleQuote</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">trailingComma</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">semi</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">wrap_line_length</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">120</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">wrap_attributes</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">aligned-multiple</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">, // 超过150折行</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">proseWrap</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">always</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">arrowParens</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">avoid</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">bracketSpacing</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">jsxBracketSameLine</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">useTabs</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">overrides</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">[</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> {</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">files</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">.prettierrc</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">options</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: {</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">parser</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Enable</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">per-language</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">[json]</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">vetur.validation.template</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">html.format.enable</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">json.format.enable</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">javascript.format.enable</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">typescript.format.enable</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">false</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">[html]</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">[javascript]</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">[jsonc]</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">[vue]</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">octref.vetur</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">emmet.includeLanguages</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">wxml</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">[typescriptreact]</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">:</span><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">开启eslint自动修复js/ts功能</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.codeActionsOnSave</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">source.fixAll.eslint</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">minapp-vscode.disableAutoConfig</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">javascript.implicitProjectConfig.experimentalDecorators</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">true</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> "</span><span style="color:#C3E88D;">editor.maxTokenizationLineLength</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#F78C6C;">200000</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span></code></pre></div>`,6),t=[p];function e(D,c,r,y,F,C){return n(),a("div",null,t)}const i=s(l,[["render",e]]);export{u as __pageData,i as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,Q as o}from"./chunks/framework.522debca.js";const u=JSON.parse('{"title":"Eslint + Pettier 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/lint.md","lastUpdated":1679905840000}'),l={name:"guide/vue2/lint.md"},p=o("",6),t=[p];function e(D,c,r,y,F,C){return n(),a("div",null,t)}const i=s(l,[["render",e]]);export{u as __pageData,i as default};
|
||||
149
assets/guide_vue2_lint.md.bcdbf636.js
Normal file
149
assets/guide_vue2_lint.md.bcdbf636.js
Normal file
@ -0,0 +1,149 @@
|
||||
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":1685617392000}'),l={name:"guide/vue2/lint.md"},p=o(`<h1 id="eslint-pettier-统一开发规范" tabindex="-1">Eslint + Pettier 统一开发规范 <a class="header-anchor" href="#eslint-pettier-统一开发规范" aria-label="Permalink to "Eslint + Pettier 统一开发规范""></a></h1><p>VScode （版本 1.47.3）安装 <code>eslint</code> <code>prettier</code> <code>vetur</code> 插件 <code>.vue</code> 文件使用 vetur 进行格式化，其他使用<code>prettier</code>,后面会 专门写个如何使用配合使用这三个玩意</p><p>在文件 <code>.prettierrc</code> 里写 属于你的 pettier 规则</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"printWidth"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">120</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"tabWidth"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"singleQuote"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"trailingComma"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"semi"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"wrap_line_length"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">120</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"wrap_attributes"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">auto</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"proseWrap"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">always</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"arrowParens"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">avoid</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"bracketSpacing"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"jsxBracketSameLine"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"useTabs"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"overrides"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> [{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"files"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.prettierrc</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"options"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"parser"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre></div><p>Vscode setting.json 设置</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">将设置放入此文件中以覆盖默认设置</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"files.autoSave"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">off</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">控制字体系列。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.fontFamily"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">Consolas, 'Courier New', monospace,'宋体'</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"terminal.integrated.shell.windows"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">C:</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">Program Files</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">Git</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">bin</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">bash.exe</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">以像素为单位控制字号。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.fontSize"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">控制选取范围是否有圆角</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.roundedSelection"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">建议小组件的字号</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.suggestFontSize"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">16</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">在“打开的编辑器”窗格中显示的编辑器数量。将其设置为</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">可隐藏窗格。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"explorer.openEditors.visible"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">是否已启用自动刷新</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"git.autorefresh"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">以像素为单位控制终端的字号，这是</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">editor.fontSize</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">的默认值。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"terminal.integrated.fontSize"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">14</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">控制终端游标是否闪烁。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"terminal.integrated.cursorBlinking"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">一个制表符等于的空格数。该设置在</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#FFCB6B;">editor.detectIndentation</span><span style="color:#89DDFF;">\`</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">启用时根据文件内容进行重写。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Tab</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Size</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.tabSize"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">By</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">default,</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">common</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">template.</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Do</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">not</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">modify</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">it!!!!!</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.formatOnType"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"window.zoomLevel"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.detectIndentation"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"css.fileExtensions"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">css</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">, </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">],</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"files.associations"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"*.string"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"*.vue"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"*.wxss"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">css</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"*.wxml"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">wxml</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"*.wxs"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"*.cjson"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">jsonc</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"*.js"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">为指定的语法定义配置文件或使用带有特定规则的配置文件。</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"emmet.syntaxProfiles"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vue-html"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vue"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"search.exclude"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"**/node_modules"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"**/bower_components"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//保存时eslint自动修复错误</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.formatOnSave"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Enable</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">per-language</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//配置</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">ESLint</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">检查的文件类型</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.quickSuggestions"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"strings"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">添加</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">vue</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">支持</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">这里是针对vue文件的格式化设置，vue的规则在这里生效</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.options.tabSize"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.options.useTabs"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.defaultFormatter.html"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">js-beautify-html</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.defaultFormatter.css"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.defaultFormatter.scss"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.defaultFormatter.postcss"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.defaultFormatter.less"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.defaultFormatter.js"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vscode-typescript</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.defaultFormatter.sass"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">sass-formatter</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.defaultFormatter.ts"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.format.defaultFormatterOptions"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"js-beautify-html"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"wrap_attributes"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">aligned-multiple</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">超过150折行</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"wrap-line-length"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">150</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">#vue组件中html代码格式化样式</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"prettier"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"printWidth"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">120</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"tabWidth"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"singleQuote"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"trailingComma"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"semi"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"wrap_line_length"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">120</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"wrap_attributes"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">aligned-multiple</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">超过150折行</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"proseWrap"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">always</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"arrowParens"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">avoid</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"bracketSpacing"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"jsxBracketSameLine"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"useTabs"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"overrides"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"files"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.prettierrc</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"options"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"parser"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> }</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">Enable</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">per-language</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"[json]"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.defaultFormatter"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"vetur.validation.template"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"html.format.enable"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"json.format.enable"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"javascript.format.enable"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"typescript.format.enable"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">false</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"[html]"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.defaultFormatter"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"[javascript]"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.defaultFormatter"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"[jsonc]"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.defaultFormatter"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"[vue]"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.defaultFormatter"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">octref.vetur</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"emmet.includeLanguages"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"wxml"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"[typescriptreact]"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.defaultFormatter"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">//</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">开启eslint自动修复js/ts功能</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.codeActionsOnSave"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"source.fixAll.eslint"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> },</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"minapp-vscode.disableAutoConfig"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"javascript.implicitProjectConfig.experimentalDecorators"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">true</span><span style="color:#C3E88D;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">"editor.maxTokenizationLineLength"</span><span style="color:#82AAFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">200000</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_lint.md.bcdbf636.lean.js
Normal file
1
assets/guide_vue2_lint.md.bcdbf636.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as p}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"配置 proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/proxy.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as p}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"配置 proxy 跨域","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/proxy.md","lastUpdated":1679905840000}'),l={name:"guide/vue2/proxy.md"},o=p(`<h1 id="配置-proxy-跨域" tabindex="-1">配置 proxy 跨域 <a class="header-anchor" href="#配置-proxy-跨域" aria-label="Permalink to "配置 proxy 跨域""></a></h1><p>如果你的项目需要跨域设置，你需要打来 <code>vue.config.js</code> <code>proxy</code> 注释 并且配置相应参数</p><p><u><strong>!!!注意：你还需要将 <code>src/config/env.development.js</code> 里的 <code>baseApi</code> 设置成 '/'</strong></u></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
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":1685617392000}'),l={name:"guide/vue2/proxy.md"},o=p(`<h1 id="配置-proxy-跨域" tabindex="-1">配置 proxy 跨域 <a class="header-anchor" href="#配置-proxy-跨域" aria-label="Permalink to "配置 proxy 跨域""></a></h1><p>如果你的项目需要跨域设置，你需要打来 <code>vue.config.js</code> <code>proxy</code> 注释 并且配置相应参数</p><p><u><strong>!!!注意：你还需要将 <code>src/config/env.development.js</code> 里的 <code>baseApi</code> 设置成 '/'</strong></u></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">devServer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// ....</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">proxy</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -13,12 +13,10 @@ import{_ as s,o as a,c as n,Q as p}from"./chunks/framework.522debca.js";const A=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div><p>使用 例如: <code>src/api/home.js</code></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getUserInfo</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">params</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>使用 例如: <code>src/api/home.js</code></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">getUserInfo</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">params</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">request</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/api/userinfo</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> method</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">post</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> data</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">qs</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">stringify</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">params</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_proxy.md.e19a725e.lean.js
Normal file
1
assets/guide_vue2_proxy.md.e19a725e.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"rem 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/rem.md","lastUpdated":1679905840000}'),o={name:"guide/vue2/rem.md"},p=l("",19),e=[p];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"rem 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/rem.md","lastUpdated":1679905840000}'),o={name:"guide/vue2/rem.md"},p=l(`<h1 id="rem-适配方案" tabindex="-1">rem 适配方案 <a class="header-anchor" href="#rem-适配方案" aria-label="Permalink to "rem 适配方案""></a></h1><p>不用担心，项目已经配置好了 <code>rem</code> 适配, 下面仅做介绍：</p><p>Vant 中的样式默认使用<code>px</code>作为单位，如果需要使用<code>rem</code>单位，推荐使用以下两个工具:</p><ul><li><a href="https://github.com/cuth/postcss-pxtorem" target="_blank" rel="noreferrer">postcss-pxtorem</a> 是一款 <code>postcss</code> 插件，用于将单位转化为 <code>rem</code></li><li><a href="https://github.com/amfe/lib-flexible" target="_blank" rel="noreferrer">lib-flexible</a> 用于设置 <code>rem</code> 基准值</li></ul><h5 id="postcss-配置" tabindex="-1">PostCSS 配置 <a class="header-anchor" href="#postcss-配置" aria-label="Permalink to "PostCSS 配置""></a></h5><p>下面提供了一份基本的 <code>postcss</code> 配置，可以在此配置的基础上根据项目需求进行修改</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// https://github.com/michael-ciniawsky/postcss-load-config</span></span>
|
||||
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":1685617392000}'),l={name:"guide/vue2/rem.md"},p=o(`<h1 id="rem-适配方案" tabindex="-1">rem 适配方案 <a class="header-anchor" href="#rem-适配方案" aria-label="Permalink to "rem 适配方案""></a></h1><p>不用担心，项目已经配置好了 <code>rem</code> 适配, 下面仅做介绍：</p><p>Vant 中的样式默认使用<code>px</code>作为单位，如果需要使用<code>rem</code>单位，推荐使用以下两个工具:</p><ul><li><a href="https://github.com/cuth/postcss-pxtorem" target="_blank" rel="noreferrer">postcss-pxtorem</a> 是一款 <code>postcss</code> 插件，用于将单位转化为 <code>rem</code></li><li><a href="https://github.com/amfe/lib-flexible" target="_blank" rel="noreferrer">lib-flexible</a> 用于设置 <code>rem</code> 基准值</li></ul><h5 id="postcss-配置" tabindex="-1">PostCSS 配置 <a class="header-anchor" href="#postcss-配置" aria-label="Permalink to "PostCSS 配置""></a></h5><p>下面提供了一份基本的 <code>postcss</code> 配置，可以在此配置的基础上根据项目需求进行修改</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// https://github.com/michael-ciniawsky/postcss-load-config</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">autoprefixer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -15,9 +15,7 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">propList</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">*</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div><p>更多详细信息： <a href="https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa" target="_blank" rel="noreferrer">vant</a></p><p><strong>新手必看，老鸟跳过</strong></p><p>很多小伙伴会问我，适配的问题,因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以需要的尺寸了。下面就大概普及一下 rem。</p><p>我们知道 <code>1rem</code> 等于<code>html</code> 根元素设定的 <code>font-size</code> 的 <code>px</code> 值。Vant UI 设置 <code>rootValue: 37.5</code>,你可以看到在 iPhone 6 下看到 （<code>1rem 等于 37.5px</code>）：</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">data-dpr</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">font-size: 37.5px;</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div><p>切换不同的机型，根元素可能会有不同的<code>font-size</code>。当你写 css px 样式时，会被程序换算成 <code>rem</code> 达到适配。</p><p>因为我们用了 Vant 的组件，需要按照 <code>rootValue: 37.5</code> 来写样式。</p><p>举个例子：设计给了你一张 750px * 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。</p><ul><li>当<code>rootValue: 70</code> , 样式 <code>width: 750px;height: 1334px;</code> 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。</li><li>当<code>rootValue: 37.5</code> 的时候，样式 <code>width: 375px;height: 667px;</code> 图片会撑满 iPhone6 屏幕。</li></ul><p>也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。</p><p>当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">image</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://www.sunniejs.cn/static/weapp/logo.png</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>更多详细信息： <a href="https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa" target="_blank" rel="noreferrer">vant</a></p><p><strong>新手必看，老鸟跳过</strong></p><p>很多小伙伴会问我，适配的问题,因为我们使用的是 Vant UI，所以必须根据 Vant UI 375 的设计规范走，一般我们的设计会将 UI 图上传到蓝湖，我们就可以需要的尺寸了。下面就大概普及一下 rem。</p><p>我们知道 <code>1rem</code> 等于<code>html</code> 根元素设定的 <code>font-size</code> 的 <code>px</code> 值。Vant UI 设置 <code>rootValue: 37.5</code>,你可以看到在 iPhone 6 下看到 （<code>1rem 等于 37.5px</code>）：</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">data-dpr</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">font-size: 37.5px;</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">></span></span></code></pre></div><p>切换不同的机型，根元素可能会有不同的<code>font-size</code>。当你写 css px 样式时，会被程序换算成 <code>rem</code> 达到适配。</p><p>因为我们用了 Vant 的组件，需要按照 <code>rootValue: 37.5</code> 来写样式。</p><p>举个例子：设计给了你一张 750px * 1334px 图片，在 iPhone6 上铺满屏幕,其他机型适配。</p><ul><li>当<code>rootValue: 70</code> , 样式 <code>width: 750px;height: 1334px;</code> 图片会撑满 iPhone6 屏幕，这个时候切换其他机型，图片也会跟着撑满。</li><li>当<code>rootValue: 37.5</code> 的时候，样式 <code>width: 375px;height: 667px;</code> 图片会撑满 iPhone6 屏幕。</li></ul><p>也就是 iphone 6 下 375px 宽度写 CSS。其他的你就可以根据你设计图，去写对应的样式就可以了。</p><p>当然，想要撑满屏幕你可以使用 100%，这里只是举例说明。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">img</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">image</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://www.sunniejs.cn/static/weapp/logo.png</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* rootValue: 75 */</span></span>
|
||||
@ -30,5 +28,4 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">375px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">667px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div>`,19),e=[p];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_rem.md.dc03687e.lean.js
Normal file
1
assets/guide_vue2_rem.md.dc03687e.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as o}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"Vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/router.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as o}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"Vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/router.md","lastUpdated":1679905840000}'),l={name:"guide/vue2/router.md"},p=o(`<h1 id="vue-router" tabindex="-1">Vue-router <a class="header-anchor" href="#vue-router" aria-label="Permalink to "Vue-router""></a></h1><p>本案例采用 <code>hash</code> 模式，开发者根据需求修改 <code>mode</code> <code>base</code></p><p><strong>注意</strong>：如果你使用了 <code>history</code> 模式，<code>vue.config.js</code> 中的 <code>publicPath</code> 要做对应的<strong>修改</strong></p><p>前往:<a href="#base">vue.config.js 基础配置</a></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
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":1685617392000}'),l={name:"guide/vue2/router.md"},p=o(`<h1 id="vue-router" tabindex="-1">Vue-router <a class="header-anchor" href="#vue-router" aria-label="Permalink to "Vue-router""></a></h1><p>本案例采用 <code>hash</code> 模式，开发者根据需求修改 <code>mode</code> <code>base</code></p><p><strong>注意</strong>：如果你使用了 <code>history</code> 模式，<code>vue.config.js</code> 中的 <code>publicPath</code> 要做对应的<strong>修改</strong></p><p>前往:<a href="#base">vue.config.js 基础配置</a></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Router </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue-router</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(Router)</span><span style="color:#89DDFF;">;</span></span>
|
||||
@ -21,5 +21,4 @@ import{_ as s,o as a,c as n,Q as o}from"./chunks/framework.522debca.js";const i=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">routes</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> router</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createRouter</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createRouter</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_router.md.b749e959.lean.js
Normal file
1
assets/guide_vue2_router.md.b749e959.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1,26 +1,22 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"Sass 全局样式","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/sass.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/sass.md"},o=l(`<h1 id="sass-全局样式" tabindex="-1">Sass 全局样式 <a class="header-anchor" href="#sass-全局样式" aria-label="Permalink to "Sass 全局样式""></a></h1><p>首先 你可能会遇到 <code>node-sass</code> 安装不成功，别放弃多试几次！！！</p><p>每个页面自己对应的样式都写在自己的 .vue 文件之中 <code>scoped</code> 它顾名思义给 css 加了一个域的概念。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue2/sass.md"},o=l(`<h1 id="sass-全局样式" tabindex="-1">Sass 全局样式 <a class="header-anchor" href="#sass-全局样式" aria-label="Permalink to "Sass 全局样式""></a></h1><p>首先 你可能会遇到 <code>node-sass</code> 安装不成功，别放弃多试几次！！！</p><p>每个页面自己对应的样式都写在自己的 .vue 文件之中 <code>scoped</code> 它顾名思义给 css 加了一个域的概念。</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* global styles */</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scoped</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* local styles */</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div><h4 id="目录结构" tabindex="-1">目录结构 <a class="header-anchor" href="#目录结构" aria-label="Permalink to "目录结构""></a></h4><p>vue-h5-template 所有全局样式都在 <code>@/src/assets/css</code> 目录下设置</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">assets</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span></code></pre></div><h4 id="目录结构" tabindex="-1">目录结构 <a class="header-anchor" href="#目录结构" aria-label="Permalink to "目录结构""></a></h4><p>vue-h5-template 所有全局样式都在 <code>@/src/assets/css</code> 目录下设置</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">assets</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">css</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">index.scss</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 全局通用样式</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">mixin.scss</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 全局mixin</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">└──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">variables.scss</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 全局变量</span></span>
|
||||
<span class="line"></span></code></pre></div><h4 id="自定义-vant-ui-样式" tabindex="-1">自定义 vant-ui 样式 <a class="header-anchor" href="#自定义-vant-ui-样式" aria-label="Permalink to "自定义 vant-ui 样式""></a></h4><p>现在我们来说说怎么重写 <code>vant-ui</code> 样式。由于 <code>vant-ui</code> 的样式我们是在全局引入的，所以你想在某个页面里面覆盖它的样式就不能加 <code>scoped</code>，但你又想只覆盖这个页面的 <code>vant</code> 样式，你就可在它的父级加一个 <code>class</code>，用命名空间来解决问题。</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">about-container</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">└──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">variables.scss</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;"># 全局变量</span></span></code></pre></div><h4 id="自定义-vant-ui-样式" tabindex="-1">自定义 vant-ui 样式 <a class="header-anchor" href="#自定义-vant-ui-样式" aria-label="Permalink to "自定义 vant-ui 样式""></a></h4><p>现在我们来说说怎么重写 <code>vant-ui</code> 样式。由于 <code>vant-ui</code> 的样式我们是在全局引入的，所以你想在某个页面里面覆盖它的样式就不能加 <code>scoped</code>，但你又想只覆盖这个页面的 <code>vant</code> 样式，你就可在它的父级加一个 <code>class</code>，用命名空间来解决问题。</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">about-container</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* 你的命名空间 */</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> .van-button {</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* vant-ui 元素*/</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">margin-right</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span>
|
||||
<span class="line"></span></code></pre></div><h4 id="父组件改变子组件样式-深度选择器" tabindex="-1">父组件改变子组件样式 深度选择器 <a class="header-anchor" href="#父组件改变子组件样式-深度选择器" aria-label="Permalink to "父组件改变子组件样式 深度选择器""></a></h4><p>当你子组件使用了 <code>scoped</code> 但在父组件又想修改子组件的样式可以 通过 <code>>>></code> 来实现：</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;"><</span><span style="color:#FFCB6B;">style</span><span style="color:#A6ACCD;"> scoped</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">}</span></span></code></pre></div><h4 id="父组件改变子组件样式-深度选择器" tabindex="-1">父组件改变子组件样式 深度选择器 <a class="header-anchor" href="#父组件改变子组件样式-深度选择器" aria-label="Permalink to "父组件改变子组件样式 深度选择器""></a></h4><p>当你子组件使用了 <code>scoped</code> 但在父组件又想修改子组件的样式可以 通过 <code>>>></code> 来实现：</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#A6ACCD;"><</span><span style="color:#FFCB6B;">style</span><span style="color:#A6ACCD;"> scoped</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">a</span><span style="color:#A6ACCD;"> >>> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">b</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">/* ... */</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></</span><span style="color:#FFCB6B;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div><h4 id="全局变量" tabindex="-1">全局变量 <a class="header-anchor" href="#全局变量" aria-label="Permalink to "全局变量""></a></h4><p><code>vue.config.js</code> 配置使用 <code>css.loaderOptions</code> 选项,注入 <code>sass</code> 的 <code>mixin</code> <code>variables</code> 到全局，不需要手动引入 ,配置<code>$cdn</code>通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量：</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> IS_PROD </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">NODE_ENV)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"></</span><span style="color:#FFCB6B;">style</span><span style="color:#89DDFF;">></span></span></code></pre></div><h4 id="全局变量" tabindex="-1">全局变量 <a class="header-anchor" href="#全局变量" aria-label="Permalink to "全局变量""></a></h4><p><code>vue.config.js</code> 配置使用 <code>css.loaderOptions</code> 选项,注入 <code>sass</code> 的 <code>mixin</code> <code>variables</code> 到全局，不需要手动引入 ,配置<code>$cdn</code>通过变量形式引入 cdn 地址,这样向所有 Sass/Less 样式传入共享的全局变量：</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> IS_PROD </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">includes</span><span style="color:#A6ACCD;">(process</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">env</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">NODE_ENV)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> defaultSettings </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">require</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./src/config/index.js</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">css</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -39,15 +35,13 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div><p>设置 js 中可以访问 <code>$cdn</code>,<code>.vue</code> 文件中使用<code>this.$cdn</code>访问</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 引入全局样式</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><p>设置 js 中可以访问 <code>$cdn</code>,<code>.vue</code> 文件中使用<code>this.$cdn</code>访问</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 引入全局样式</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/assets/css/index.scss</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 设置 js中可以访问 $cdn</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 引入cdn</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">$cdn</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/config</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">prototype</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$cdn </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> $cdn</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div><p>在 css 和 js 使用</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">prototype</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$cdn </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> $cdn</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>在 css 和 js 使用</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">$cdn)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scoped</span><span style="color:#89DDFF;">></span></span>
|
||||
@ -56,5 +50,4 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">height</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">120px</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">background</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">url</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">$cdn</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">/weapp/logo.png</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> center / contain no-repeat</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_sass.md.0540c1bd.lean.js
Normal file
1
assets/guide_vue2_sass.md.0540c1bd.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"Sass 全局样式","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/sass.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","lastUpdated":1679905840000}'),e={name:"guide/vue2/start.md"},t=l("",2),p=[t];function o(c,r,i,y,_,D){return a(),n("div",null,p)}const A=s(e,[["render",o]]);export{d as __pageData,A as default};
|
||||
@ -1,5 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"启动项目","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","lastUpdated":1679905840000}'),e={name:"guide/vue2/start.md"},t=l(`<h1 id="启动项目" tabindex="-1">启动项目 <a class="header-anchor" href="#启动项目" aria-label="Permalink to "启动项目""></a></h1><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 拉取项目</span></span>
|
||||
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":1685617392000}'),l={name:"guide/vue2/start.md"},t=e(`<h1 id="启动项目" tabindex="-1">启动项目 <a class="header-anchor" href="#启动项目" aria-label="Permalink to "启动项目""></a></h1><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 拉取项目</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">git clone </span><span style="color:#FFCB6B;">https</span><span style="color:#89DDFF;">:</span><span style="color:#676E95;font-style:italic;">//github.com/sunniejs/vue-h5-template</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 切换分支</span></span>
|
||||
@ -9,6 +8,4 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=
|
||||
<span class="line"><span style="color:#A6ACCD;">yarn install</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 启动项目</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">yarn serve</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span></code></pre></div>`,2),p=[t];function o(c,r,i,y,_,D){return a(),n("div",null,p)}const A=s(e,[["render",o]]);export{d as __pageData,A as default};
|
||||
<span class="line"><span style="color:#A6ACCD;">yarn serve</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_start.md.50e4a44d.lean.js
Normal file
1
assets/guide_vue2_start.md.50e4a44d.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"VantUI 组件按需加载","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vant.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/vant.md"},o=l("",10),e=[o];function t(c,r,D,y,F,i){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};
|
||||
@ -1,5 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"VantUI 组件按需加载","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vant.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/vant.md"},o=l(`<h1 id="vantui-组件按需加载" tabindex="-1">VantUI 组件按需加载 <a class="header-anchor" href="#vantui-组件按需加载" aria-label="Permalink to "VantUI 组件按需加载""></a></h1><p>项目采 用<a href="https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian" target="_blank" rel="noreferrer">Vant 自动按需引入组件 (推荐)</a>下 面安装插件介绍：</p><p><a href="https://github.com/ant-design/babel-plugin-import" target="_blank" rel="noreferrer">babel-plugin-import</a> 是一款 <code>babel</code> 插件，它会在编译过程中将 <code>import</code> 的写法自动转换为按需引入的方式</p><h2 id="安装插件" tabindex="-1">安装插件 <a class="header-anchor" href="#安装插件" aria-label="Permalink to "安装插件""></a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">babel-plugin-import</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span></span>
|
||||
<span class="line"></span></code></pre></div><p>在<code>babel.config.js</code> 设置</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 对于使用 babel7 的用户，可以在 babel.config.js 中配置</span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue2/vant.md"},o=l(`<h1 id="vantui-组件按需加载" tabindex="-1">VantUI 组件按需加载 <a class="header-anchor" href="#vantui-组件按需加载" aria-label="Permalink to "VantUI 组件按需加载""></a></h1><p>项目采 用<a href="https://youzan.github.io/vant/#/zh-CN/quickstart#fang-shi-yi.-zi-dong-an-xu-yin-ru-zu-jian-tui-jian" target="_blank" rel="noreferrer">Vant 自动按需引入组件 (推荐)</a>下 面安装插件介绍：</p><p><a href="https://github.com/ant-design/babel-plugin-import" target="_blank" rel="noreferrer">babel-plugin-import</a> 是一款 <code>babel</code> 插件，它会在编译过程中将 <code>import</code> 的写法自动转换为按需引入的方式</p><h2 id="安装插件" tabindex="-1">安装插件 <a class="header-anchor" href="#安装插件" aria-label="Permalink to "安装插件""></a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">babel-plugin-import</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span></span></code></pre></div><p>在<code>babel.config.js</code> 设置</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 对于使用 babel7 的用户，可以在 babel.config.js 中配置</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> plugins </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">import</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
@ -16,12 +15,10 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=
|
||||
<span class="line"><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@vue/cli-plugin-babel/preset</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">useBuiltIns</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">usage</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">corejs</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> plugins</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div><h2 id="使用组件" tabindex="-1">使用组件 <a class="header-anchor" href="#使用组件" aria-label="Permalink to "使用组件""></a></h2><p>项目在 <code>src/plugins/vant.js</code> 下统一管理组件，用哪个引入哪个，无需在页面里重复引用</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 按需全局引入 vant组件</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="使用组件" tabindex="-1">使用组件 <a class="header-anchor" href="#使用组件" aria-label="Permalink to "使用组件""></a></h2><p>项目在 <code>src/plugins/vant.js</code> 下统一管理组件，用哪个引入哪个，无需在页面里重复引用</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 按需全局引入 vant组件</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Button</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">List</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Cell</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Tabbar</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">TabbarItem</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(Button)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(Cell)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(List)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(Tabbar)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(TabbarItem)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div>`,10),e=[o];function t(c,r,D,y,F,i){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};
|
||||
<span class="line"><span style="color:#A6ACCD;">Vue</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(Tabbar)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(TabbarItem)</span><span style="color:#89DDFF;">;</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_vant.md.7f5e95c2.lean.js
Normal file
1
assets/guide_vue2_vant.md.7f5e95c2.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1,9 +1,8 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"Vuex 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vuex.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/vuex.md"},o=l(`<h1 id="vuex-状态管理" tabindex="-1">Vuex 状态管理 <a class="header-anchor" href="#vuex-状态管理" aria-label="Permalink to "Vuex 状态管理""></a></h1><p>目录结构</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">store</span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue2/vuex.md"},o=l(`<h1 id="vuex-状态管理" tabindex="-1">Vuex 状态管理 <a class="header-anchor" href="#vuex-状态管理" aria-label="Permalink to "Vuex 状态管理""></a></h1><p>目录结构</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">store</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">modules</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">└──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">app.js</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">index.js</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">getters.js</span></span>
|
||||
<span class="line"></span></code></pre></div><p><code>main.js</code> 引入</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">getters.js</span></span></code></pre></div><p><code>main.js</code> 引入</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> App </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./App.vue</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">./store</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Vue</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -11,8 +10,7 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const i=
|
||||
<span class="line"><span style="color:#A6ACCD;"> router</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> store</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">render</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">h</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">h</span><span style="color:#A6ACCD;">(App)</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div><p>使用</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>使用</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">mapGetters</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vuex</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">computed</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -29,5 +27,4 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const i=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue2_vuex.md.ac525cdf.lean.js
Normal file
1
assets/guide_vue2_vuex.md.ac525cdf.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const i=JSON.parse('{"title":"Vuex 状态管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vuex.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,7 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"vm 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vw.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/vw.md"},o=l(`<h1 id="vm-适配方案" tabindex="-1">vm 适配方案 <a class="header-anchor" href="#vm-适配方案" aria-label="Permalink to "vm 适配方案""></a></h1><p>本项目使用的是 <code>rem</code> 的 适配方案，其实无论你使用哪种方案，都不需要你去计算 12px 是多少 <code>rem</code> 或者 <code>vw</code>, 会有专门的工具去帮你做 。如果你想用 <code>vw</code>,你可以按照下面的方式切换。</p><h2 id="_1-安装依赖" tabindex="-1">1.安装依赖 <a class="header-anchor" href="#_1-安装依赖" aria-label="Permalink to "1.安装依赖""></a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">postcss-px-to-viewport</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span></code></pre></div><h2 id="_2-修改-postcssrc-js" tabindex="-1">2.修改 .postcssrc.js <a class="header-anchor" href="#_2-修改-postcssrc-js" aria-label="Permalink to "2.修改 .postcssrc.js""></a></h2><p>将根目录下 .postcssrc.js 文件修改如下</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// https://github.com/michael-ciniawsky/postcss-load-config</span></span>
|
||||
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":1685617392000}'),o={name:"guide/vue2/vw.md"},p=l(`<h1 id="vm-适配方案" tabindex="-1">vm 适配方案 <a class="header-anchor" href="#vm-适配方案" aria-label="Permalink to "vm 适配方案""></a></h1><p>本项目使用的是 <code>rem</code> 的 适配方案，其实无论你使用哪种方案，都不需要你去计算 12px 是多少 <code>rem</code> 或者 <code>vw</code>, 会有专门的工具去帮你做 。如果你想用 <code>vw</code>,你可以按照下面的方式切换。</p><h2 id="_1-安装依赖" tabindex="-1">1.安装依赖 <a class="header-anchor" href="#_1-安装依赖" aria-label="Permalink to "1.安装依赖""></a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">postcss-px-to-viewport</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">-D</span></span></code></pre></div><h2 id="_2-修改-postcssrc-js" tabindex="-1">2.修改 .postcssrc.js <a class="header-anchor" href="#_2-修改-postcssrc-js" aria-label="Permalink to "2.修改 .postcssrc.js""></a></h2><p>将根目录下 .postcssrc.js 文件修改如下</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// https://github.com/michael-ciniawsky/postcss-load-config</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">plugins</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">autoprefixer</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -22,9 +19,6 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">mediaQuery</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 允许在媒体查询中转换\`px\`</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"></span></code></pre></div><h2 id="_3-删除原来的-rem-相关代码" tabindex="-1">3.删除原来的 rem 相关代码 <a class="header-anchor" href="#_3-删除原来的-rem-相关代码" aria-label="Permalink to "3.删除原来的 rem 相关代码""></a></h2><p>src/main.js 删除如下代码</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 移动端适配</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">lib-flexible/flexible.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div><p>package.json 删除如下代码</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">lib-flexible</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^0.3.2</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">postcss-pxtorem</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^5.1.1</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span></code></pre></div><p>运行起来，F12 元素 css style 就是 vw 单位了</p>`,13),e=[o];function t(c,r,D,y,i,F){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};
|
||||
<span class="line"><span style="color:#89DDFF;">};</span></span></code></pre></div><h2 id="_3-删除原来的-rem-相关代码" tabindex="-1">3.删除原来的 rem 相关代码 <a class="header-anchor" href="#_3-删除原来的-rem-相关代码" aria-label="Permalink to "3.删除原来的 rem 相关代码""></a></h2><p>src/main.js 删除如下代码</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">// 移动端适配</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">lib-flexible/flexible.js</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>package.json 删除如下代码</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">lib-flexible</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^0.3.2</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">postcss-pxtorem</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">^5.1.1</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span></code></pre></div><p>运行起来，F12 元素 css style 就是 vw 单位了</p>`,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};
|
||||
1
assets/guide_vue2_vw.md.2e9f914f.lean.js
Normal file
1
assets/guide_vue2_vw.md.2e9f914f.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"vm 适配方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vw.md","lastUpdated":1679905840000}'),p={name:"guide/vue2/vw.md"},o=l("",13),e=[o];function t(c,r,D,y,i,F){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","lastUpdated":1679905840000}'),p={name:"guide/vue3/alias.md"},o=l(`<h1 id="alias" tabindex="-1">alias <a class="header-anchor" href="#alias" aria-label="Permalink to "alias""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">resolve</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue3/alias.md"},o=l(`<h1 id="alias" tabindex="-1">alias <a class="header-anchor" href="#alias" aria-label="Permalink to "alias""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">resolve</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">alias</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> find</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-i18n</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> replacement</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-i18n/dist/vue-i18n.cjs.js</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
@ -14,5 +14,4 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const _=
|
||||
<span class="line"><span style="color:#F07178;"> replacement</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">pathResolve</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">types</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> ]</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;">},</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue3_alias.md.5df8d842.lean.js
Normal file
1
assets/guide_vue3_alias.md.5df8d842.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const C=JSON.parse('{"title":"axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","lastUpdated":1679905840000}'),o={name:"guide/vue3/axios.md"},p=l(`<h1 id="axios-封装及接口管理" tabindex="-1">axios 封装及接口管理 <a class="header-anchor" href="#axios-封装及接口管理" aria-label="Permalink to "axios 封装及接口管理""></a></h1><p><code>utils/request.js</code> 封装 axios , 开发者需要根据后台接口做修改。</p><ul><li><code>service.interceptors.request.use</code> 里可以设置请求头，比如设置 <code>token</code></li><li><code>config.hideloading</code> 是在 api 文件夹下的接口参数里设置，下文会讲</li><li><code>service.interceptors.response.use</code> 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> axios </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">axios</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
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":1685617392000}'),o={name:"guide/vue3/axios.md"},p=l(`<h1 id="axios-封装及接口管理" tabindex="-1">axios 封装及接口管理 <a class="header-anchor" href="#axios-封装及接口管理" aria-label="Permalink to "axios 封装及接口管理""></a></h1><p><code>utils/request.js</code> 封装 axios , 开发者需要根据后台接口做修改。</p><ul><li><code>service.interceptors.request.use</code> 里可以设置请求头，比如设置 <code>token</code></li><li><code>config.hideloading</code> 是在 api 文件夹下的接口参数里设置，下文会讲</li><li><code>service.interceptors.response.use</code> 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> axios </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">axios</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/store</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Toast</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 根据环境不同引入不同api地址</span></span>
|
||||
@ -54,5 +54,4 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const C=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reject</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> service</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> service</span><span style="color:#89DDFF;">;</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue3_axios.md.9929e968.lean.js
Normal file
1
assets/guide_vue3_axios.md.9929e968.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const C=JSON.parse('{"title":"axios 封装及接口管理","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,6 +1,4 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"vite.config.ts 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","lastUpdated":1679905840000}'),p={name:"guide/vue3/base.md"},o=l(`<h1 id="vite-config-ts-基础配置" tabindex="-1">vite.config.ts 基础配置 <a class="header-anchor" href="#vite-config-ts-基础配置" aria-label="Permalink to "vite.config.ts 基础配置""></a></h1><p>如果你的 <code>Vue Router</code> 模式是 hash</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span></code></pre></div><p>如果你的 <code>Vue Router</code> 模式是 history 这里的 publicPath 和你的 <code>Vue Router</code> <code>base</code> <strong>保持一致</strong></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/app/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"></span></code></pre></div><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">command</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ConfigEnv</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">UserConfigExport</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue3/base.md"},o=l(`<h1 id="vite-config-ts-基础配置" tabindex="-1">vite.config.ts 基础配置 <a class="header-anchor" href="#vite-config-ts-基础配置" aria-label="Permalink to "vite.config.ts 基础配置""></a></h1><p>如果你的 <code>Vue Router</code> 模式是 hash</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span></code></pre></div><p>如果你的 <code>Vue Router</code> 模式是 history 这里的 publicPath 和你的 <code>Vue Router</code> <code>base</code> <strong>保持一致</strong></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">/app/</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span></span></code></pre></div><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">command</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ConfigEnv</span><span style="color:#89DDFF;">):</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">UserConfigExport</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">isProduction</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">command</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">build</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> server</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
@ -28,5 +26,4 @@ import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue3_base.md.22bdbcc7.lean.js
Normal file
1
assets/guide_vue3_base.md.22bdbcc7.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,Q as l}from"./chunks/framework.522debca.js";const d=JSON.parse('{"title":"vite.config.ts 基础配置","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,6 +1,5 @@
|
||||
import{_ as s,o,c as e,Q as a}from"./chunks/framework.522debca.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/env.md","lastUpdated":1679905840000}'),n={name:"guide/vue3/env.md"},p=a(`<p><code>package.json</code> 里的 <code>scripts</code> 配置 <code>dev</code> <code>dev:test</code> <code>dev:prod</code> ，通过 <code>--mode xxx</code> 来执行不同环境</p><ul><li>通过 <code>yarn dev</code> 启动本地环境参数 , 执行 <code>development</code></li><li>通过 <code>yarn dev:test</code> 启动测试环境参数 , 执行 <code>test</code></li><li>通过 <code>yarn dev:prod</code> 启动正式环境参数 , 执行 <code>prod</code></li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scripts</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
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":1685617392000}'),n={name:"guide/vue3/env.md"},p=a(`<p><code>package.json</code> 里的 <code>scripts</code> 配置 <code>dev</code> <code>dev:test</code> <code>dev:prod</code> ，通过 <code>--mode xxx</code> 来执行不同环境</p><ul><li>通过 <code>yarn dev</code> 启动本地环境参数 , 执行 <code>development</code></li><li>通过 <code>yarn dev:test</code> 启动测试环境参数 , 执行 <code>test</code></li><li>通过 <code>yarn dev:prod</code> 启动正式环境参数 , 执行 <code>prod</code></li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">scripts</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">dev</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vite</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">dev:test</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vite --mode test</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">dev:prod</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vite --mode production</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div>`,3),l=[p];function t(c,r,d,D,F,i){return o(),e("div",null,l)}const _=s(n,[["render",t]]);export{u as __pageData,_ as default};
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue3_env.md.15c44b72.lean.js
Normal file
1
assets/guide_vue3_env.md.15c44b72.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o,c as e,Q as a}from"./chunks/framework.522debca.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/env.md","lastUpdated":1679905840000}'),n={name:"guide/vue3/env.md"},p=a("",3),l=[p];function t(c,r,d,D,F,i){return o(),e("div",null,l)}const _=s(n,[["render",t]]);export{u as __pageData,_ as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"i18n 文本多语言解决方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/i18n.md","lastUpdated":1679905840000}'),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};
|
||||
@ -1,4 +1,4 @@
|
||||
import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const A=JSON.parse('{"title":"i18n 文本多语言解决方案","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/i18n.md","lastUpdated":1679905840000}'),p={name:"guide/vue3/i18n.md"},o=l(`<h1 id="i18n-文本多语言解决方案" tabindex="-1">i18n 文本多语言解决方案 <a class="header-anchor" href="#i18n-文本多语言解决方案" aria-label="Permalink to "i18n 文本多语言解决方案""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createI18n</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-i18n</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 引入第三方最新的i18n注意版本</span></span>
|
||||
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":1685617392000}'),p={name:"guide/vue3/i18n.md"},o=l(`<h1 id="i18n-文本多语言解决方案" tabindex="-1">i18n 文本多语言解决方案 <a class="header-anchor" href="#i18n-文本多语言解决方案" aria-label="Permalink to "i18n 文本多语言解决方案""></a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createI18n</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">vue-i18n</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 引入第三方最新的i18n注意版本</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">/**</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> * </span><span style="color:#89DDFF;font-style:italic;">@</span><span style="color:#C792EA;font-style:italic;">description</span><span style="color:#676E95;font-style:italic;">: 加载当前配置的语言配置目录，随意添加</span></span>
|
||||
@ -30,8 +30,7 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const A=
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">localStorage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">setItem</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">lang</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">locale</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">i18n</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">global</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">locale</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">localStorage</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getItem</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">lang</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">||</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div><h1 id="css图片解决方案" tabindex="-1">css图片解决方案 <a class="header-anchor" href="#css图片解决方案" aria-label="Permalink to "css图片解决方案""></a></h1><p>目前在业务开发中,css的样式多语言也会经常用到，可能一些图片的字体比较复杂，代码很难实现。或者我们为了减少多语言的配置，加快开发效率也会使用多语言的配置,目前这里提供scss的图片多语言的方案</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">@mixin</span><span style="color:#A6ACCD;"> main-lang-bg($width, $height, $preUrl, $posUrl) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h1 id="css图片解决方案" tabindex="-1">css图片解决方案 <a class="header-anchor" href="#css图片解决方案" aria-label="Permalink to "css图片解决方案""></a></h1><p>目前在业务开发中,css的样式多语言也会经常用到，可能一些图片的字体比较复杂，代码很难实现。或者我们为了减少多语言的配置，加快开发效率也会使用多语言的配置,目前这里提供scss的图片多语言的方案</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;font-style:italic;">@mixin</span><span style="color:#A6ACCD;"> main-lang-bg($width, $height, $preUrl, $posUrl) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> width: $width;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> height: $height;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">background-repeat</span><span style="color:#A6ACCD;">: </span><span style="color:#FFCB6B;">no-repeat</span><span style="color:#A6ACCD;">;</span></span>
|
||||
@ -46,13 +45,11 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const A=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#B2CCD6;">background-image</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">url</span><span style="color:#89DDFF;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">#{$preUrl}/#{$i}/#{$posUrl}</span><span style="color:#89DDFF;">'</span><span style="color:#89DDFF;">);</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div><h2 id="定义图片的目录格式" tabindex="-1">定义图片的目录格式 <a class="header-anchor" href="#定义图片的目录格式" aria-label="Permalink to "定义图片的目录格式""></a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">button</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h2 id="定义图片的目录格式" tabindex="-1">定义图片的目录格式 <a class="header-anchor" href="#定义图片的目录格式" aria-label="Permalink to "定义图片的目录格式""></a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">button</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">en-us</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">└──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">confirm.png</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">├──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">zh-cn</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">└──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">confirm.png</span></span>
|
||||
<span class="line"></span></code></pre></div><h2 id="html的使用方式" tabindex="-1">HTML的使用方式 <a class="header-anchor" href="#html的使用方式" aria-label="Permalink to "HTML的使用方式""></a></h2><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">│</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">└──</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">confirm.png</span></span></code></pre></div><h2 id="html的使用方式" tabindex="-1">HTML的使用方式 <a class="header-anchor" href="#html的使用方式" aria-label="Permalink to "HTML的使用方式""></a></h2><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:class</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">['btn-confirm', i18n.global.locale]</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">name</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">HomePage</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||||
@ -62,5 +59,4 @@ import{_ as s,o as n,c as a,Q as l}from"./chunks/framework.522debca.js";const A=
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">btn-confirm</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> @include main-lang-bg(302px, 82px, '/@/assets/button', 'confirm.png')</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div>`,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};
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">></span></span></code></pre></div>`,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};
|
||||
1
assets/guide_vue3_i18n.md.efcc4870.lean.js
Normal file
1
assets/guide_vue3_i18n.md.efcc4870.lean.js
Normal file
@ -0,0 +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":1685617392000}'),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};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as s,c as i,x as t,a as n}from"./chunks/framework.522debca.js";const x=JSON.parse('{"title":"Eslint+Pettier+stylelint 统一开发规范","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/lint.md","lastUpdated":1679905840000}'),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,f,h,u){return s(),i("div",null,o)}const y=e(l,[["render",c]]);export{x as __pageData,y as default};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user