mirror of
https://github.com/sunniejs/vue-h5-template.git
synced 2025-04-05 19:42:08 +08:00
deploy: 16c9c0411f96f28929f05ee074cbb918e271f5cc
This commit is contained in:
fonghehe
parent
7061b4a1fb
commit
83ebe1083c
File diff suppressed because one or more lines are too long
1
assets/app.aaa0e4d3.js
Normal file
1
assets/app.aaa0e4d3.js
Normal file
@ -0,0 +1 @@
|
||||
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};
|
||||
14
assets/chunks/VPAlgoliaSearchBox.036fc84c.js
Normal file
14
assets/chunks/VPAlgoliaSearchBox.036fc84c.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.522debca.js
Normal file
2
assets/chunks/framework.522debca.js
Normal file
File diff suppressed because one or more lines are too long
7
assets/chunks/theme.c3b80f96.js
Normal file
7
assets/chunks/theme.c3b80f96.js
Normal file
File diff suppressed because one or more lines are too long
1
assets/guide_about_index.md.4fa84a09.js
Normal file
1
assets/guide_about_index.md.4fa84a09.js
Normal file
@ -0,0 +1 @@
|
||||
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
assets/guide_about_index.md.4fa84a09.lean.js
Normal file
1
assets/guide_about_index.md.4fa84a09.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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{o,c as a,_ as d,p as c,a as n,b as t}from"./app.0ed445b7.js";const s=e=>(c("data-v-7484dbd3"),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,_],m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"guide/about/index.md","lastUpdated":1672820852000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(h,u)=>(o(),a("div",null,i))}}),x=d(l,[["__scopeId","data-v-7484dbd3"]]);export{m as __pageData,x as default};
|
||||
@ -1 +0,0 @@
|
||||
import{o,c as a,_ as d,p as c,a as n,b as t}from"./app.0ed445b7.js";const s=e=>(c("data-v-7484dbd3"),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,_],m=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"page"},"headers":[],"relativePath":"guide/about/index.md","lastUpdated":1672820852000}'),r={name:"guide/about/index.md"},l=Object.assign(r,{setup(e){return(h,u)=>(o(),a("div",null,i))}}),x=d(l,[["__scopeId","data-v-7484dbd3"]]);export{m as __pageData,x as default};
|
||||
@ -1,14 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as e}from"./app.0ed445b7.js";const h=JSON.parse('{"title":"\u53C2\u4E0E\u7F16\u8F91","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","lastUpdated":1672820852000}'),p={name:"guide/edit.md"},l=e(`<h1 id="\u53C2\u4E0E\u7F16\u8F91" tabindex="-1">\u53C2\u4E0E\u7F16\u8F91 <a class="header-anchor" href="#\u53C2\u4E0E\u7F16\u8F91" aria-hidden="true">#</a></h1><p>\u6B22\u8FCE\u6709\u610F\u613F\u53C2\u4E0E\u5230\u5F00\u6E90\u7684\u670B\u53CB\uFF0C\u52A0\u5165\u5230\u672C\u6587\u6863\u7684\u7F16\u5199\uFF0C\u4E66\u5199\u6587\u6863\u4E0D\u4EC5\u662F\u6559\u4F1A\u522B\u4EBA\u77E5\u8BC6\uFF0C\u66F4\u662F\u7528\u81EA\u5DF1\u7684\u8868\u8FBE\u65B9\u5F0F\u6982\u62EC\u81EA\u5DF1\u6240\u5B66\u4E60\u77E5\u8BC6\u7684\u4E00\u79CD\u65B9\u5F0F\uFF0C\u8FD9\u5BF9\u4E2A\u4EBA\u6765\u8BF4\u662F\u4E0D\u53EF\u591A\u5F97\u7684\u6210\u957F\u673A\u4F1A\u3002</p><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;">// \u62C9\u53D6\u9879\u76EE</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;">//github.com/sunniejs/vue-h5-template</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;">// \u5207\u6362\u5206\u652F</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;">// \u5B89\u88C5\u4F9D\u8D56</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">yarn install</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;">// \u542F\u52A8\u9879\u76EE</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),t=[l];function o(c,i,r,d,_,y){return n(),a("div",null,t)}const u=s(p,[["render",o]]);export{h as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as e}from"./app.0ed445b7.js";const h=JSON.parse('{"title":"\u53C2\u4E0E\u7F16\u8F91","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","lastUpdated":1672820852000}'),p={name:"guide/edit.md"},l=e("",3),t=[l];function o(c,i,r,d,_,y){return n(),a("div",null,t)}const u=s(p,[["render",o]]);export{h as __pageData,u as default};
|
||||
14
assets/guide_edit.md.67c9e928.js
Normal file
14
assets/guide_edit.md.67c9e928.js
Normal file
@ -0,0 +1,14 @@
|
||||
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
assets/guide_edit.md.67c9e928.lean.js
Normal file
1
assets/guide_edit.md.67c9e928.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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
assets/guide_index.md.14f8cbf3.js
Normal file
1
assets/guide_index.md.14f8cbf3.js
Normal file
@ -0,0 +1 @@
|
||||
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
assets/guide_index.md.14f8cbf3.lean.js
Normal file
1
assets/guide_index.md.14f8cbf3.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as e,o as t,c as a,d as i}from"./app.0ed445b7.js";const v=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u7279\u70B9","slug":"\u7279\u70B9","link":"#\u7279\u70B9","children":[{"level":3,"title":"\u6700\u65B0\u6280\u672F\u6808","slug":"\u6700\u65B0\u6280\u672F\u6808","link":"#\u6700\u65B0\u6280\u672F\u6808","children":[]},{"level":3,"title":"\u57FA\u4E8E TypeScript","slug":"\u57FA\u4E8E-typescript","link":"#\u57FA\u4E8E-typescript","children":[]},{"level":3,"title":"\u8F7B\u91CF\u7EA7","slug":"\u8F7B\u91CF\u7EA7","link":"#\u8F7B\u91CF\u7EA7","children":[]},{"level":3,"title":"\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863","slug":"\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863","link":"#\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863","children":[]}]}],"relativePath":"guide/index.md","lastUpdated":1672820852000}'),l={name:"guide/index.md"},r=i('<h1 id="vue-h5-template" tabindex="-1">Vue-H5-Template <a class="header-anchor" href="#vue-h5-template" aria-hidden="true">#</a></h1><p><a href="https://github.com/sunniejs/vue-h5-template" target="_blank" rel="noreferrer">Vue-H5-Template</a>\uFF0C\u662F\u57FA\u4E8E vite3 + vue3 + pinia + ( Vant or Varlet or NutUI ) + viewport \u9002\u914D\u65B9\u6848 \uFF0C\u6784\u5EFA\u79FB\u52A8\u7AEF\u5FEB\u901F\u5F00\u53D1\u811A\u624B\u67B6</p><h2 id="\u7279\u70B9" tabindex="-1">\u7279\u70B9 <a class="header-anchor" href="#\u7279\u70B9" aria-hidden="true">#</a></h2><h3 id="\u6700\u65B0\u6280\u672F\u6808" tabindex="-1">\u6700\u65B0\u6280\u672F\u6808 <a class="header-anchor" href="#\u6700\u65B0\u6280\u672F\u6808" aria-hidden="true">#</a></h3><ul><li>\u6846\u67B6\u9009\u578B\u57FA\u4E8E\u5F53\u4E0B\u6D41\u884C\u7684 vue + vite + ts \u6A21\u5F0F\uFF0C\u7CBE\u9009\u793E\u533A star \u548C\u6EE1\u610F\u5EA6\u5747\u4E0D\u9519\u7684 ui \u6846\u67B6\u548C vite \u63D2\u4EF6\uFF0C\u5E76\u65F6\u5E38\u8FDB\u884C\u66F4\u65B0\uFF0C\u786E\u4FDD\u4E0E\u5B98\u65B9\u6587\u6863\u4E00\u81F4</li></ul><h3 id="\u57FA\u4E8E-typescript" tabindex="-1">\u57FA\u4E8E TypeScript <a class="header-anchor" href="#\u57FA\u4E8E-typescript" aria-hidden="true">#</a></h3><ul><li>Typescript \u9010\u6E10\u5728\u5404\u79CD\u5927\u578B\u7684 js \u9879\u76EE\u4E2D\u4F7F\u7528\uFF0C\u660E\u786E\u7684\u7C7B\u578B\u5B9A\u4E49\u53EF\u4EE5\u7701\u4E0B\u4E0D\u5C11\u7684\u5F00\u53D1\u548C\u7EF4\u62A4\u6210\u672C</li></ul><h3 id="\u8F7B\u91CF\u7EA7" tabindex="-1">\u8F7B\u91CF\u7EA7 <a class="header-anchor" href="#\u8F7B\u91CF\u7EA7" aria-hidden="true">#</a></h3><ul><li>\u4E0D\u540C\u4E8E\u96C6\u6210\u7684\u811A\u624B\u67B6\uFF0C\u5C3D\u91CF\u505A\u5230\u8F7B\u91CF\u4E0D\u5197\u6742\uFF0C\u53EA\u5F15\u5165\u9AD8\u9891\u6B21\u7684\u63D2\u4EF6\u548C\u6E05\u6670\u7684\u793A\u4F8B</li><li>\u8F7B\u88C5\u4E0A\u9635\uFF0C\u4FBF\u4E8E\u62D3\u5C55\u5F00\u53D1\uFF0C\u51CF\u5C11\u5B66\u4E60\u6210\u672C</li></ul><h3 id="\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863" tabindex="-1">\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863 <a class="header-anchor" href="#\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863" aria-hidden="true">#</a></h3><ul><li>\u57FA\u4E8E\u6700\u65B0 VitePress \u6784\u5EFA\u7684\u6587\u6863\uFF0C\u66F4\u5FEB\uFF0C\u66F4\u4FBF\u6377</li><li>\u66F4\u5FEB\u7684\u70ED\u66F4\u65B0</li></ul>',11),d=[r];function n(h,s,c,u,p,o){return t(),a("div",null,d)}const f=e(l,[["render",n]]);export{v as __pageData,f as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as t,c as a,d as i}from"./app.0ed445b7.js";const v=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u7279\u70B9","slug":"\u7279\u70B9","link":"#\u7279\u70B9","children":[{"level":3,"title":"\u6700\u65B0\u6280\u672F\u6808","slug":"\u6700\u65B0\u6280\u672F\u6808","link":"#\u6700\u65B0\u6280\u672F\u6808","children":[]},{"level":3,"title":"\u57FA\u4E8E TypeScript","slug":"\u57FA\u4E8E-typescript","link":"#\u57FA\u4E8E-typescript","children":[]},{"level":3,"title":"\u8F7B\u91CF\u7EA7","slug":"\u8F7B\u91CF\u7EA7","link":"#\u8F7B\u91CF\u7EA7","children":[]},{"level":3,"title":"\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863","slug":"\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863","link":"#\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863","children":[]}]}],"relativePath":"guide/index.md","lastUpdated":1672820852000}'),l={name:"guide/index.md"},r=i("",11),d=[r];function n(h,s,c,u,p,o){return t(),a("div",null,d)}const f=e(l,[["render",n]]);export{v as __pageData,f as default};
|
||||
1
assets/guide_other_index.md.c2f17cfe.js
Normal file
1
assets/guide_other_index.md.c2f17cfe.js
Normal file
@ -0,0 +1 @@
|
||||
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
assets/guide_other_index.md.c2f17cfe.lean.js
Normal file
1
assets/guide_other_index.md.c2f17cfe.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as e,o as a,c as t,d as r}from"./app.0ed445b7.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"1\u3001\u4E3A\u4EC0\u4E48\u6709\u591A\u4E2A\u7EC4\u4EF6\u5E93\uFF1F","slug":"_1\u3001\u4E3A\u4EC0\u4E48\u6709\u591A\u4E2A\u7EC4\u4EF6\u5E93","link":"#_1\u3001\u4E3A\u4EC0\u4E48\u6709\u591A\u4E2A\u7EC4\u4EF6\u5E93","children":[]},{"level":3,"title":"2\u3001\u6211\u53EF\u4EE5\u7528\u5728\u4E2A\u4EBA\u6216\u516C\u53F8\u7684\u9879\u76EE\u5417\uFF1F","slug":"_2\u3001\u6211\u53EF\u4EE5\u7528\u5728\u4E2A\u4EBA\u6216\u516C\u53F8\u7684\u9879\u76EE\u5417","link":"#_2\u3001\u6211\u53EF\u4EE5\u7528\u5728\u4E2A\u4EBA\u6216\u516C\u53F8\u7684\u9879\u76EE\u5417","children":[]},{"level":3,"title":"3\u3001\u6211\u662F\u4E00\u4E2A\u65B0\u624B\uFF0C\u6709\u4EC0\u4E48\u597D\u7684\u5B66\u4E60\u5EFA\u8BAE\u5417\uFF1F","slug":"_3\u3001\u6211\u662F\u4E00\u4E2A\u65B0\u624B-\u6709\u4EC0\u4E48\u597D\u7684\u5B66\u4E60\u5EFA\u8BAE\u5417","link":"#_3\u3001\u6211\u662F\u4E00\u4E2A\u65B0\u624B-\u6709\u4EC0\u4E48\u597D\u7684\u5B66\u4E60\u5EFA\u8BAE\u5417","children":[]}],"relativePath":"guide/other/index.md","lastUpdated":1672820852000}'),i={name:"guide/other/index.md"},n=r('<h3 id="_1\u3001\u4E3A\u4EC0\u4E48\u6709\u591A\u4E2A\u7EC4\u4EF6\u5E93" tabindex="-1">1\u3001\u4E3A\u4EC0\u4E48\u6709\u591A\u4E2A\u7EC4\u4EF6\u5E93\uFF1F <a class="header-anchor" href="#_1\u3001\u4E3A\u4EC0\u4E48\u6709\u591A\u4E2A\u7EC4\u4EF6\u5E93" aria-hidden="true">#</a></h3><p>\u672C\u6A21\u7248\u60F3\u505A\u5230\u7684\u662F\u5C3D\u53EF\u80FD\u7684\u5F00\u7BB1\u5373\u7528\uFF0C\u4E0D\u7528\u53BB\u770B\u522B\u7684\u6587\u6863\u5F15\u5165\u76F8\u5173\u7EC4\u4EF6\u5E93\uFF0C\u6BD5\u7ADF\u505A\u51CF\u6CD5\u6BD4\u505A\u52A0\u6CD5\u8981\u5BB9\u6613\u4E9B\uFF0C\u5982\u4F60\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93\u53EF\u4EE5\u6839\u636E<a href="/vue-h5-template/guide/vue3/ui.html">\u8FD9\u7BC7\u6307\u5F15</a>\u53BB\u79FB\u9664\u67D0\u4E2A\u7EC4\u4EF6\u5E93</p><h3 id="_2\u3001\u6211\u53EF\u4EE5\u7528\u5728\u4E2A\u4EBA\u6216\u516C\u53F8\u7684\u9879\u76EE\u5417" tabindex="-1">2\u3001\u6211\u53EF\u4EE5\u7528\u5728\u4E2A\u4EBA\u6216\u516C\u53F8\u7684\u9879\u76EE\u5417\uFF1F <a class="header-anchor" href="#_2\u3001\u6211\u53EF\u4EE5\u7528\u5728\u4E2A\u4EBA\u6216\u516C\u53F8\u7684\u9879\u76EE\u5417" aria-hidden="true">#</a></h3><p>\u6A21\u7248\u57FA\u4E8E MIT License,\u4F60\u53EF\u4EE5\u6839\u636E\u81EA\u5DF1\u7684\u9700\u6C42\u7528\u5230\u4E0D\u540C\u7684\u9879\u76EE\u91CC\uFF0C\u5982\u679C\u5BF9\u4F60\u6709\u5E2E\u52A9\u70B9\u4E2A star \u652F\u6301\u4E00\u4E0B\u5457 \u{1F31F}</p><h3 id="_3\u3001\u6211\u662F\u4E00\u4E2A\u65B0\u624B-\u6709\u4EC0\u4E48\u597D\u7684\u5B66\u4E60\u5EFA\u8BAE\u5417" tabindex="-1">3\u3001\u6211\u662F\u4E00\u4E2A\u65B0\u624B\uFF0C\u6709\u4EC0\u4E48\u597D\u7684\u5B66\u4E60\u5EFA\u8BAE\u5417\uFF1F <a class="header-anchor" href="#_3\u3001\u6211\u662F\u4E00\u4E2A\u65B0\u624B-\u6709\u4EC0\u4E48\u597D\u7684\u5B66\u4E60\u5EFA\u8BAE\u5417" aria-hidden="true">#</a></h3><p>\u8FC7\u6765\u4EBA\u7684\u7ECF\u9A8C\u5C31\u662F\u719F\u8BFB\u6587\u6863\u53EF\u4EE5\u5C11\u8D70\u5F88\u591A\u5F2F\u8DEF\uFF0C\u5F88\u591A\u7684\u4EBA\u6587\u6863\u6CA1\u8BFB\u719F\u5C31\u5F00\u59CB\u52A8\u624B\uFF0C\u51FA\u4E86\u95EE\u9898\u4E5F\u4E0D\u77E5\u9053\u5982\u4F55\u53BB\u89E3\u51B3\uFF0C\u5899\u88C2\u5EFA\u8BAE\u5148\u628A<a href="https://cn.vuejs.org/" target="_blank" rel="noreferrer">\u6587\u6863</a>\u719F\u8BFB</p>',6),_=[n];function d(s,l,h,c,o,p){return a(),t("div",null,_)}const m=e(i,[["render",d]]);export{f as __pageData,m as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as t,d as r}from"./app.0ed445b7.js";const f=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"1\u3001\u4E3A\u4EC0\u4E48\u6709\u591A\u4E2A\u7EC4\u4EF6\u5E93\uFF1F","slug":"_1\u3001\u4E3A\u4EC0\u4E48\u6709\u591A\u4E2A\u7EC4\u4EF6\u5E93","link":"#_1\u3001\u4E3A\u4EC0\u4E48\u6709\u591A\u4E2A\u7EC4\u4EF6\u5E93","children":[]},{"level":3,"title":"2\u3001\u6211\u53EF\u4EE5\u7528\u5728\u4E2A\u4EBA\u6216\u516C\u53F8\u7684\u9879\u76EE\u5417\uFF1F","slug":"_2\u3001\u6211\u53EF\u4EE5\u7528\u5728\u4E2A\u4EBA\u6216\u516C\u53F8\u7684\u9879\u76EE\u5417","link":"#_2\u3001\u6211\u53EF\u4EE5\u7528\u5728\u4E2A\u4EBA\u6216\u516C\u53F8\u7684\u9879\u76EE\u5417","children":[]},{"level":3,"title":"3\u3001\u6211\u662F\u4E00\u4E2A\u65B0\u624B\uFF0C\u6709\u4EC0\u4E48\u597D\u7684\u5B66\u4E60\u5EFA\u8BAE\u5417\uFF1F","slug":"_3\u3001\u6211\u662F\u4E00\u4E2A\u65B0\u624B-\u6709\u4EC0\u4E48\u597D\u7684\u5B66\u4E60\u5EFA\u8BAE\u5417","link":"#_3\u3001\u6211\u662F\u4E00\u4E2A\u65B0\u624B-\u6709\u4EC0\u4E48\u597D\u7684\u5B66\u4E60\u5EFA\u8BAE\u5417","children":[]}],"relativePath":"guide/other/index.md","lastUpdated":1672820852000}'),i={name:"guide/other/index.md"},n=r("",6),_=[n];function d(s,l,h,c,o,p){return a(),t("div",null,_)}const m=e(i,[["render",d]]);export{f as __pageData,m as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as t,d as r}from"./app.0ed445b7.js";const m=JSON.parse('{"title":"\u5FEB\u901F\u4E0A\u624B","description":"","frontmatter":{},"headers":[{"level":2,"title":"node \u7248\u672C\u8981\u6C42","slug":"node-\u7248\u672C\u8981\u6C42","link":"#node-\u7248\u672C\u8981\u6C42","children":[]},{"level":2,"title":"\u5305\u7BA1\u7406\u5668","slug":"\u5305\u7BA1\u7406\u5668","link":"#\u5305\u7BA1\u7406\u5668","children":[]},{"level":2,"title":"\u542F\u52A8\u9879\u76EE","slug":"\u542F\u52A8\u9879\u76EE","link":"#\u542F\u52A8\u9879\u76EE","children":[]}],"relativePath":"guide/start.md","lastUpdated":1672820852000}'),n={name:"guide/start.md"},d=r('<h1 id="\u5FEB\u901F\u4E0A\u624B" tabindex="-1">\u5FEB\u901F\u4E0A\u624B <a class="header-anchor" href="#\u5FEB\u901F\u4E0A\u624B" aria-hidden="true">#</a></h1><h2 id="node-\u7248\u672C\u8981\u6C42" tabindex="-1">node \u7248\u672C\u8981\u6C42 <a class="header-anchor" href="#node-\u7248\u672C\u8981\u6C42" aria-hidden="true">#</a></h2><p>\u63A8\u8350 14.19.0+\u4EE5\u4E0A\u7684\u7248\u672C\uFF0C\u6BD5\u7ADF 2022 \u5E74\u4E86\uFF0C\u522B\u6390\u7740 12+\u7684\u7248\u672C\u4E86\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u4F7F\u7528<a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noreferrer">nvm</a>\u6216<a href="https://github.com/coreybutler/nvm-windows" target="_blank" rel="noreferrer">nvm-windows</a>\u5728\u540C\u4E00\u53F0\u7535\u8111\u4E0A\u7BA1\u7406\u591A\u4E2A node \u7248\u672C\u3002</p><h2 id="\u5305\u7BA1\u7406\u5668" tabindex="-1">\u5305\u7BA1\u7406\u5668 <a class="header-anchor" href="#\u5305\u7BA1\u7406\u5668" aria-hidden="true">#</a></h2><p>\u5C3D\u91CF\u4F7F\u7528 yarn \u6216\u8005 pnpm\uFF0C\u672C\u9879\u76EE\u4EC5\u4FDD\u8BC1\u5728 yarn \u6216 pnpm \u4E0B\u6B63\u786E\u8FD0\u884C\uFF0Cnpm \u6D89\u53CA\u5230\u7F51\u7EDC\u73AF\u5883\u7B49\u5404\u79CD\u60C5\u51B5\u7684\u9650\u5236\u4E0D\u505A\u8FC7\u591A\u8003\u8651\u3002\u5982\u8981\u4F7F\u7528 npm \u8BF7\u4E0D\u8981\u5207\u6362\u6DD8\u5B9D\u955C\u50CF\uFF0C\u4F1A\u6709\u5404\u79CD\u5947\u602A\u7684 bug\u3002</p><h2 id="\u542F\u52A8\u9879\u76EE" tabindex="-1">\u542F\u52A8\u9879\u76EE <a class="header-anchor" href="#\u542F\u52A8\u9879\u76EE" aria-hidden="true">#</a></h2><p>\u9879\u76EE\u4E2D\u5305\u542B vue2 \u548C vue3 \u4E24\u5957\u6A21\u7248</p><p>\u5982\u4F60\u4F7F\u7528\u7684\u662F vue2-template\uFF0C\u8BF7\u53C2\u8003<a href="./vue2/start.html">vue2 \u9879\u76EE\u542F\u52A8</a></p><p>\u5982\u4F60\u4F7F\u7528\u7684\u662F vue3-template\uFF0C\u8BF7\u53C2\u8003<a href="./vue3/start.html">vue3 \u9879\u76EE\u542F\u52A8</a></p>',9),h=[d];function i(s,l,o,c,p,_){return a(),t("div",null,h)}const v=e(n,[["render",i]]);export{m as __pageData,v as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as e,o as a,c as t,d as r}from"./app.0ed445b7.js";const m=JSON.parse('{"title":"\u5FEB\u901F\u4E0A\u624B","description":"","frontmatter":{},"headers":[{"level":2,"title":"node \u7248\u672C\u8981\u6C42","slug":"node-\u7248\u672C\u8981\u6C42","link":"#node-\u7248\u672C\u8981\u6C42","children":[]},{"level":2,"title":"\u5305\u7BA1\u7406\u5668","slug":"\u5305\u7BA1\u7406\u5668","link":"#\u5305\u7BA1\u7406\u5668","children":[]},{"level":2,"title":"\u542F\u52A8\u9879\u76EE","slug":"\u542F\u52A8\u9879\u76EE","link":"#\u542F\u52A8\u9879\u76EE","children":[]}],"relativePath":"guide/start.md","lastUpdated":1672820852000}'),n={name:"guide/start.md"},d=r("",9),h=[d];function i(s,l,o,c,p,_){return a(),t("div",null,h)}const v=e(n,[["render",i]]);export{m as __pageData,v as default};
|
||||
1
assets/guide_start.md.e6abe1c0.js
Normal file
1
assets/guide_start.md.e6abe1c0.js
Normal file
@ -0,0 +1 @@
|
||||
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
assets/guide_start.md.e6abe1c0.lean.js
Normal file
1
assets/guide_start.md.e6abe1c0.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as o}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"\u914D\u7F6E alias \u522B\u540D","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","lastUpdated":1672820852000}'),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,10 +1,10 @@
|
||||
import{_ as s,o as a,c as n,d as o}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"\u914D\u7F6E alias \u522B\u540D","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/alias.md"},p=o(`<h1 id="\u914D\u7F6E-alias-\u522B\u540D" tabindex="-1">\u914D\u7F6E alias \u522B\u540D <a class="header-anchor" href="#\u914D\u7F6E-alias-\u522B\u540D" aria-hidden="true">#</a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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;">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>
|
||||
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>
|
||||
<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>
|
||||
<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;">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:#89DDFF;"> </span><span style="color:#676E95;">// \u6DFB\u52A0\u522B\u540D</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:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 添加别名</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">resolve</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">alias</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;">@</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</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;">assets</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/assets</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">))</span></span>
|
||||
1
assets/guide_vue2_alias.md.c70e0ef9.lean.js
Normal file
1
assets/guide_vue2_alias.md.c70e0ef9.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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};
|
||||
79
assets/guide_vue2_axios.md.04119e90.js
Normal file
79
assets/guide_vue2_axios.md.04119e90.js
Normal file
@ -0,0 +1,79 @@
|
||||
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>
|
||||
<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>
|
||||
<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:#676E95;font-style:italic;">// create an axios instance</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> service </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> axios</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#A6ACCD;">(</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;"> baseApi</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// url = base api url + request url</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">withCredentials</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// send cookies when cross-domain requests</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">timeout</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5000</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// request timeout</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>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// request 拦截器 request interceptor</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">service</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(</span></span>
|
||||
<span class="line"><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:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 不传递默认开启loading</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hideloading</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// loading</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loading</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> forbidClick</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</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:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">getters</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">token</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 style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">headers</span><span style="color:#F07178;">[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">X-Token</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:#F07178;"> </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:#A6ACCD;">config</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 style="color:#A6ACCD;font-style:italic;">error</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:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// do something with request error</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// for debug</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:#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:#676E95;font-style:italic;">// respone拦截器</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">service</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">response</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;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#F07178;">()</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;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!==</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">200</span><span style="color:#F07178;">) </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:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">401</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispatch</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">FedLogOut</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</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;">location</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reload</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:#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;">res</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;">error</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;font-style:italic;">else</span><span style="color:#F07178;"> </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:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</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:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">error</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;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">err</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// for debug</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:#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:#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>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 用户信息</span></span>
|
||||
<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;">/user/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;"> 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;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};
|
||||
1
assets/guide_vue2_axios.md.04119e90.lean.js
Normal file
1
assets/guide_vue2_axios.md.04119e90.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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,79 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"Axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/axios.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/axios.md"},o=l(`<h1 id="axios-\u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406" tabindex="-1">Axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406 <a class="header-anchor" href="#axios-\u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406" aria-hidden="true">#</a></h1><p><code>utils/request.js</code> \u5C01\u88C5 axios ,\u5F00\u53D1\u8005\u9700\u8981\u6839\u636E\u540E\u53F0\u63A5\u53E3\u505A\u4FEE\u6539\u3002</p><ul><li><code>service.interceptors.request.use</code> \u91CC\u53EF\u4EE5\u8BBE\u7F6E\u8BF7\u6C42\u5934\uFF0C\u6BD4\u5982\u8BBE\u7F6E <code>token</code></li><li><code>config.hideloading</code> \u662F\u5728 api \u6587\u4EF6\u5939\u4E0B\u7684\u63A5\u53E3\u53C2\u6570\u91CC\u8BBE\u7F6E\uFF0C\u4E0B\u6587\u4F1A\u8BB2</li><li><code>service.interceptors.response.use</code> \u91CC\u53EF\u4EE5\u5BF9\u63A5\u53E3\u8FD4\u56DE\u6570\u636E\u5904\u7406\uFF0C\u6BD4\u5982 401 \u5220\u9664\u672C\u5730\u4FE1\u606F\uFF0C\u91CD\u65B0\u767B\u5F55</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;"> axios </span><span style="color:#89DDFF;">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;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;">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;">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;">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;">// \u6839\u636E\u73AF\u5883\u4E0D\u540C\u5F15\u5165\u4E0D\u540Capi\u5730\u5740</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">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;">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:#676E95;">// create an axios instance</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> service </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> axios</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#A6ACCD;">(</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;"> baseApi</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// url = base api url + request url</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">withCredentials</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// send cookies when cross-domain requests</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">timeout</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5000</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// request timeout</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>
|
||||
<span class="line"><span style="color:#676E95;">// request \u62E6\u622A\u5668 request interceptor</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">service</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">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:#89DDFF;"> </span><span style="color:#676E95;">// \u4E0D\u4F20\u9012\u9ED8\u8BA4\u5F00\u542Floading</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hideloading</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// loading</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loading</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> forbidClick</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</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:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">getters</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">token</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 style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">headers</span><span style="color:#F07178;">[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">X-Token</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:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">config</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 style="color:#A6ACCD;">error</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:#89DDFF;"> </span><span style="color:#676E95;">// do something with request error</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// for debug</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">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:#676E95;">// respone\u62E6\u622A\u5668</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">service</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">response</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;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#F07178;">()</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;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!==</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">200</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// \u767B\u5F55\u8D85\u65F6,\u91CD\u65B0\u767B\u5F55</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">401</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispatch</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">FedLogOut</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</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;">location</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reload</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:#F07178;"> </span><span style="color:#89DDFF;">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;">res</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;">error</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;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</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:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">error</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;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">err</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// for debug</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">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;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">default</span><span style="color:#A6ACCD;"> service</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div><h4 id="\u63A5\u53E3\u7BA1\u7406" tabindex="-1">\u63A5\u53E3\u7BA1\u7406 <a class="header-anchor" href="#\u63A5\u53E3\u7BA1\u7406" aria-hidden="true">#</a></h4><p>\u5728<code>src/api</code> \u6587\u4EF6\u5939\u4E0B\u7EDF\u4E00\u7BA1\u7406\u63A5\u53E3</p><ul><li>\u4F60\u53EF\u4EE5\u5EFA\u7ACB\u591A\u4E2A\u6A21\u5757\u5BF9\u63A5\u63A5\u53E3, \u6BD4\u5982 <code>home.js</code> \u91CC\u662F\u9996\u9875\u7684\u63A5\u53E3\u8FD9\u91CC\u8BB2\u89E3 <code>user.js</code></li><li><code>url</code> \u63A5\u53E3\u5730\u5740\uFF0C\u8BF7\u6C42\u7684\u65F6\u5019\u4F1A\u62FC\u63A5\u4E0A <code>config</code> \u4E0B\u7684 <code>baseApi</code></li><li><code>method</code> \u8BF7\u6C42\u65B9\u6CD5</li><li><code>data</code> \u8BF7\u6C42\u53C2\u6570 <code>qs.stringify(params)</code> \u662F\u5BF9\u6570\u636E\u7CFB\u5217\u5316\u64CD\u4F5C</li><li><code>hideloading</code> \u9ED8\u8BA4 <code>false</code>,\u8BBE\u7F6E\u4E3A <code>true</code> \u540E\uFF0C\u4E0D\u663E\u793A loading ui \u4EA4\u4E92\u4E2D\u6709\u4E9B\u63A5\u53E3\u4E0D\u9700\u8981\u8BA9\u7528\u6237\u611F\u77E5</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;"> qs </span><span style="color:#89DDFF;">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;">// axios</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;"> request </span><span style="color:#89DDFF;">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;">//user api</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;">// \u7528\u6237\u4FE1\u606F</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">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;">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;">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;">/user/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;"> 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;">// \u9690\u85CF loading \u7EC4\u4EF6</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="\u5982\u4F55\u8C03\u7528" tabindex="-1">\u5982\u4F55\u8C03\u7528 <a class="header-anchor" href="#\u5982\u4F55\u8C03\u7528" aria-hidden="true">#</a></h4><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// \u8BF7\u6C42\u63A5\u53E3</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">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;">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=[o];function c(t,r,F,D,y,A){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"Axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/axios.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/axios.md"},o=l("",10),e=[o];function c(t,r,F,D,y,A){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as p}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"Webpack 4 vue.config.js \u57FA\u7840\u914D\u7F6E","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/base.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/base.md"},o=p("",7),e=[o];function c(t,r,F,D,y,i){return n(),a("div",null,e)}const u=s(l,[["render",c]]);export{A as __pageData,u as default};
|
||||
@ -1,18 +1,18 @@
|
||||
import{_ as s,o as n,c as a,d as p}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"Webpack 4 vue.config.js \u57FA\u7840\u914D\u7F6E","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/base.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/base.md"},o=p(`<h1 id="webpack-4-vue-config-js-\u57FA\u7840\u914D\u7F6E" tabindex="-1">Webpack 4 vue.config.js \u57FA\u7840\u914D\u7F6E <a class="header-anchor" href="#webpack-4-vue-config-js-\u57FA\u7840\u914D\u7F6E" aria-hidden="true">#</a></h1><p>\u5982\u679C\u4F60\u7684 <code>Vue Router</code> \u6A21\u5F0F\u662F hash</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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>\u5982\u679C\u4F60\u7684 <code>Vue Router</code> \u6A21\u5F0F\u662F history \u8FD9\u91CC\u7684 publicPath \u548C\u4F60\u7684 <code>Vue Router</code> <code>base</code> <strong>\u4FDD\u6301\u4E00\u81F4</strong></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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>\u914D\u7F6E\u5982\u4E0B</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#89DDFF;">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;">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;">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;">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;">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;">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>
|
||||
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>
|
||||
<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>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> pathResolve </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">dir</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</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:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">process</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cwd</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 style="color:#F07178;"> </span><span style="color:#A6ACCD;">dir</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> pathResolve </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:#FFCB6B;">string</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:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">process</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cwd</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 style="color:#F07178;"> </span><span style="color:#A6ACCD;">dir</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>
|
||||
<span class="line"><span style="color:#676E95;">// https://vitejs.dev/config/</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">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;">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:#676E95;font-style:italic;">// https://vitejs.dev/config/</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;"> </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:#C792EA;">const</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">root</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">process</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">cwd</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </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;"> </span><span style="color:#A6ACCD;">root</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> resolve</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> alias</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span></span>
|
||||
@ -20,12 +20,12 @@ import{_ as s,o as n,c as a,d as p}from"./app.0ed445b7.js";const A=JSON.parse('{
|
||||
<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>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// /@/xxxx => src/xxxx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// /@/xxxx => src/xxxx</span></span>
|
||||
<span class="line"><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:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\\/</span><span style="color:#C3E88D;">@</span><span style="color:#A6ACCD;">\\/</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:#82AAFF;">pathResolve</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">src</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:#89DDFF;"> </span><span style="color:#676E95;">// /#/xxxx => types/xxxx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// /#/xxxx => types/xxxx</span></span>
|
||||
<span class="line"><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:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\\/</span><span style="color:#C3E88D;">#</span><span style="color:#A6ACCD;">\\/</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:#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>
|
||||
@ -40,11 +40,11 @@ import{_ as s,o as n,c as a,d as p}from"./app.0ed445b7.js";const A=JSON.parse('{
|
||||
<span class="line"><span style="color:#F07178;"> 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;"> preprocessorOptions</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> scss</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 style="color:#676E95;">// \u914D\u7F6E nutui \u5168\u5C40 scss \u53D8\u91CF</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 配置 nutui 全局 scss 变量</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> additionalData</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">@import "@nutui/nutui/dist/styles/variables.scss";@import '/@/styles/mixin.scss';</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:#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 c(t,r,F,D,y,i){return n(),a("div",null,e)}const u=s(l,[["render",c]]);export{A as __pageData,u as default};
|
||||
<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};
|
||||
1
assets/guide_vue2_base.md.4d4b64f8.lean.js
Normal file
1
assets/guide_vue2_base.md.4d4b64f8.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const C=JSON.parse('{"title":"\u914D\u7F6E\u6253\u5305\u5206\u6790","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/bundle.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/bundle.md"},o=l("",3),e=[o];function c(t,r,F,D,y,i){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{C as __pageData,d as default};
|
||||
@ -1,10 +1,10 @@
|
||||
import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const C=JSON.parse('{"title":"\u914D\u7F6E\u6253\u5305\u5206\u6790","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/bundle.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/bundle.md"},o=l(`<h1 id="\u914D\u7F6E\u6253\u5305\u5206\u6790" tabindex="-1">\u914D\u7F6E\u6253\u5305\u5206\u6790 <a class="header-anchor" href="#\u914D\u7F6E\u6253\u5305\u5206\u6790" aria-hidden="true">#</a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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,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>
|
||||
<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>
|
||||
<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;">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:#89DDFF;"> </span><span style="color:#676E95;">// \u6253\u5305\u5206\u6790</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">IS_PROD</span><span style="color:#F07178;">) </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:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 打包分析</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">IS_PROD</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 style="color:#89DDFF;">.</span><span style="color:#82AAFF;">plugin</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">webpack-report</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">BundleAnalyzerPlugin</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>
|
||||
<span class="line"><span style="color:#F07178;"> analyzerMode</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">static</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
@ -13,5 +13,5 @@ import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const C=JSON.parse('{
|
||||
<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"><code><span class="line"><span style="color:#A6ACCD;">npm run build</span></span>
|
||||
<span class="line"></span></code></pre></div>`,3),e=[o];function c(t,r,F,D,y,i){return n(),a("div",null,e)}const d=s(p,[["render",c]]);export{C as __pageData,d as default};
|
||||
<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};
|
||||
1
assets/guide_vue2_bundle.md.df9a7fcb.lean.js
Normal file
1
assets/guide_vue2_bundle.md.df9a7fcb.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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,36 +1,36 @@
|
||||
import{_ as s,o as n,c as a,d as p}from"./app.0ed445b7.js";const u=JSON.parse('{"title":"splitChunks \u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/chunks.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/chunks.md"},o=p(`<h1 id="splitchunks-\u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757" tabindex="-1">splitChunks \u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757 <a class="header-anchor" href="#splitchunks-\u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757" aria-hidden="true">#</a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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;">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;">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>
|
||||
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>
|
||||
<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>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">plugin</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">ScriptExtHtmlWebpackPlugin</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;">after</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">html</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;">use</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">script-ext-html-webpack-plugin</span><span style="color:#89DDFF;">"</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>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// \u5C06 runtime \u4F5C\u4E3A\u5185\u8054\u5F15\u5165\u4E0D\u5355\u72EC\u5B58\u5728</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> inline</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#C3E88D;">runtime</span><span style="color:#A6ACCD;">\\.</span><span style="color:#C3E88D;">.</span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;">\\.</span><span style="color:#C3E88D;">js</span><span style="color:#89DDFF;">$</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 将 runtime 作为内联引入不单独存在</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> inline</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#C3E88D;">runtime</span><span style="color:#A6ACCD;">\\.</span><span style="color:#C3E88D;">.</span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;">\\.</span><span style="color:#C3E88D;">js</span><span style="color:#89DDFF;font-style:italic;">$</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>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">end</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 style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">optimization</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">splitChunks</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> chunks</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">all</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> cacheGroups</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 style="color:#676E95;">// cacheGroups \u4E0B\u53EF\u4EE5\u53EF\u4EE5\u914D\u7F6E\u591A\u4E2A\u7EC4\uFF0C\u6BCF\u4E2A\u7EC4\u6839\u636Etest\u8BBE\u7F6E\u6761\u4EF6\uFF0C\u7B26\u5408test\u6761\u4EF6\u7684\u6A21\u5757</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// cacheGroups 下可以可以配置多个组，每个组根据test设置条件，符合test条件的模块</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> commons</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">chunk-commons</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> test</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;"> minChunks</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// \u88AB\u81F3\u5C11\u7528\u4E09\u6B21\u4EE5\u4E0A\u6253\u5305\u5206\u79BB</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> priority</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// \u4F18\u5148\u7EA7</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> reuseExistingChunk</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;">// \u8868\u793A\u662F\u5426\u4F7F\u7528\u5DF2\u6709\u7684 chunk\uFF0C\u5982\u679C\u4E3A true \u5219\u8868\u793A\u5982\u679C\u5F53\u524D\u7684 chunk \u5305\u542B\u7684\u6A21\u5757\u5DF2\u7ECF\u88AB\u62BD\u53D6\u51FA\u53BB\u4E86\uFF0C\u90A3\u4E48\u5C06\u4E0D\u4F1A\u91CD\u65B0\u751F\u6210\u65B0\u7684\u3002</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> minChunks</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 被至少用三次以上打包分离</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> priority</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 优先级</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> reuseExistingChunk</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;">// 表示是否使用已有的 chunk，如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了，那么将不会重新生成新的。</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> node_vendors</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">chunk-libs</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> chunks</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">initial</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// \u53EA\u6253\u5305\u521D\u59CB\u65F6\u4F9D\u8D56\u7684\u7B2C\u4E09\u65B9</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> chunks</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">initial</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 只打包初始时依赖的第三方</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> test</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/[</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">/</span><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:#C3E88D;">/</span><span style="color:#89DDFF;">]/</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> priority</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">10</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;"> vantUI</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">chunk-vantUI</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// \u5355\u72EC\u5C06 vantUI \u62C6\u5305</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> priority</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// \u6570\u5B57\u5927\u6743\u91CD\u5230\uFF0C\u6EE1\u8DB3\u591A\u4E2A cacheGroups \u7684\u6761\u4EF6\u65F6\u5019\u5206\u5230\u6743\u91CD\u9AD8\u7684</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> name</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">chunk-vantUI</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 单独将 vantUI 拆包</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> priority</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> test</span><span style="color:#89DDFF;">:</span><span style="color:#C3E88D;"> </span><span style="color:#89DDFF;">/[</span><span style="color:#A6ACCD;">\\\\</span><span style="color:#C3E88D;">/</span><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:#C3E88D;">/</span><span style="color:#89DDFF;">]</span><span style="color:#C3E88D;">_</span><span style="color:#89DDFF;">?</span><span style="color:#C3E88D;">vant</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>
|
||||
@ -39,4 +39,4 @@ import{_ as s,o as n,c as a,d as p}from"./app.0ed445b7.js";const u=JSON.parse('{
|
||||
<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),e=[o];function t(c,F,r,D,y,i){return n(),a("div",null,e)}const A=s(l,[["render",t]]);export{u as __pageData,A as default};
|
||||
<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};
|
||||
1
assets/guide_vue2_chunks.md.1003bcce.lean.js
Normal file
1
assets/guide_vue2_chunks.md.1003bcce.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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,d as p}from"./app.0ed445b7.js";const u=JSON.parse('{"title":"splitChunks \u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/chunks.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/chunks.md"},o=p("",2),e=[o];function t(c,F,r,D,y,i){return n(),a("div",null,e)}const A=s(l,[["render",t]]);export{u as __pageData,A as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"\u53BB\u6389 console.log","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/console.md","lastUpdated":1672820852000}'),o={name:"guide/vue2/console.md"},p=l("",5),e=[p];function c(t,r,D,y,F,C){return n(),a("div",null,e)}const u=s(o,[["render",c]]);export{i as __pageData,u as default};
|
||||
@ -1,5 +1,5 @@
|
||||
import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"\u53BB\u6389 console.log","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/console.md","lastUpdated":1672820852000}'),o={name:"guide/vue2/console.md"},p=l(`<h1 id="\u53BB\u6389-console-log" tabindex="-1">\u53BB\u6389 console.log <a class="header-anchor" href="#\u53BB\u6389-console-log" aria-hidden="true">#</a></h1><p>\u4FDD\u7559\u4E86\u6D4B\u8BD5\u73AF\u5883\u548C\u672C\u5730\u73AF\u5883\u7684 <code>console.log</code></p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;">npm i -D babel-plugin-transform-remove-console</span></span>
|
||||
<span class="line"></span></code></pre></div><p>\u5728 babel.config.js \u4E2D\u914D\u7F6E</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// \u83B7\u53D6 VUE_APP_ENV \u975E NODE_ENV\uFF0C\u6D4B\u8BD5\u73AF\u5883\u4F9D\u7136 console</span></span>
|
||||
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>
|
||||
<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>
|
||||
@ -12,8 +12,8 @@ import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{
|
||||
<span class="line"><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;"> ]</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:#676E95;">// \u53BB\u9664 console.log</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">if</span><span style="color:#A6ACCD;"> (IS_PROD) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// 去除 console.log</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#A6ACCD;"> (IS_PROD) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">plugins</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">push</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">transform-remove-console</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>
|
||||
@ -21,4 +21,4 @@ import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{
|
||||
<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 c(t,r,D,y,F,C){return n(),a("div",null,e)}const u=s(o,[["render",c]]);export{i as __pageData,u as default};
|
||||
<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};
|
||||
1
assets/guide_vue2_console.md.b11c98af.lean.js
Normal file
1
assets/guide_vue2_console.md.b11c98af.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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};
|
||||
30
assets/guide_vue2_env.md.22af29a2.js
Normal file
30
assets/guide_vue2_env.md.22af29a2.js
Normal file
@ -0,0 +1,30 @@
|
||||
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>
|
||||
<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:#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:#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:#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:#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;"> </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;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};
|
||||
1
assets/guide_vue2_env.md.22af29a2.lean.js
Normal file
1
assets/guide_vue2_env.md.22af29a2.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as o}from"./app.0ed445b7.js";const C=JSON.parse('{"title":"\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/env.md"},l=o(`<h1 id="\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF" tabindex="-1">\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF <a class="header-anchor" href="#\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF" aria-hidden="true">#</a></h1><p><code>package.json</code> \u91CC\u7684 <code>scripts</code> \u914D\u7F6E <code>serve</code> <code>stage</code> <code>build</code>\uFF0C\u901A\u8FC7 <code>--mode xxx</code> \u6765\u6267\u884C\u4E0D\u540C\u73AF\u5883</p><ul><li>\u901A\u8FC7 <code>npm run serve</code> \u542F\u52A8\u672C\u5730 , \u6267\u884C <code>development</code></li><li>\u901A\u8FC7 <code>npm run stage</code> \u6253\u5305\u6D4B\u8BD5 , \u6267\u884C <code>staging</code></li><li>\u901A\u8FC7 <code>npm run build</code> \u6253\u5305\u6B63\u5F0F , \u6267\u884C <code>production</code></li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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="\u914D\u7F6E\u4ECB\u7ECD" tabindex="-1">\u914D\u7F6E\u4ECB\u7ECD <a class="header-anchor" href="#\u914D\u7F6E\u4ECB\u7ECD" aria-hidden="true">#</a></h5><p>\u2003\u2003\u4EE5 <code>VUE_APP_</code> \u5F00\u5934\u7684\u53D8\u91CF\uFF0C\u5728\u4EE3\u7801\u4E2D\u53EF\u4EE5\u901A\u8FC7 <code>p<wbr>rocess.env.VUE_APP_</code> \u8BBF\u95EE\u3002<br> \u2003\u2003\u6BD4\u5982,<code>VUE_APP_ENV = 'development'</code> \u901A\u8FC7<code>p<wbr>rocess.env.VUE_APP_ENV</code> \u8BBF\u95EE\u3002<br> \u2003\u2003\u9664\u4E86 <code>VUE_APP_*</code> \u53D8\u91CF\u4E4B\u5916\uFF0C\u5728\u4F60\u7684\u5E94\u7528\u4EE3\u7801\u4E2D\u59CB\u7EC8\u53EF\u7528\u7684\u8FD8\u6709\u4E24\u4E2A\u7279\u6B8A\u7684\u53D8\u91CF<code>NODE_ENV</code> \u548C<code>BASE_URL</code></p><p>\u5728\u9879\u76EE\u6839\u76EE\u5F55\u4E2D\u65B0\u5EFA<code>.env.*</code></p><ul><li>.env.development \u672C\u5730\u5F00\u53D1\u73AF\u5883\u914D\u7F6E</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV=</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;"># must start with VUE_APP_</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">VUE_APP_ENV = </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 \u6D4B\u8BD5\u73AF\u5883\u914D\u7F6E</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV=</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;"># must start with VUE_APP_</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">VUE_APP_ENV = </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 \u6B63\u5F0F\u73AF\u5883\u914D\u7F6E</li></ul><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;"> NODE_ENV=</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;"># must start with VUE_APP_</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">VUE_APP_ENV = </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>\u8FD9\u91CC\u6211\u4EEC\u5E76\u6CA1\u6709\u5B9A\u4E49\u5F88\u591A\u53D8\u91CF\uFF0C\u53EA\u5B9A\u4E49\u4E86\u57FA\u7840\u7684 VUE_APP_ENV <code>development</code> <code>staging</code> <code>production</code><br> \u53D8\u91CF\u6211\u4EEC\u7EDF\u4E00\u5728 <code>src/config/env.*.js</code> \u91CC\u8FDB\u884C\u7BA1\u7406\u3002</p><p>\u8FD9\u91CC\u6709\u4E2A\u95EE\u9898\uFF0C\u65E2\u7136\u8FD9\u91CC\u6709\u4E86\u6839\u636E\u4E0D\u540C\u73AF\u5883\u8BBE\u7F6E\u53D8\u91CF\u7684\u6587\u4EF6\uFF0C\u4E3A\u4EC0\u4E48\u8FD8\u8981\u53BB config \u4E0B\u65B0\u5EFA\u4E09\u4E2A\u5BF9\u5E94\u7684\u6587\u4EF6\u5462\uFF1F<br><strong>\u4FEE\u6539\u8D77\u6765\u65B9\u4FBF\uFF0C\u4E0D\u9700 \u8981\u91CD\u542F\u9879\u76EE\uFF0C\u7B26\u5408\u5F00\u53D1\u4E60\u60EF\u3002</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"><code><span class="line"><span style="color:#676E95;">// \u6839\u636E\u73AF\u5883\u5F15\u5165\u4E0D\u540C\u914D\u7F6E 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>\u914D\u7F6E\u5BF9\u5E94\u73AF\u5883\u7684\u53D8\u91CF\uFF0C\u62FF\u672C\u5730\u73AF\u5883\u6587\u4EF6 <code>env.development.js</code> \u4E3E\u4F8B\uFF0C\u7528\u6237\u53EF\u4EE5\u6839\u636E\u9700\u6C42\u4FEE\u6539</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// \u672C\u5730\u73AF\u5883\u914D\u7F6E</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;">// \u9879\u76EE\u5730\u5740</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;">// \u672C\u5730api\u8BF7\u6C42\u5730\u5740</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>\u6839\u636E\u73AF\u5883\u4E0D\u540C\uFF0C\u53D8\u91CF\u5C31\u4F1A\u4E0D\u540C\u4E86</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// \u6839\u636E\u73AF\u5883\u4E0D\u540C\u5F15\u5165\u4E0D\u540CbaseApi\u5730\u5740</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">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;">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=[l];function c(t,r,D,y,F,i){return a(),n("div",null,e)}const A=s(p,[["render",c]]);export{C as __pageData,A as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as o}from"./app.0ed445b7.js";const C=JSON.parse('{"title":"\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/env.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/env.md"},l=o("",21),e=[l];function c(t,r,D,y,F,i){return a(),n("div",null,e)}const A=s(p,[["render",c]]);export{C as __pageData,A as default};
|
||||
@ -1,8 +1,8 @@
|
||||
import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"\u914D\u7F6E externals \u5F15\u5165 cdn \u8D44\u6E90","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/externals.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/externals.md"},o=l(`<h1 id="\u914D\u7F6E-externals-\u5F15\u5165-cdn-\u8D44\u6E90" tabindex="-1">\u914D\u7F6E externals \u5F15\u5165 cdn \u8D44\u6E90 <a class="header-anchor" href="#\u914D\u7F6E-externals-\u5F15\u5165-cdn-\u8D44\u6E90" aria-hidden="true">#</a></h1><p>\u8FD9\u4E2A\u7248\u672C CDN \u4E0D\u518D\u5F15\u5165\uFF0C\u6211\u6D4B\u8BD5\u4E86\u4E00\u4E0B\u4F7F\u7528\u5F15\u5165 CDN \u548C\u4E0D\u4F7F\u7528,\u4E0D\u4F7F\u7528\u4F1A\u6BD4\u4F7F\u7528\u65F6\u95F4\u5C11\u3002\u7F51\u4E0A\u4E0D\u5C11\u6587\u7AE0\u6D4B\u8BD5 CDN \u901F\u5EA6\u5757\uFF0C\u8FD9\u4E2A\u5F00\u53D1\u8005\u53EF \u4EE5\u5B9E\u9645\u6D4B\u8BD5\u4E00\u4E0B\u3002</p><p>\u53E6\u5916\u9879\u76EE\u4E2D\u4F7F\u7528\u7684\u662F\u516C\u5171 CDN \u4E0D\u7A33\u5B9A\uFF0C\u57DF\u540D\u89E3\u6790\u4E5F\u662F\u9700\u8981\u65F6\u95F4\u7684\uFF08\u5982\u679C\u4F60\u8981\u4F7F\u7528\u8BF7\u5C3D\u91CF\u4F7F\u7528\u540C\u4E00\u4E2A\u57DF\u540D\uFF09</p><p>\u56E0\u4E3A\u9875\u9762\u6BCF\u6B21\u9047\u5230<code><script></code>\u6807\u7B7E\u90FD\u4F1A\u505C\u4E0B\u6765\u89E3\u6790\u6267\u884C\uFF0C\u6240\u4EE5\u5E94\u8BE5\u5C3D\u53EF\u80FD\u51CF\u5C11<code><script></code>\u6807\u7B7E\u7684\u6570\u91CF <code>HTTP</code>\u8BF7\u6C42\u5B58\u5728\u4E00\u5B9A\u7684\u5F00\u9500\uFF0C100K \u7684\u6587\u4EF6\u6BD4 5 \u4E2A 20K \u7684\u6587\u4EF6\u4E0B\u8F7D\u7684\u66F4\u5FEB\uFF0C\u6240\u4EE5\u8F83\u5C11\u811A\u672C\u6570\u91CF\u4E5F\u662F\u5F88\u6709\u5FC5\u8981\u7684</p><p>\u6682\u65F6\u8FD8\u6CA1\u6709\u7814\u7A76\u653E\u5230\u81EA\u5DF1\u7684 cdn \u670D\u52A1\u5668\u4E0A\u3002</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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,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>
|
||||
<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>
|
||||
<span class="line"><span style="color:#676E95;">// externals</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// externals</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> externals </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;">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:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">vue-router</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;">VueRouter</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
@ -10,14 +10,14 @@ import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">vant</span><span style="color:#89DDFF;">:</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;"> </span><span style="color:#F07178;">axios</span><span style="color:#89DDFF;">:</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;">};</span></span>
|
||||
<span class="line"><span style="color:#676E95;">// CDN\u5916\u94FE\uFF0C\u4F1A\u63D2\u5165\u5230index.html\u4E2D</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// CDN外链，会插入到index.html中</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> cdn </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;">// \u5F00\u53D1\u73AF\u5883</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;">dev</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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">js</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:#89DDFF;"> </span><span style="color:#676E95;">// \u751F\u4EA7\u73AF\u5883</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;">build</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 style="color:#C3E88D;">https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css</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;">js</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
@ -30,37 +30,37 @@ import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{
|
||||
<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 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;">configureWebpack</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">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:#A6ACCD;"> </span><span style="color:#82AAFF;">configureWebpack</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:#A6ACCD;">name</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">name</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// \u4E3A\u751F\u4EA7\u73AF\u5883\u4FEE\u6539\u914D\u7F6E...</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">IS_PROD</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// externals</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:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">IS_PROD</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// externals</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">externals</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">externals</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:#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;">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:#676E95;">/**</span></span>
|
||||
<span class="line"><span style="color:#676E95;"> * \u6DFB\u52A0CDN\u53C2\u6570\u5230htmlWebpackPlugin\u914D\u7F6E\u4E2D</span></span>
|
||||
<span class="line"><span style="color:#676E95;"> */</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;">plugin</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">tap</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">args</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:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">IS_PROD</span><span style="color:#F07178;">) </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:#676E95;font-style:italic;">/**</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> * 添加CDN参数到htmlWebpackPlugin配置中</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;"> */</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;">plugin</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">tap</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">args</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:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">IS_PROD</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cdn</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">cdn</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">build</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;">else</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;font-style:italic;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">args</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">]</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">cdn</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">cdn</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">dev</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;">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;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>\u5728 public/index.html \u4E2D\u6DFB\u52A0</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><!--</span><span style="color:#A6ACCD;"> \u4F7F\u7528CDN\u7684CSS\u6587\u4EF6 </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;">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></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:#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>
|
||||
<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;">stylesheet</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 style="color:#F07178;"> </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:#A6ACCD;"> \u4F7F\u7528CDN\u52A0\u901F\u7684JS\u6587\u4EF6\uFF0C\u914D\u7F6E\u5728vue</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">js\u4E0B </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;">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;"> </span><span style="color:#89DDFF;"><!--</span><span style="color:#A6ACCD;"> 使用CDN加速的JS文件，配置在vue</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">js下 </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;">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),e=[o];function t(c,D,r,F,y,C){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
|
||||
<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};
|
||||
1
assets/guide_vue2_externals.md.8f341913.lean.js
Normal file
1
assets/guide_vue2_externals.md.8f341913.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"\u914D\u7F6E externals \u5F15\u5165 cdn \u8D44\u6E90","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/externals.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/externals.md"},o=l("",8),e=[o];function t(c,D,r,F,y,C){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
|
||||
14
assets/guide_vue2_ie.md.8d30e4b5.js
Normal file
14
assets/guide_vue2_ie.md.8d30e4b5.js
Normal file
@ -0,0 +1,14 @@
|
||||
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>
|
||||
<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>
|
||||
<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};
|
||||
1
assets/guide_vue2_ie.md.8d30e4b5.lean.js
Normal file
1
assets/guide_vue2_ie.md.8d30e4b5.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as o}from"./app.0ed445b7.js";const C=JSON.parse('{"title":"\u6DFB\u52A0 IE \u517C\u5BB9","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/ie.md","lastUpdated":1672820852000}'),e={name:"guide/vue2/ie.md"},l=o(`<h1 id="\u6DFB\u52A0-ie-\u517C\u5BB9" tabindex="-1">\u6DFB\u52A0 IE \u517C\u5BB9 <a class="header-anchor" href="#\u6DFB\u52A0-ie-\u517C\u5BB9" aria-hidden="true">#</a></h1><p>\u4E4B\u524D\u7684\u65B9\u5F0F \u4F1A\u62A5 <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> \u5E9F\u5F03\uFF0C\u4F7F\u7528 <code>core-js</code> \u548C <code>regenerator-runtime</code></p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;">npm i --save core-js regenerator-runtime</span></span>
|
||||
<span class="line"></span></code></pre></div><p>\u5728 <code>main.js</code> \u4E2D\u6DFB\u52A0</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// \u517C\u5BB9 IE</span></span>
|
||||
<span class="line"><span style="color:#676E95;">// 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;">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;">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>\u914D\u7F6E <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"><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=[l];function t(c,r,i,D,y,d){return a(),n("div",null,p)}const u=s(e,[["render",t]]);export{C as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as o}from"./app.0ed445b7.js";const C=JSON.parse('{"title":"\u6DFB\u52A0 IE \u517C\u5BB9","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/ie.md","lastUpdated":1672820852000}'),e={name:"guide/vue2/ie.md"},l=o("",8),p=[l];function t(c,r,i,D,y,d){return a(),n("div",null,p)}const u=s(e,[["render",t]]);export{C as __pageData,u as default};
|
||||
@ -1,152 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as o}from"./app.0ed445b7.js";const u=JSON.parse('{"title":"Eslint + Pettier \u7EDF\u4E00\u5F00\u53D1\u89C4\u8303","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/lint.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/lint.md"},p=o(`<h1 id="eslint-pettier-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303" tabindex="-1">Eslint + Pettier \u7EDF\u4E00\u5F00\u53D1\u89C4\u8303 <a class="header-anchor" href="#eslint-pettier-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303" aria-hidden="true">#</a></h1><p>VScode \uFF08\u7248\u672C 1.47.3\uFF09\u5B89\u88C5 <code>eslint</code> <code>prettier</code> <code>vetur</code> \u63D2\u4EF6 <code>.vue</code> \u6587\u4EF6\u4F7F\u7528 vetur \u8FDB\u884C\u683C\u5F0F\u5316\uFF0C\u5176\u4ED6\u4F7F\u7528<code>prettier</code>,\u540E\u9762\u4F1A \u4E13\u95E8\u5199\u4E2A\u5982\u4F55\u4F7F\u7528\u914D\u5408\u4F7F\u7528\u8FD9\u4E09\u4E2A\u73A9\u610F</p><p>\u5728\u6587\u4EF6 <code>.prettierrc</code> \u91CC\u5199 \u5C5E\u4E8E\u4F60\u7684 pettier \u89C4\u5219</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">printWidth</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 120,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">tabWidth</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 2,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">singleQuote</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">semi</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">wrap_line_length</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 120,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">bracketSpacing</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">jsxBracketSameLine</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">useTabs</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">options</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:#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 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>Vscode setting.json \u8BBE\u7F6E</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // \u5C06\u8BBE\u7F6E\u653E\u5165\u6B64\u6587\u4EF6\u4E2D\u4EE5\u8986\u76D6\u9ED8\u8BA4\u8BBE\u7F6E</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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;"> // \u63A7\u5236\u5B57\u4F53\u7CFB\u5217\u3002</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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,'\u5B8B\u4F53'</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;">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;"> // \u4EE5\u50CF\u7D20\u4E3A\u5355\u4F4D\u63A7\u5236\u5B57\u53F7\u3002</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.fontSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 16,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // \u63A7\u5236\u9009\u53D6\u8303\u56F4\u662F\u5426\u6709\u5706\u89D2</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.roundedSelection</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // \u5EFA\u8BAE\u5C0F\u7EC4\u4EF6\u7684\u5B57\u53F7</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.suggestFontSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 16,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // \u5728\u201C\u6253\u5F00\u7684\u7F16\u8F91\u5668\u201D\u7A97\u683C\u4E2D\u663E\u793A\u7684\u7F16\u8F91\u5668\u6570\u91CF\u3002\u5C06\u5176\u8BBE\u7F6E\u4E3A 0 \u53EF\u9690\u85CF\u7A97\u683C\u3002</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">explorer.openEditors.visible</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 0,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // \u662F\u5426\u5DF2\u542F\u7528\u81EA\u52A8\u5237\u65B0</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">git.autorefresh</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // \u4EE5\u50CF\u7D20\u4E3A\u5355\u4F4D\u63A7\u5236\u7EC8\u7AEF\u7684\u5B57\u53F7\uFF0C\u8FD9\u662F editor.fontSize \u7684\u9ED8\u8BA4\u503C\u3002</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">terminal.integrated.fontSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 14,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // \u63A7\u5236\u7EC8\u7AEF\u6E38\u6807\u662F\u5426\u95EA\u70C1\u3002</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">terminal.integrated.cursorBlinking</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // \u4E00\u4E2A\u5236\u8868\u7B26\u7B49\u4E8E\u7684\u7A7A\u683C\u6570\u3002\u8BE5\u8BBE\u7F6E\u5728 </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">editor.detectIndentation</span><span style="color:#89DDFF;">\`</span><span style="color:#A6ACCD;"> \u542F\u7528\u65F6\u6839\u636E\u6587\u4EF6\u5185\u5BB9\u8FDB\u884C\u91CD\u5199\u3002</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // Tab Size</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.tabSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 2,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // By default, common template. Do not modify it</span><span style="color:#89DDFF;">!!!!!</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.formatOnType</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">window.zoomLevel</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 0,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.detectIndentation</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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;"> // \u4E3A\u6307\u5B9A\u7684\u8BED\u6CD5\u5B9A\u4E49\u914D\u7F6E\u6587\u4EF6\u6216\u4F7F\u7528\u5E26\u6709\u7279\u5B9A\u89C4\u5219\u7684\u914D\u7F6E\u6587\u4EF6\u3002</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">**/node_modules</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#82AAFF;">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;"> //\u4FDD\u5B58\u65F6eslint\u81EA\u52A8\u4FEE\u590D\u9519\u8BEF</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.formatOnSave</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // Enable per-language</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> //\u914D\u7F6E ESLint \u68C0\u67E5\u7684\u6587\u4EF6\u7C7B\u578B</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">strings</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: </span><span style="color:#82AAFF;">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;"> // \u6DFB\u52A0 vue \u652F\u6301</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> // \u8FD9\u91CC\u662F\u9488\u5BF9vue\u6587\u4EF6\u7684\u683C\u5F0F\u5316\u8BBE\u7F6E\uFF0Cvue\u7684\u89C4\u5219\u5728\u8FD9\u91CC\u751F\u6548</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vetur.format.options.tabSize</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 2,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vetur.format.options.useTabs</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#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 style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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;">, // \u8D85\u8FC7150\u6298\u884C</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">wrap-line-length</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 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:#676E95;">#vue\u7EC4\u4EF6\u4E2Dhtml\u4EE3\u7801\u683C\u5F0F\u5316\u6837\u5F0F</span></span>
|
||||
<span class="line"><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 style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">printWidth</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 120,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">tabWidth</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 2,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">singleQuote</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">semi</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">wrap_line_length</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 120,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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;">, // \u8D85\u8FC7150\u6298\u884C</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">bracketSpacing</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">jsxBracketSameLine</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">useTabs</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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 style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">options</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:#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 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:#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;"> // Enable per-language</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#89DDFF;">"</span><span style="color:#C3E88D;">vetur.validation.template</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">html.format.enable</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">json.format.enable</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">javascript.format.enable</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">typescript.format.enable</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: false,</span></span>
|
||||
<span class="line"><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 style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#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:#A6ACCD;"> </span><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:#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:#A6ACCD;"> </span><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:#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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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;"> // \u5F00\u542Feslint\u81EA\u52A8\u4FEE\u590Djs/ts\u529F\u80FD</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><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:#A6ACCD;"> </span><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:#82AAFF;">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:#89DDFF;">"</span><span style="color:#C3E88D;">minapp-vscode.disableAutoConfig</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">javascript.implicitProjectConfig.experimentalDecorators</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: true,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">editor.maxTokenizationLineLength</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">: 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,C,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 n,c as a,d as o}from"./app.0ed445b7.js";const u=JSON.parse('{"title":"Eslint + Pettier \u7EDF\u4E00\u5F00\u53D1\u89C4\u8303","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/lint.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/lint.md"},p=o("",6),t=[p];function e(D,c,r,y,C,F){return n(),a("div",null,t)}const i=s(l,[["render",e]]);export{u as __pageData,i as default};
|
||||
152
assets/guide_vue2_lint.md.9f9c0612.js
Normal file
152
assets/guide_vue2_lint.md.9f9c0612.js
Normal file
@ -0,0 +1,152 @@
|
||||
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
assets/guide_vue2_lint.md.9f9c0612.lean.js
Normal file
1
assets/guide_vue2_lint.md.9f9c0612.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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};
|
||||
@ -1,12 +1,12 @@
|
||||
import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"\u914D\u7F6E proxy \u8DE8\u57DF","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/proxy.md","lastUpdated":1672820852000}'),o={name:"guide/vue2/proxy.md"},l=p(`<h1 id="\u914D\u7F6E-proxy-\u8DE8\u57DF" tabindex="-1">\u914D\u7F6E proxy \u8DE8\u57DF <a class="header-anchor" href="#\u914D\u7F6E-proxy-\u8DE8\u57DF" aria-hidden="true">#</a></h1><p>\u5982\u679C\u4F60\u7684\u9879\u76EE\u9700\u8981\u8DE8\u57DF\u8BBE\u7F6E\uFF0C\u4F60\u9700\u8981\u6253\u6765 <code>vue.config.js</code> <code>proxy</code> \u6CE8\u91CA \u5E76\u4E14\u914D\u7F6E\u76F8\u5E94\u53C2\u6570</p><p><u><strong>!!!\u6CE8\u610F\uFF1A\u4F60\u8FD8\u9700\u8981\u5C06 <code>src/config/env.development.js</code> \u91CC\u7684 <code>baseApi</code> \u8BBE\u7F6E\u6210 '/'</strong></u></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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,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>
|
||||
<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;">// ....</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>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">//\u914D\u7F6E\u8DE8\u57DF</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:#89DDFF;">"</span><span style="color:#F07178;">/api</span><span style="color:#89DDFF;">"</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;">target</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://test.xxx.com</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u63A5\u53E3\u7684\u57DF\u540D</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// ws: true, // \u662F\u5426\u542F\u7528websockets</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">changOrigin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u5F00\u542F\u4EE3\u7406\uFF0C\u5728\u672C\u5730\u521B\u5EFA\u4E00\u4E2A\u865A\u62DF\u670D\u52A1\u7AEF</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">target</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">https://test.xxx.com</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:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// ws: true, // 是否启用websockets</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">changOrigin</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</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;">pathRewrite</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;">^/api</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;">/</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>
|
||||
@ -14,11 +14,11 @@ import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const A=JSON.parse('{
|
||||
<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>\u4F7F\u7528 \u4F8B\u5982: <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"><code><span class="line"><span style="color:#89DDFF;">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;">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;">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></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=[l];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const d=s(o,[["render",t]]);export{A as __pageData,d as default};
|
||||
<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};
|
||||
1
assets/guide_vue2_proxy.md.2993ab5e.lean.js
Normal file
1
assets/guide_vue2_proxy.md.2993ab5e.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"\u914D\u7F6E proxy \u8DE8\u57DF","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/proxy.md","lastUpdated":1672820852000}'),o={name:"guide/vue2/proxy.md"},l=p("",6),e=[l];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const d=s(o,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -1,34 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const d=JSON.parse('{"title":"rem \u9002\u914D\u65B9\u6848","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/rem.md","lastUpdated":1672820852000}'),o={name:"guide/vue2/rem.md"},l=p(`<h1 id="rem-\u9002\u914D\u65B9\u6848" tabindex="-1">rem \u9002\u914D\u65B9\u6848 <a class="header-anchor" href="#rem-\u9002\u914D\u65B9\u6848" aria-hidden="true">#</a></h1><p>\u4E0D\u7528\u62C5\u5FC3\uFF0C\u9879\u76EE\u5DF2\u7ECF\u914D\u7F6E\u597D\u4E86 <code>rem</code> \u9002\u914D, \u4E0B\u9762\u4EC5\u505A\u4ECB\u7ECD\uFF1A</p><p>Vant \u4E2D\u7684\u6837\u5F0F\u9ED8\u8BA4\u4F7F\u7528<code>px</code>\u4F5C\u4E3A\u5355\u4F4D\uFF0C\u5982\u679C\u9700\u8981\u4F7F\u7528<code>rem</code>\u5355\u4F4D\uFF0C\u63A8\u8350\u4F7F\u7528\u4EE5\u4E0B\u4E24\u4E2A\u5DE5\u5177:</p><ul><li><a href="https://github.com/cuth/postcss-pxtorem" target="_blank" rel="noreferrer">postcss-pxtorem</a> \u662F\u4E00\u6B3E <code>postcss</code> \u63D2\u4EF6\uFF0C\u7528\u4E8E\u5C06\u5355\u4F4D\u8F6C\u5316\u4E3A <code>rem</code></li><li><a href="https://github.com/amfe/lib-flexible" target="_blank" rel="noreferrer">lib-flexible</a> \u7528\u4E8E\u8BBE\u7F6E <code>rem</code> \u57FA\u51C6\u503C</li></ul><h5 id="postcss-\u914D\u7F6E" tabindex="-1">PostCSS \u914D\u7F6E <a class="header-anchor" href="#postcss-\u914D\u7F6E" aria-hidden="true">#</a></h5><p>\u4E0B\u9762\u63D0\u4F9B\u4E86\u4E00\u4EFD\u57FA\u672C\u7684 <code>postcss</code> \u914D\u7F6E\uFF0C\u53EF\u4EE5\u5728\u6B64\u914D\u7F6E\u7684\u57FA\u7840\u4E0A\u6839\u636E\u9879\u76EE\u9700\u6C42\u8FDB\u884C\u4FEE\u6539</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// 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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">overrideBrowserslist</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;">Android 4.1</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:#C3E88D;">iOS 7.1</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:#C3E88D;">Chrome > 31</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:#C3E88D;">ff > 31</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:#C3E88D;">ie >= 8</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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">postcss-pxtorem</span><span style="color:#89DDFF;">"</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;">rootValue</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">37.5</span><span style="color:#89DDFF;">,</span></span>
|
||||
<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>\u66F4\u591A\u8BE6\u7EC6\u4FE1\u606F\uFF1A <a href="https://youzan.github.io/vant/#/zh-CN/quickstart#jin-jie-yong-fa" target="_blank" rel="noreferrer">vant</a></p><p><strong>\u65B0\u624B\u5FC5\u770B\uFF0C\u8001\u9E1F\u8DF3\u8FC7</strong></p><p>\u5F88\u591A\u5C0F\u4F19\u4F34\u4F1A\u95EE\u6211\uFF0C\u9002\u914D\u7684\u95EE\u9898,\u56E0\u4E3A\u6211\u4EEC\u4F7F\u7528\u7684\u662F Vant UI\uFF0C\u6240\u4EE5\u5FC5\u987B\u6839\u636E Vant UI 375 \u7684\u8BBE\u8BA1\u89C4\u8303\u8D70\uFF0C\u4E00\u822C\u6211\u4EEC\u7684\u8BBE\u8BA1\u4F1A\u5C06 UI \u56FE\u4E0A\u4F20\u5230\u84DD\u6E56\uFF0C\u6211\u4EEC\u5C31\u53EF\u4EE5\u9700\u8981\u7684\u5C3A\u5BF8\u4E86\u3002\u4E0B\u9762\u5C31\u5927\u6982\u666E\u53CA\u4E00\u4E0B rem\u3002</p><p>\u6211\u4EEC\u77E5\u9053 <code>1rem</code> \u7B49\u4E8E<code>html</code> \u6839\u5143\u7D20\u8BBE\u5B9A\u7684 <code>font-size</code> \u7684 <code>px</code> \u503C\u3002Vant UI \u8BBE\u7F6E <code>rootValue: 37.5</code>,\u4F60\u53EF\u4EE5\u770B\u5230\u5728 iPhone 6 \u4E0B\u770B\u5230 \uFF08<code>1rem \u7B49\u4E8E 37.5px</code>\uFF09\uFF1A</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><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>\u5207\u6362\u4E0D\u540C\u7684\u673A\u578B\uFF0C\u6839\u5143\u7D20\u53EF\u80FD\u4F1A\u6709\u4E0D\u540C\u7684<code>font-size</code>\u3002\u5F53\u4F60\u5199 css px \u6837\u5F0F\u65F6\uFF0C\u4F1A\u88AB\u7A0B\u5E8F\u6362\u7B97\u6210 <code>rem</code> \u8FBE\u5230\u9002\u914D\u3002</p><p>\u56E0\u4E3A\u6211\u4EEC\u7528\u4E86 Vant \u7684\u7EC4\u4EF6\uFF0C\u9700\u8981\u6309\u7167 <code>rootValue: 37.5</code> \u6765\u5199\u6837\u5F0F\u3002</p><p>\u4E3E\u4E2A\u4F8B\u5B50\uFF1A\u8BBE\u8BA1\u7ED9\u4E86\u4F60\u4E00\u5F20 750px * 1334px \u56FE\u7247\uFF0C\u5728 iPhone6 \u4E0A\u94FA\u6EE1\u5C4F\u5E55,\u5176\u4ED6\u673A\u578B\u9002\u914D\u3002</p><ul><li>\u5F53<code>rootValue: 70</code> , \u6837\u5F0F <code>width: 750px;height: 1334px;</code> \u56FE\u7247\u4F1A\u6491\u6EE1 iPhone6 \u5C4F\u5E55\uFF0C\u8FD9\u4E2A\u65F6\u5019\u5207\u6362\u5176\u4ED6\u673A\u578B\uFF0C\u56FE\u7247\u4E5F\u4F1A\u8DDF\u7740\u6491\u6EE1\u3002</li><li>\u5F53<code>rootValue: 37.5</code> \u7684\u65F6\u5019\uFF0C\u6837\u5F0F <code>width: 375px;height: 667px;</code> \u56FE\u7247\u4F1A\u6491\u6EE1 iPhone6 \u5C4F\u5E55\u3002</li></ul><p>\u4E5F\u5C31\u662F iphone 6 \u4E0B 375px \u5BBD\u5EA6\u5199 CSS\u3002\u5176\u4ED6\u7684\u4F60\u5C31\u53EF\u4EE5\u6839\u636E\u4F60\u8BBE\u8BA1\u56FE\uFF0C\u53BB\u5199\u5BF9\u5E94\u7684\u6837\u5F0F\u5C31\u53EF\u4EE5\u4E86\u3002</p><p>\u5F53\u7136\uFF0C\u60F3\u8981\u6491\u6EE1\u5C4F\u5E55\u4F60\u53EF\u4EE5\u4F7F\u7528 100%\uFF0C\u8FD9\u91CC\u53EA\u662F\u4E3E\u4F8B\u8BF4\u660E\u3002</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><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;">/* rootValue: 75 */</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">image</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<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;">750px</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;">1334px</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:#676E95;">/* rootValue: 37.5 */</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">image</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<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=[l];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 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const d=JSON.parse('{"title":"rem \u9002\u914D\u65B9\u6848","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/rem.md","lastUpdated":1672820852000}'),o={name:"guide/vue2/rem.md"},l=p("",19),e=[l];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};
|
||||
34
assets/guide_vue2_rem.md.c59d4c40.js
Normal file
34
assets/guide_vue2_rem.md.c59d4c40.js
Normal file
@ -0,0 +1,34 @@
|
||||
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>
|
||||
<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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">overrideBrowserslist</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;">Android 4.1</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:#C3E88D;">iOS 7.1</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:#C3E88D;">Chrome > 31</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:#C3E88D;">ff > 31</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:#C3E88D;">ie >= 8</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:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">postcss-pxtorem</span><span style="color:#89DDFF;">"</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;">rootValue</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">37.5</span><span style="color:#89DDFF;">,</span></span>
|
||||
<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>
|
||||
<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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">image</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<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;">750px</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;">1334px</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:#676E95;font-style:italic;">/* rootValue: 37.5 */</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">image</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<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};
|
||||
1
assets/guide_vue2_rem.md.c59d4c40.lean.js
Normal file
1
assets/guide_vue2_rem.md.c59d4c40.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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,25 +1,25 @@
|
||||
import{_ as s,o as n,c as a,d as o}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"Vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/router.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/router.md"},l=o(`<h1 id="vue-router" tabindex="-1">Vue-router <a class="header-anchor" href="#vue-router" aria-hidden="true">#</a></h1><p>\u672C\u6848\u4F8B\u91C7\u7528 <code>hash</code> \u6A21\u5F0F\uFF0C\u5F00\u53D1\u8005\u6839\u636E\u9700\u6C42\u4FEE\u6539 <code>mode</code> <code>base</code></p><p><strong>\u6CE8\u610F</strong>\uFF1A\u5982\u679C\u4F60\u4F7F\u7528\u4E86 <code>history</code> \u6A21\u5F0F\uFF0C<code>vue.config.js</code> \u4E2D\u7684 <code>publicPath</code> \u8981\u505A\u5BF9\u5E94\u7684<strong>\u4FEE\u6539</strong></p><p>\u524D\u5F80:<a href="#base">vue.config.js \u57FA\u7840\u914D\u7F6E</a></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;">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;">import</span><span style="color:#A6ACCD;"> Router </span><span style="color:#89DDFF;">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>
|
||||
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>
|
||||
<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>
|
||||
<span class="line"><span style="color:#89DDFF;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> router </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> router </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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">path</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 style="color:#A6ACCD;"> </span><span style="color:#F07178;">name</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">component</span><span style="color:#89DDFF;">:</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;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/views/home/index</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u8DEF\u7531\u61D2\u52A0\u8F7D</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">component</span><span style="color:#89DDFF;">:</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;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">@/views/home/index</span><span style="color:#89DDFF;">"</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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">meta</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;">\u9996\u9875</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u9875\u9762\u6807\u9898</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">keepAlive</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;">// keep-alive \u6807\u8BC6</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;">首页</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;">keepAlive</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;">// keep-alive 标识</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>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> createRouter </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">Router</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// mode: 'history', // \u5982\u679C\u4F60\u662F history\u6A21\u5F0F \u9700\u8981\u914D\u7F6E vue.config.js publicPath</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// base: '/app/',</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// base: '/app/',</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">scrollBehavior</span><span style="color:#89DDFF;">:</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:#F07178;">y</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</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;">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;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">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=[l];function t(c,r,D,y,F,A){return n(),a("div",null,e)}const u=s(p,[["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>
|
||||
<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};
|
||||
1
assets/guide_vue2_router.md.047bd988.lean.js
Normal file
1
assets/guide_vue2_router.md.047bd988.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as o}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"Vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/router.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/router.md"},l=o("",5),e=[l];function t(c,r,D,y,F,A){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
|
||||
@ -1,60 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as l}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"Sass \u5168\u5C40\u6837\u5F0F","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/sass.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/sass.md"},o=l(`<h1 id="sass-\u5168\u5C40\u6837\u5F0F" tabindex="-1">Sass \u5168\u5C40\u6837\u5F0F <a class="header-anchor" href="#sass-\u5168\u5C40\u6837\u5F0F" aria-hidden="true">#</a></h1><p>\u9996\u5148 \u4F60\u53EF\u80FD\u4F1A\u9047\u5230 <code>node-sass</code> \u5B89\u88C5\u4E0D\u6210\u529F\uFF0C\u522B\u653E\u5F03\u591A\u8BD5\u51E0\u6B21\uFF01\uFF01\uFF01</p><p>\u6BCF\u4E2A\u9875\u9762\u81EA\u5DF1\u5BF9\u5E94\u7684\u6837\u5F0F\u90FD\u5199\u5728\u81EA\u5DF1\u7684 .vue \u6587\u4EF6\u4E4B\u4E2D <code>scoped</code> \u5B83\u987E\u540D\u601D\u4E49\u7ED9 css \u52A0\u4E86\u4E00\u4E2A\u57DF\u7684\u6982\u5FF5\u3002</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><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;">/* 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;">/* 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="\u76EE\u5F55\u7ED3\u6784" tabindex="-1">\u76EE\u5F55\u7ED3\u6784 <a class="header-anchor" href="#\u76EE\u5F55\u7ED3\u6784" aria-hidden="true">#</a></h4><p>vue-h5-template \u6240\u6709\u5168\u5C40\u6837\u5F0F\u90FD\u5728 <code>@/src/assets/css</code> \u76EE\u5F55\u4E0B\u8BBE\u7F6E</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;">\u251C\u2500\u2500 assets</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">\u2502 \u251C\u2500\u2500 css</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">\u2502 \u2502 \u251C\u2500\u2500 index.scss </span><span style="color:#676E95;"># \u5168\u5C40\u901A\u7528\u6837\u5F0F</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">\u2502 \u2502 \u251C\u2500\u2500 mixin.scss </span><span style="color:#676E95;"># \u5168\u5C40mixin</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">\u2502 \u2502 \u2514\u2500\u2500 variables.scss </span><span style="color:#676E95;"># \u5168\u5C40\u53D8\u91CF</span></span>
|
||||
<span class="line"></span></code></pre></div><h4 id="\u81EA\u5B9A\u4E49-vant-ui-\u6837\u5F0F" tabindex="-1">\u81EA\u5B9A\u4E49 vant-ui \u6837\u5F0F <a class="header-anchor" href="#\u81EA\u5B9A\u4E49-vant-ui-\u6837\u5F0F" aria-hidden="true">#</a></h4><p>\u73B0\u5728\u6211\u4EEC\u6765\u8BF4\u8BF4\u600E\u4E48\u91CD\u5199 <code>vant-ui</code> \u6837\u5F0F\u3002\u7531\u4E8E <code>vant-ui</code> \u7684\u6837\u5F0F\u6211\u4EEC\u662F\u5728\u5168\u5C40\u5F15\u5165\u7684\uFF0C\u6240\u4EE5\u4F60\u60F3\u5728\u67D0\u4E2A\u9875\u9762\u91CC\u9762\u8986\u76D6\u5B83\u7684\u6837\u5F0F\u5C31\u4E0D\u80FD\u52A0 <code>scoped</code>\uFF0C\u4F46\u4F60\u53C8\u60F3\u53EA\u8986\u76D6\u8FD9\u4E2A\u9875\u9762\u7684 <code>vant</code> \u6837\u5F0F\uFF0C\u4F60\u5C31\u53EF\u5728\u5B83\u7684\u7236\u7EA7\u52A0\u4E00\u4E2A <code>class</code>\uFF0C\u7528\u547D\u540D\u7A7A\u95F4\u6765\u89E3\u51B3\u95EE\u9898\u3002</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki"><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;">/* \u4F60\u7684\u547D\u540D\u7A7A\u95F4 */</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;">/* vant-ui \u5143\u7D20*/</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="\u7236\u7EC4\u4EF6\u6539\u53D8\u5B50\u7EC4\u4EF6\u6837\u5F0F-\u6DF1\u5EA6\u9009\u62E9\u5668" tabindex="-1">\u7236\u7EC4\u4EF6\u6539\u53D8\u5B50\u7EC4\u4EF6\u6837\u5F0F \u6DF1\u5EA6\u9009\u62E9\u5668 <a class="header-anchor" href="#\u7236\u7EC4\u4EF6\u6539\u53D8\u5B50\u7EC4\u4EF6\u6837\u5F0F-\u6DF1\u5EA6\u9009\u62E9\u5668" aria-hidden="true">#</a></h4><p>\u5F53\u4F60\u5B50\u7EC4\u4EF6\u4F7F\u7528\u4E86 <code>scoped</code> \u4F46\u5728\u7236\u7EC4\u4EF6\u53C8\u60F3\u4FEE\u6539\u5B50\u7EC4\u4EF6\u7684\u6837\u5F0F\u53EF\u4EE5 \u901A\u8FC7 <code>>>></code> \u6765\u5B9E\u73B0\uFF1A</p><div class="language-css"><button title="Copy Code" class="copy"></button><span class="lang">css</span><pre class="shiki"><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;">/* ... */</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="\u5168\u5C40\u53D8\u91CF" tabindex="-1">\u5168\u5C40\u53D8\u91CF <a class="header-anchor" href="#\u5168\u5C40\u53D8\u91CF" aria-hidden="true">#</a></h4><p><code>vue.config.js</code> \u914D\u7F6E\u4F7F\u7528 <code>css.loaderOptions</code> \u9009\u9879,\u6CE8\u5165 <code>sass</code> \u7684 <code>mixin</code> <code>variables</code> \u5230\u5168\u5C40\uFF0C\u4E0D\u9700\u8981\u624B\u52A8\u5F15\u5165 ,\u914D\u7F6E<code>$cdn</code>\u901A\u8FC7\u53D8\u91CF\u5F62\u5F0F\u5F15\u5165 cdn \u5730\u5740,\u8FD9\u6837\u5411\u6240\u6709 Sass/Less \u6837\u5F0F\u4F20\u5165\u5171\u4EAB\u7684\u5168\u5C40\u53D8\u91CF\uFF1A</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">extract</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> IS_PROD</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">sourceMap</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">loaderOptions</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;">// \u7ED9 scss-loader \u4F20\u9012\u9009\u9879</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">scss</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;">// \u6CE8\u5165 \`sass\` \u7684 \`mixin\` \`variables\` \u5230\u5168\u5C40, $cdn\u53EF\u4EE5\u914D\u7F6E\u56FE\u7247cdn</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// \u8BE6\u60C5: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">prependData</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">\`</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> @import "assets/css/mixin.scss";</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> @import "assets/css/variables.scss";</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> $cdn: "</span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">defaultSettings</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$cdn</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">";</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> </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:#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>\u8BBE\u7F6E js \u4E2D\u53EF\u4EE5\u8BBF\u95EE <code>$cdn</code>,<code>.vue</code> \u6587\u4EF6\u4E2D\u4F7F\u7528<code>this.$cdn</code>\u8BBF\u95EE</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// \u5F15\u5165\u5168\u5C40\u6837\u5F0F</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">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;">// \u8BBE\u7F6E js\u4E2D\u53EF\u4EE5\u8BBF\u95EE $cdn</span></span>
|
||||
<span class="line"><span style="color:#676E95;">// \u5F15\u5165cdn</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">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;">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>\u5728 css \u548C js \u4F7F\u7528</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">logo</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<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;">120px</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;">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;">$cdn</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;">+</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 c(t,r,D,y,F,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{A as __pageData,d as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as l}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"Sass \u5168\u5C40\u6837\u5F0F","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/sass.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/sass.md"},o=l("",20),e=[o];function c(t,r,D,y,F,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{A as __pageData,d as default};
|
||||
60
assets/guide_vue2_sass.md.55760269.js
Normal file
60
assets/guide_vue2_sass.md.55760269.js
Normal file
@ -0,0 +1,60 @@
|
||||
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>
|
||||
<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:#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:#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:#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:#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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">extract</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> IS_PROD</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">sourceMap</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">loaderOptions</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;">// 给 scss-loader 传递选项</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">scss</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;">// 注入 \`sass\` 的 \`mixin\` \`variables\` 到全局, $cdn可以配置图片cdn</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 详情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">prependData</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">\`</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> @import "assets/css/mixin.scss";</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> @import "assets/css/variables.scss";</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> $cdn: "</span><span style="color:#89DDFF;">\${</span><span style="color:#A6ACCD;">defaultSettings</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">$cdn</span><span style="color:#89DDFF;">}</span><span style="color:#C3E88D;">";</span></span>
|
||||
<span class="line"><span style="color:#C3E88D;"> </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:#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;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:#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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">logo</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<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;">120px</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;">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};
|
||||
1
assets/guide_vue2_sass.md.55760269.lean.js
Normal file
1
assets/guide_vue2_sass.md.55760269.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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};
|
||||
14
assets/guide_vue2_start.md.3a872719.js
Normal file
14
assets/guide_vue2_start.md.3a872719.js
Normal file
@ -0,0 +1,14 @@
|
||||
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>
|
||||
<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 vue2</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">h5</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">template origin</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">vue2</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">h5</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">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;">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};
|
||||
1
assets/guide_vue2_start.md.3a872719.lean.js
Normal file
1
assets/guide_vue2_start.md.3a872719.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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,14 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as e}from"./app.0ed445b7.js";const C=JSON.parse('{"title":"\u542F\u52A8\u9879\u76EE","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/start.md"},p=e(`<h1 id="\u542F\u52A8\u9879\u76EE" tabindex="-1">\u542F\u52A8\u9879\u76EE <a class="header-anchor" href="#\u542F\u52A8\u9879\u76EE" aria-hidden="true">#</a></h1><div class="language-js"><button title="Copy Code" class="copy"></button><span class="lang">js</span><pre class="shiki"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;">// \u62C9\u53D6\u9879\u76EE</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;">//github.com/sunniejs/vue-h5-template</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;">// \u5207\u6362\u5206\u652F</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">git checkout </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">b vue2</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">h5</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">template origin</span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">vue2</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">h5</span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;">template</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;">// \u5B89\u88C5\u4F9D\u8D56</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">yarn install</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;">// \u542F\u52A8\u9879\u76EE</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),t=[p];function o(c,r,i,d,y,_){return a(),n("div",null,t)}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,d as e}from"./app.0ed445b7.js";const C=JSON.parse('{"title":"\u542F\u52A8\u9879\u76EE","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/start.md"},p=e("",2),t=[p];function o(c,r,i,d,y,_){return a(),n("div",null,t)}const A=s(l,[["render",o]]);export{C as __pageData,A as default};
|
||||
@ -1,5 +1,5 @@
|
||||
import{_ as s,o as a,c as n,d as l}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"VantUI \u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5B89\u88C5\u63D2\u4EF6","slug":"\u5B89\u88C5\u63D2\u4EF6","link":"#\u5B89\u88C5\u63D2\u4EF6","children":[]},{"level":2,"title":"\u4F7F\u7528\u7EC4\u4EF6","slug":"\u4F7F\u7528\u7EC4\u4EF6","link":"#\u4F7F\u7528\u7EC4\u4EF6","children":[]}],"relativePath":"guide/vue2/vant.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/vant.md"},o=l(`<h1 id="vantui-\u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D" tabindex="-1">VantUI \u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D <a class="header-anchor" href="#vantui-\u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D" aria-hidden="true">#</a></h1><p>\u9879\u76EE\u91C7 \u7528<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 \u81EA\u52A8\u6309\u9700\u5F15\u5165\u7EC4\u4EF6 (\u63A8\u8350)</a>\u4E0B \u9762\u5B89\u88C5\u63D2\u4EF6\u4ECB\u7ECD\uFF1A</p><p><a href="https://github.com/ant-design/babel-plugin-import" target="_blank" rel="noreferrer">babel-plugin-import</a> \u662F\u4E00\u6B3E <code>babel</code> \u63D2\u4EF6\uFF0C\u5B83\u4F1A\u5728\u7F16\u8BD1\u8FC7\u7A0B\u4E2D\u5C06 <code>import</code> \u7684\u5199\u6CD5\u81EA\u52A8\u8F6C\u6362\u4E3A\u6309\u9700\u5F15\u5165\u7684\u65B9\u5F0F</p><h2 id="\u5B89\u88C5\u63D2\u4EF6" tabindex="-1">\u5B89\u88C5\u63D2\u4EF6 <a class="header-anchor" href="#\u5B89\u88C5\u63D2\u4EF6" aria-hidden="true">#</a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;">npm i babel-plugin-import -D</span></span>
|
||||
<span class="line"></span></code></pre></div><p>\u5728<code>babel.config.js</code> \u8BBE\u7F6E</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// \u5BF9\u4E8E\u4F7F\u7528 babel7 \u7684\u7528\u6237\uFF0C\u53EF\u4EE5\u5728 babel.config.js \u4E2D\u914D\u7F6E</span></span>
|
||||
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>
|
||||
<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>
|
||||
@ -17,11 +17,11 @@ import{_ as s,o as a,c as n,d as l}from"./app.0ed445b7.js";const A=JSON.parse('{
|
||||
<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="\u4F7F\u7528\u7EC4\u4EF6" tabindex="-1">\u4F7F\u7528\u7EC4\u4EF6 <a class="header-anchor" href="#\u4F7F\u7528\u7EC4\u4EF6" aria-hidden="true">#</a></h2><p>\u9879\u76EE\u5728 <code>src/plugins/vant.js</code> \u4E0B\u7EDF\u4E00\u7BA1\u7406\u7EC4\u4EF6\uFF0C\u7528\u54EA\u4E2A\u5F15\u5165\u54EA\u4E2A\uFF0C\u65E0\u9700\u5728\u9875\u9762\u91CC\u91CD\u590D\u5F15\u7528</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// \u6309\u9700\u5168\u5C40\u5F15\u5165 vant\u7EC4\u4EF6</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;">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;">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;">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></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,C){return a(),n("div",null,e)}const u=s(p,[["render",t]]);export{A as __pageData,u as default};
|
||||
<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};
|
||||
1
assets/guide_vue2_vant.md.406861fd.lean.js
Normal file
1
assets/guide_vue2_vant.md.406861fd.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as l}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"VantUI \u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5B89\u88C5\u63D2\u4EF6","slug":"\u5B89\u88C5\u63D2\u4EF6","link":"#\u5B89\u88C5\u63D2\u4EF6","children":[]},{"level":2,"title":"\u4F7F\u7528\u7EC4\u4EF6","slug":"\u4F7F\u7528\u7EC4\u4EF6","link":"#\u4F7F\u7528\u7EC4\u4EF6","children":[]}],"relativePath":"guide/vue2/vant.md","lastUpdated":1672820852000}'),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,33 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"Vuex \u72B6\u6001\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vuex.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/vuex.md"},o=p(`<h1 id="vuex-\u72B6\u6001\u7BA1\u7406" tabindex="-1">Vuex \u72B6\u6001\u7BA1\u7406 <a class="header-anchor" href="#vuex-\u72B6\u6001\u7BA1\u7406" aria-hidden="true">#</a></h1><p>\u76EE\u5F55\u7ED3\u6784</p><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"><span style="color:#A6ACCD;">\u251C\u2500\u2500 store</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">\u2502 \u251C\u2500\u2500 modules</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">\u2502 \u2502 \u2514\u2500\u2500 app.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">\u2502 \u251C\u2500\u2500 index.js</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">\u2502 \u251C\u2500\u2500 getters.js</span></span>
|
||||
<span class="line"></span></code></pre></div><p><code>main.js</code> \u5F15\u5165</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;"> Vue </span><span style="color:#89DDFF;">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;">import</span><span style="color:#A6ACCD;"> App </span><span style="color:#89DDFF;">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;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;">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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">el</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 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;">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>\u4F7F\u7528</p><div class="language-html"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki"><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;">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;">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;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#82AAFF;">mapGetters</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">userName</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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</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;">// Action \u901A\u8FC7 store.dispatch \u65B9\u6CD5\u89E6\u53D1</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">doDispatch</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;">this.</span><span style="color:#A6ACCD;">$store</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispatch</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">setUserName</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 style="color:#C3E88D;">\u771F\u4E56\uFF0C\u8D76\u7D27\u5173\u6CE8\u516C\u4F17\u53F7\uFF0C\u7EC4\u7EC7\u90FD\u5728\u7B49\u4F60~</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:#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,F,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,d as p}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"Vuex \u72B6\u6001\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/vuex.md","lastUpdated":1672820852000}'),l={name:"guide/vue2/vuex.md"},o=p("",7),e=[o];function t(c,r,D,F,y,A){return a(),n("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};
|
||||
33
assets/guide_vue2_vuex.md.b3b7559a.js
Normal file
33
assets/guide_vue2_vuex.md.b3b7559a.js
Normal file
@ -0,0 +1,33 @@
|
||||
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>
|
||||
<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:#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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">el</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 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:#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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">...</span><span style="color:#82AAFF;">mapGetters</span><span style="color:#A6ACCD;">([</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">userName</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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</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;">// Action 通过 store.dispatch 方法触发</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">doDispatch</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;">this.</span><span style="color:#A6ACCD;">$store</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispatch</span><span style="color:#F07178;">(</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">setUserName</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 style="color:#C3E88D;">真乖，赶紧关注公众号，组织都在等你~</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:#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};
|
||||
1
assets/guide_vue2_vuex.md.b3b7559a.lean.js
Normal file
1
assets/guide_vue2_vuex.md.b3b7559a.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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,7 @@
|
||||
import{_ as s,o as a,c as n,d as l}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"vm \u9002\u914D\u65B9\u6848","description":"","frontmatter":{},"headers":[{"level":2,"title":"1.\u5B89\u88C5\u4F9D\u8D56","slug":"_1-\u5B89\u88C5\u4F9D\u8D56","link":"#_1-\u5B89\u88C5\u4F9D\u8D56","children":[]},{"level":2,"title":"2.\u4FEE\u6539 .postcssrc.js","slug":"_2-\u4FEE\u6539-postcssrc-js","link":"#_2-\u4FEE\u6539-postcssrc-js","children":[]},{"level":2,"title":"3.\u5220\u9664\u539F\u6765\u7684 rem \u76F8\u5173\u4EE3\u7801","slug":"_3-\u5220\u9664\u539F\u6765\u7684-rem-\u76F8\u5173\u4EE3\u7801","link":"#_3-\u5220\u9664\u539F\u6765\u7684-rem-\u76F8\u5173\u4EE3\u7801","children":[]}],"relativePath":"guide/vue2/vw.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/vw.md"},o=l(`<h1 id="vm-\u9002\u914D\u65B9\u6848" tabindex="-1">vm \u9002\u914D\u65B9\u6848 <a class="header-anchor" href="#vm-\u9002\u914D\u65B9\u6848" aria-hidden="true">#</a></h1><p>\u672C\u9879\u76EE\u4F7F\u7528\u7684\u662F <code>rem</code> \u7684 \u9002\u914D\u65B9\u6848\uFF0C\u5176\u5B9E\u65E0\u8BBA\u4F60\u4F7F\u7528\u54EA\u79CD\u65B9\u6848\uFF0C\u90FD\u4E0D\u9700\u8981\u4F60\u53BB\u8BA1\u7B97 12px \u662F\u591A\u5C11 <code>rem</code> \u6216\u8005 <code>vw</code>, \u4F1A\u6709\u4E13\u95E8\u7684\u5DE5\u5177\u53BB\u5E2E\u4F60\u505A \u3002\u5982\u679C\u4F60\u60F3\u7528 <code>vw</code>,\u4F60\u53EF\u4EE5\u6309\u7167\u4E0B\u9762\u7684\u65B9\u5F0F\u5207\u6362\u3002</p><h2 id="_1-\u5B89\u88C5\u4F9D\u8D56" tabindex="-1">1.\u5B89\u88C5\u4F9D\u8D56 <a class="header-anchor" href="#_1-\u5B89\u88C5\u4F9D\u8D56" aria-hidden="true">#</a></h2><div class="language-bash"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">npm install postcss-px-to-viewport -D</span></span>
|
||||
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-\u4FEE\u6539-postcssrc-js" tabindex="-1">2.\u4FEE\u6539 .postcssrc.js <a class="header-anchor" href="#_2-\u4FEE\u6539-postcssrc-js" aria-hidden="true">#</a></h2><p>\u5C06\u6839\u76EE\u5F55\u4E0B .postcssrc.js \u6587\u4EF6\u4FEE\u6539\u5982\u4E0B</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// https://github.com/michael-ciniawsky/postcss-load-config</span></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>
|
||||
<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>
|
||||
@ -14,17 +14,17 @@ import{_ as s,o as a,c as n,d as l}from"./app.0ed445b7.js";const A=JSON.parse('{
|
||||
<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:#F07178;">postcss-px-to-viewport</span><span style="color:#89DDFF;">"</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;">viewportWidth</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">375</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u89C6\u7A97\u7684\u5BBD\u5EA6\uFF0C\u5BF9\u5E94\u7684\u662F\u6211\u4EEC\u8BBE\u8BA1\u7A3F\u7684\u5BBD\u5EA6\uFF0C\u4E00\u822C\u662F750</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">unitPrecision</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u6307\u5B9A\`px\`\u8F6C\u6362\u4E3A\u89C6\u7A97\u5355\u4F4D\u503C\u7684\u5C0F\u6570\u4F4D\u6570\uFF08\u5F88\u591A\u65F6\u5019\u65E0\u6CD5\u6574\u9664\uFF09</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">viewportUnit</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vw</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u6307\u5B9A\u9700\u8981\u8F6C\u6362\u6210\u7684\u89C6\u7A97\u5355\u4F4D\uFF0C\u5EFA\u8BAE\u4F7F\u7528vw</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">selectorBlackList</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.ignore</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;">.hairlines</span><span style="color:#89DDFF;">"</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u6307\u5B9A\u4E0D\u8F6C\u6362\u4E3A\u89C6\u7A97\u5355\u4F4D\u7684\u7C7B\uFF0C\u53EF\u4EE5\u81EA\u5B9A\u4E49\uFF0C\u53EF\u4EE5\u65E0\u9650\u6DFB\u52A0,\u5EFA\u8BAE\u5B9A\u4E49\u4E00\u81F3\u4E24\u4E2A\u901A\u7528\u7684\u7C7B\u540D</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">minPixelValue</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u5C0F\u4E8E\u6216\u7B49\u4E8E\`1px\`\u4E0D\u8F6C\u6362\u4E3A\u89C6\u7A97\u5355\u4F4D\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u8BBE\u7F6E\u4E3A\u4F60\u60F3\u8981\u7684\u503C</span></span>
|
||||
<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;">// \u5141\u8BB8\u5728\u5A92\u4F53\u67E5\u8BE2\u4E2D\u8F6C\u6362\`px\`</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">viewportWidth</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">375</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 视窗的宽度，对应的是我们设计稿的宽度，一般是750</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">unitPrecision</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</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:#F07178;">viewportUnit</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">vw</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 指定需要转换成的视窗单位，建议使用vw</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">selectorBlackList</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.ignore</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;">.hairlines</span><span style="color:#89DDFF;">"</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>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">minPixelValue</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 小于或等于\`1px\`不转换为视窗单位，你也可以设置为你想要的值</span></span>
|
||||
<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-\u5220\u9664\u539F\u6765\u7684-rem-\u76F8\u5173\u4EE3\u7801" tabindex="-1">3.\u5220\u9664\u539F\u6765\u7684 rem \u76F8\u5173\u4EE3\u7801 <a class="header-anchor" href="#_3-\u5220\u9664\u539F\u6765\u7684-rem-\u76F8\u5173\u4EE3\u7801" aria-hidden="true">#</a></h2><p>src/main.js \u5220\u9664\u5982\u4E0B\u4EE3\u7801</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#676E95;">// \u79FB\u52A8\u7AEF\u9002\u914D</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">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 \u5220\u9664\u5982\u4E0B\u4EE3\u7801</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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></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>\u8FD0\u884C\u8D77\u6765\uFF0CF12 \u5143\u7D20 css style \u5C31\u662F vw \u5355\u4F4D\u4E86</p>`,13),e=[o];function t(c,r,D,y,F,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
<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};
|
||||
1
assets/guide_vue2_vw.md.7dbc4a4c.lean.js
Normal file
1
assets/guide_vue2_vw.md.7dbc4a4c.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as l}from"./app.0ed445b7.js";const A=JSON.parse('{"title":"vm \u9002\u914D\u65B9\u6848","description":"","frontmatter":{},"headers":[{"level":2,"title":"1.\u5B89\u88C5\u4F9D\u8D56","slug":"_1-\u5B89\u88C5\u4F9D\u8D56","link":"#_1-\u5B89\u88C5\u4F9D\u8D56","children":[]},{"level":2,"title":"2.\u4FEE\u6539 .postcssrc.js","slug":"_2-\u4FEE\u6539-postcssrc-js","link":"#_2-\u4FEE\u6539-postcssrc-js","children":[]},{"level":2,"title":"3.\u5220\u9664\u539F\u6765\u7684 rem \u76F8\u5173\u4EE3\u7801","slug":"_3-\u5220\u9664\u539F\u6765\u7684-rem-\u76F8\u5173\u4EE3\u7801","link":"#_3-\u5220\u9664\u539F\u6765\u7684-rem-\u76F8\u5173\u4EE3\u7801","children":[]}],"relativePath":"guide/vue2/vw.md","lastUpdated":1672820852000}'),p={name:"guide/vue2/vw.md"},o=l("",13),e=[o];function t(c,r,D,y,F,i){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,d as l}from"./app.0ed445b7.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","lastUpdated":1672820852000}'),p={name:"guide/vue3/alias.md"},o=l("",2),e=[o];function c(t,r,F,D,y,i){return a(),n("div",null,e)}const C=s(p,[["render",c]]);export{_ as __pageData,C as default};
|
||||
@ -1,18 +1,18 @@
|
||||
import{_ as s,o as a,c as n,d as l}from"./app.0ed445b7.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","lastUpdated":1672820852000}'),p={name:"guide/vue3/alias.md"},o=l(`<h1 id="alias" tabindex="-1">alias <a class="header-anchor" href="#alias" aria-hidden="true">#</a></h1><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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,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>
|
||||
<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>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// /@/xxxx => src/xxxx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// /@/xxxx => src/xxxx</span></span>
|
||||
<span class="line"><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:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\\/</span><span style="color:#C3E88D;">@</span><span style="color:#A6ACCD;">\\/</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:#82AAFF;">pathResolve</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">src</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:#89DDFF;"> </span><span style="color:#676E95;">// /#/xxxx => types/xxxx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// /#/xxxx => types/xxxx</span></span>
|
||||
<span class="line"><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:#C3E88D;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;">\\/</span><span style="color:#C3E88D;">#</span><span style="color:#A6ACCD;">\\/</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:#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 c(t,r,F,D,y,i){return a(),n("div",null,e)}const C=s(p,[["render",c]]);export{_ as __pageData,C as default};
|
||||
<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};
|
||||
1
assets/guide_vue3_alias.md.e516d7e2.lean.js
Normal file
1
assets/guide_vue3_alias.md.e516d7e2.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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};
|
||||
58
assets/guide_vue3_axios.md.b2916294.js
Normal file
58
assets/guide_vue3_axios.md.b2916294.js
Normal file
@ -0,0 +1,58 @@
|
||||
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>
|
||||
<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>
|
||||
<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:#676E95;font-style:italic;">// create an axios instance</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> service </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> axios</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#A6ACCD;">(</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;"> baseApi</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// url = base api url + request url</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">withCredentials</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// send cookies when cross-domain requests</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">timeout</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5000</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// request timeout</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>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">// request 拦截器 request interceptor</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">service</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(</span></span>
|
||||
<span class="line"><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:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 不传递默认开启loading</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hideloading</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// loading</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loading</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> forbidClick</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</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:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">getters</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">token</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 style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">headers</span><span style="color:#F07178;">[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">X-Token</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:#F07178;"> </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:#A6ACCD;">config</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 style="color:#A6ACCD;font-style:italic;">error</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:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// do something with request error</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// for debug</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:#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:#676E95;font-style:italic;">// respone拦截器</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">service</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">response</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;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#F07178;">()</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;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!==</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">200</span><span style="color:#F07178;">) </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:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">401</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispatch</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">FedLogOut</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</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;">location</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reload</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:#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;">res</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;">error</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;font-style:italic;">else</span><span style="color:#F07178;"> </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:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</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:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">error</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;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">err</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">// for debug</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:#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};
|
||||
1
assets/guide_vue3_axios.md.b2916294.lean.js
Normal file
1
assets/guide_vue3_axios.md.b2916294.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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,58 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","lastUpdated":1672820852000}'),p={name:"guide/vue3/axios.md"},o=l(`<h1 id="axios-\u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406" tabindex="-1">axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406 <a class="header-anchor" href="#axios-\u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406" aria-hidden="true">#</a></h1><p><code>utils/request.js</code> \u5C01\u88C5 axios , \u5F00\u53D1\u8005\u9700\u8981\u6839\u636E\u540E\u53F0\u63A5\u53E3\u505A\u4FEE\u6539\u3002</p><ul><li><code>service.interceptors.request.use</code> \u91CC\u53EF\u4EE5\u8BBE\u7F6E\u8BF7\u6C42\u5934\uFF0C\u6BD4\u5982\u8BBE\u7F6E <code>token</code></li><li><code>config.hideloading</code> \u662F\u5728 api \u6587\u4EF6\u5939\u4E0B\u7684\u63A5\u53E3\u53C2\u6570\u91CC\u8BBE\u7F6E\uFF0C\u4E0B\u6587\u4F1A\u8BB2</li><li><code>service.interceptors.response.use</code> \u91CC\u53EF\u4EE5\u5BF9\u63A5\u53E3\u8FD4\u56DE\u6570\u636E\u5904\u7406\uFF0C\u6BD4\u5982 401 \u5220\u9664\u672C\u5730\u4FE1\u606F\uFF0C\u91CD\u65B0\u767B\u5F55</li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><code><span class="line"><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;"> axios </span><span style="color:#89DDFF;">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;">import</span><span style="color:#A6ACCD;"> store </span><span style="color:#89DDFF;">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;">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;">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;">// \u6839\u636E\u73AF\u5883\u4E0D\u540C\u5F15\u5165\u4E0D\u540Capi\u5730\u5740</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">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;">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:#676E95;">// create an axios instance</span></span>
|
||||
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> service </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> axios</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">create</span><span style="color:#A6ACCD;">(</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;"> baseApi</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// url = base api url + request url</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">withCredentials</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// send cookies when cross-domain requests</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">timeout</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5000</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// request timeout</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>
|
||||
<span class="line"><span style="color:#676E95;">// request \u62E6\u622A\u5668 request interceptor</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">service</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">request</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">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:#89DDFF;"> </span><span style="color:#676E95;">// \u4E0D\u4F20\u9012\u9ED8\u8BA4\u5F00\u542Floading</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#89DDFF;">!</span><span style="color:#A6ACCD;">config</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">hideloading</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// loading</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">loading</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> forbidClick</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</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:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">getters</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">token</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 style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">headers</span><span style="color:#F07178;">[</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">X-Token</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:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">config</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 style="color:#A6ACCD;">error</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:#89DDFF;"> </span><span style="color:#676E95;">// do something with request error</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// for debug</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">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:#676E95;">// respone\u62E6\u622A\u5668</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">service</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">interceptors</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#A6ACCD;">(</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">response</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;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#F07178;">()</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;">res</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">response</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">data</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&&</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">!==</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">200</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// \u767B\u5F55\u8D85\u65F6,\u91CD\u65B0\u767B\u5F55</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">if</span><span style="color:#F07178;"> (</span><span style="color:#A6ACCD;">res</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">status</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">===</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">401</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">store</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">dispatch</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">FedLogOut</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#F07178;">(</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;">location</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">reload</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:#F07178;"> </span><span style="color:#89DDFF;">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;">res</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;">error</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;">else</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">return</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">resolve</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">res</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:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">error</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;">Toast</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">clear</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">err</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">error</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span><span style="color:#F07178;"> </span><span style="color:#676E95;">// for debug</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">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;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">default</span><span style="color:#A6ACCD;"> service</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"></span></code></pre></div>`,4),e=[o];function t(r,c,F,D,y,A){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as s,o as n,c as a,d as l}from"./app.0ed445b7.js";const i=JSON.parse('{"title":"axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","lastUpdated":1672820852000}'),p={name:"guide/vue3/axios.md"},o=l("",4),e=[o];function t(r,c,F,D,y,A){return n(),a("div",null,e)}const u=s(p,[["render",t]]);export{i as __pageData,u as default};
|
||||
@ -1,8 +1,8 @@
|
||||
import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const d=JSON.parse('{"title":"vite.config.ts \u57FA\u7840\u914D\u7F6E","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","lastUpdated":1672820852000}'),l={name:"guide/vue3/base.md"},o=p(`<h1 id="vite-config-ts-\u57FA\u7840\u914D\u7F6E" tabindex="-1">vite.config.ts \u57FA\u7840\u914D\u7F6E <a class="header-anchor" href="#vite-config-ts-\u57FA\u7840\u914D\u7F6E" aria-hidden="true">#</a></h1><p>\u5982\u679C\u4F60\u7684 <code>Vue Router</code> \u6A21\u5F0F\u662F hash</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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>\u5982\u679C\u4F60\u7684 <code>Vue Router</code> \u6A21\u5F0F\u662F history \u8FD9\u91CC\u7684 publicPath \u548C\u4F60\u7684 <code>Vue Router</code> <code>base</code> <strong>\u4FDD\u6301\u4E00\u81F4</strong></p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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"><code><span class="line"><span style="color:#89DDFF;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">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;">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,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>
|
||||
<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;">return</span><span style="color:#F07178;"> </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>
|
||||
<span class="line"><span style="color:#F07178;"> host</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">0.0.0.0</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>
|
||||
@ -22,11 +22,11 @@ import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const d=JSON.parse('{
|
||||
<span class="line"><span style="color:#F07178;"> 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;"> preprocessorOptions</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> scss</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 style="color:#676E95;">// \u914D\u7F6E nutui \u5168\u5C40 scss \u53D8\u91CF</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">// 配置 nutui 全局 scss 变量</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> additionalData</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">@import "@nutui/nutui/dist/styles/variables.scss";</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:#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 c(t,r,F,y,D,i){return a(),n("div",null,e)}const C=s(l,[["render",c]]);export{d as __pageData,C as default};
|
||||
<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};
|
||||
1
assets/guide_vue3_base.md.2504686c.lean.js
Normal file
1
assets/guide_vue3_base.md.2504686c.lean.js
Normal file
@ -0,0 +1 @@
|
||||
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 +0,0 @@
|
||||
import{_ as s,o as a,c as n,d as p}from"./app.0ed445b7.js";const d=JSON.parse('{"title":"vite.config.ts \u57FA\u7840\u914D\u7F6E","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","lastUpdated":1672820852000}'),l={name:"guide/vue3/base.md"},o=p("",6),e=[o];function c(t,r,F,y,D,i){return a(),n("div",null,e)}const C=s(l,[["render",c]]);export{d as __pageData,C as default};
|
||||
@ -1,6 +1,6 @@
|
||||
import{_ as s,o,c as e,d as a}from"./app.0ed445b7.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/env.md","lastUpdated":1672820852000}'),n={name:"guide/vue3/env.md"},p=a(`<p><code>package.json</code> \u91CC\u7684 <code>scripts</code> \u914D\u7F6E <code>dev</code> <code>dev:test</code> <code>dev:prod</code> \uFF0C\u901A\u8FC7 <code>--mode xxx</code> \u6765\u6267\u884C\u4E0D\u540C\u73AF\u5883</p><ul><li>\u901A\u8FC7 <code>yarn dev</code> \u542F\u52A8\u672C\u5730\u73AF\u5883\u53C2\u6570 , \u6267\u884C <code>development</code></li><li>\u901A\u8FC7 <code>yarn dev:test</code> \u542F\u52A8\u6D4B\u8BD5\u73AF\u5883\u53C2\u6570 , \u6267\u884C <code>test</code></li><li>\u901A\u8FC7 <code>yarn dev:prod</code> \u542F\u52A8\u6B63\u5F0F\u73AF\u5883\u53C2\u6570 , \u6267\u884C <code>prod</code></li></ul><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki"><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,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>
|
||||
<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,y){return o(),e("div",null,l)}const _=s(n,[["render",t]]);export{u as __pageData,_ as default};
|
||||
<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};
|
||||
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