JLNTV_IPD/vue-h5-template
4
0
Fork 0
mirror of https://github.com/sunniejs/vue-h5-template.git synced 2025-04-06 03:57:50 +08:00
Code Issues Projects Releases Wiki Activity

deploy: 2bdd8131dd722256f47b64488fb48f55bdf86855

Browse Source
This commit is contained in:
fonghehe 2022-08-19 10:30:08 +00:00
parent 844f1c46a3
commit d7835adc93
157 changed files with 2703 additions and 1221 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
404.html Normal file
View File

File diff suppressed because one or more lines are too long

32
README.md
View File

@ -1,32 +0,0 @@
# Vue H5 Template 🎉
> [Vue H5 Template](https://github.com/sunniejs/vue-h5-template) 是基于 vue-cli4.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架。
#### 预览
[查看 demo](https://www.sunniejs.cn/vue-h5-template/#/) 建议手机端查看
手机扫码查看
![logo](_images/qrcode.png ':size=200x200')
#### 关注我的知乎，掘金
知乎: [开箱即用 vue 全家桶+vant 移动端解决方案](https://zhuanlan.zhihu.com/p/134289924)
掘金: [vue-cli4 vant rem 移动端框架方案](https://juejin.im/post/5cfefc73f265da1bba58f9f7)
#### 鸣谢 ​
[vue-cli4-config](https://github.com/staven630/vue-cli4-config)
[vue-element-admin](https://github.com/PanJiaChen/vue-element-admin)
#### 贡献代码
使用过程中发现任何问题都可以提[Issue](https://github.com/sunniejs/vue-h5-template/issues) 给我，也非常欢迎 PR 或 [Pull Request ](https://github.com/sunniejs/vue-h5-template/pulls)
#### 如何找到失散已久的组织？
    扫描下方二维码:point_down::point_down:关注“前端女塾”
![logo](https://www.sunniejs.cn/static/wx/640.gif ':size=262x224')
关注公众号：回复“加群”即可加 前端仙女群

11
_coverpage.md
View File

@ -1,11 +0,0 @@
# Vue H5 Template
## 移动端解决方案
基于 vue-cli4.0+webpack 4+vant ui + sass+ rem 适配方案+axios 封装，构建手机端模板脚手架
[<i class="iconfont icon-github"></i> GitHub](https://github.com/sunniejs/vue-h5-template) [马上开始 <i class="iconfont icon-down"></i>](/README)
<!-- background image -->
![](https://www.sunniejs.cn/static/wx/bg.jpg)

BIN
_images/favicon.ico
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.2 KiB

BIN
_images/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 8.0 KiB

BIN
_images/mine.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 33 KiB

BIN
_images/qrcode.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 43 KiB

BIN
_images/qrcode.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.6 KiB

27
_media/custom.css
View File

@ -1,27 +0,0 @@
section.cover .cover-main {
z-index: 100;
}
section.cover.has-mask .mask {
background-image: linear-gradient(hsla(0, 0%, 100%, 0.25), hsla(0, 0%, 100%, 0.25));
background-color: transparent;
opacity: 1;
}
section.cover h1 .anchor span {
font-family: 'Lobster', cursive;
color: var(--theme-color);
}
section.cover h2 .anchor span {
font-family: 'Lobster', cursive;
font-size: 24px;
color: var(--theme-color);
}
section.cover .cover-main > p:last-child a .iconfont {
font-size: 1em;
}
.sidebar > h1 a {
font-family: 'Lobster', cursive;
}

0
_navbar.md
View File

19
_sidebar.md
View File

@ -1,19 +0,0 @@
- [介绍](/README.md)
- [快速上手](/zh-cn/quickstart.md)
- [配置多环境变量](/zh-cn/env.md)
- [rem 适配方案](/zh-cn/rem.md)
- [vw 适配方案](/zh-cn/vw.md)
- [VantUI 组件按需加载](/zh-cn/vant.md)
- [Sass 全局样式](/zh-cn/sass.md)
- [Vuex 状态管理](/zh-cn/vuex.md)
- [Vue-router](/zh-cn/router.md)
- [Axios 封装及接口管理](/zh-cn/axios.md)
- [Webpack 4 vue.config.js 基础配置](/zh-cn/base.md)
- [配置 alias 别名](/zh-cn/alias.md)
- [配置 proxy 跨域](/zh-cn/proxy.md)
- [配置 打包分析](/zh-cn/bundle.md)
- [配置 externals 引入 cdn 资源 ](/zh-cn/externals.md)
- [去掉 console.log ](/zh-cn/console.md)
- [splitChunks 单独打包第三方模块](/zh-cn/chunks.md)
- [添加 IE 兼容 ](/zh-cn/ie.md)
- [Eslint+Pettier 统一开发规范 ](/zh-cn/pettier.md)

1
assets/app.0374baa8.js Normal file
View File

File diff suppressed because one or more lines are too long

14
assets/chunks/VPAlgoliaSearchBox.22a04bb4.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/chunks/ui-custom.9425b3ca.js Normal file
View File

@ -0,0 +1 @@
import{e as r,g as i,i as d,r as l,h as _,w as u,o as p,c as f}from"../app.0374baa8.js";const h=r({__name:"VPCarbonAds",setup(m){const{theme:o}=i(),n=o.value.carbonAds,{isAsideEnabled:s}=d(),a=l();let t=!1;function c(){if(!t){t=!0;const e=document.createElement("script");e.id="_carbonads_js",e.src=`//cdn.carbonads.com/carbon.js?serve=${n.code}&placement=${n.placement}`,e.async=!0,a.value.appendChild(e)}}return n&&_(()=>{s.value?c():u(s,e=>e&&c())}),(e,b)=>(p(),f("div",{class:"VPCarbonAds",ref_key:"container",ref:a},null,512))}});export{h as default};

14
assets/guide_edit.md.d04d7db8.js Normal file
View File

@ -0,0 +1,14 @@
import{_ as s,c as n,o as a,a as e}from"./app.0374baa8.js";const u=JSON.parse('{"title":"\u53C2\u4E0E\u7F16\u8F91","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","lastUpdated":1660904971000}'),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\u5404\u4F4D\u6709\u610F\u613F\u53C2\u4E0E\u5230\u5F00\u6E90\u5F53\u4E2D\u7684\u670B\u53CB\u52A0\u5165\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\u7684\u77E5\u8BC6\uFF0C\u8FD9\u5BF9\u4E2A\u4EBA\u6765\u8BF4\u662F\u4E00\u79CD\u4E0D\u591A\u7684\u6210\u957F\u673A\u4F1A</p><div class="language-js"><button class="copy"></button><span class="lang">js</span><pre><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,r,i,d,_,y){return a(),n("div",null,t)}const A=s(p,[["render",o]]);export{u as __pageData,A as default};

1
assets/guide_edit.md.d04d7db8.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as e}from"./app.0374baa8.js";const u=JSON.parse('{"title":"\u53C2\u4E0E\u7F16\u8F91","description":"","frontmatter":{},"headers":[],"relativePath":"guide/edit.md","lastUpdated":1660904971000}'),p={name:"guide/edit.md"},l=e("",3),t=[l];function o(c,r,i,d,_,y){return a(),n("div",null,t)}const A=s(p,[["render",o]]);export{u as __pageData,A as default};

1
assets/guide_index.md.6c6197ae.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as t,o as a,a as i}from"./app.0374baa8.js";const v=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u7279\u70B9","slug":"\u7279\u70B9"},{"level":3,"title":"\u6700\u65B0\u6280\u672F\u6808","slug":"\u6700\u65B0\u6280\u672F\u6808"},{"level":3,"title":"\u57FA\u4E8E TypeScript","slug":"\u57FA\u4E8E-typescript"},{"level":3,"title":"\u8F7B\u91CF\u7EA7","slug":"\u8F7B\u91CF\u7EA7"},{"level":3,"title":"\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863","slug":"\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863"}],"relativePath":"guide/index.md","lastUpdated":1660904971000}'),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-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 vite + vue3 + pinia + ( Vant or Varlet or NutUI ) + viewport \u9002\u914D\u65B9\u6848 \uFF0C\u6784\u5EFA\u79FB\u52A8\u7AEF\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\u7ECF\u5178\u7684 ui \u6846\u67B6\u548C vite \u63D2\u4EF6</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 \u8D8A\u6765\u8D8A\u88AB\u5927\u578B\u7684 js \u9879\u76EE\u6240\u9700\u8981\uFF0C\u660E\u786E\u7684\u7C7B\u578B\u5B9A\u4E49\u53EF\u4EE5\u7701\u4E0B\u4E0D\u5C11\u7684\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\u89E3\u51B3\u65B9\u6848\uFF0C\u5C3D\u91CF\u505A\u5230\u8F7B\u91CF\u4E0D\u5197\u6742\uFF0C\u53EA\u5F15\u5165\u9AD8\u9891\u6B21\u3001\u9700\u6C42\u9AD8\u7684\u63D2\u4EF6\u548C\u6E05\u6670\u7684\u793A\u4F8B</li><li>\u8F7B\u88C5\u4E0A\u9635\uFF0C\u4FBF\u4E8E\u62D3\u5C55\u5F00\u53D1</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),s=[l];function d(h,n,c,u,p,o){return a(),t("div",null,s)}const f=e(r,[["render",d]]);export{v as __pageData,f as default};

1
assets/guide_index.md.6c6197ae.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as t,o as a,a as i}from"./app.0374baa8.js";const v=JSON.parse('{"title":"Vue-H5-Template","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u7279\u70B9","slug":"\u7279\u70B9"},{"level":3,"title":"\u6700\u65B0\u6280\u672F\u6808","slug":"\u6700\u65B0\u6280\u672F\u6808"},{"level":3,"title":"\u57FA\u4E8E TypeScript","slug":"\u57FA\u4E8E-typescript"},{"level":3,"title":"\u8F7B\u91CF\u7EA7","slug":"\u8F7B\u91CF\u7EA7"},{"level":3,"title":"\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863","slug":"\u901A\u4FD7\u6613\u61C2\u7684\u6587\u6863"}],"relativePath":"guide/index.md","lastUpdated":1660904971000}'),r={name:"guide/index.md"},l=i("",11),s=[l];function d(h,n,c,u,p,o){return a(),t("div",null,s)}const f=e(r,[["render",d]]);export{v as __pageData,f as default};

1
assets/guide_start.md.1c92dac3.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as a,o as t,a as r}from"./app.0374baa8.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"},{"level":2,"title":"\u5305\u7BA1\u7406\u5668","slug":"\u5305\u7BA1\u7406\u5668"},{"level":2,"title":"\u542F\u52A8\u9879\u76EE","slug":"\u542F\u52A8\u9879\u76EE"}],"relativePath":"guide/start.md","lastUpdated":1660904971000}'),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</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</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 \u9879\u76EE\u542F\u52A8</a></p><p>\u5982\u4F60\u4F7F\u7528\u7684\u662F vue3-template\uFF0C\u8BF7\u53C2\u8003<a href="./">vue3 \u9879\u76EE\u542F\u52A8</a></p>',9),s=[d];function o(h,i,l,p,c,_){return t(),a("div",null,s)}const f=e(n,[["render",o]]);export{m as __pageData,f as default};

1
assets/guide_start.md.1c92dac3.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as a,o as t,a as r}from"./app.0374baa8.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"},{"level":2,"title":"\u5305\u7BA1\u7406\u5668","slug":"\u5305\u7BA1\u7406\u5668"},{"level":2,"title":"\u542F\u52A8\u9879\u76EE","slug":"\u542F\u52A8\u9879\u76EE"}],"relativePath":"guide/start.md","lastUpdated":1660904971000}'),n={name:"guide/start.md"},d=r("",9),s=[d];function o(h,i,l,p,c,_){return t(),a("div",null,s)}const f=e(n,[["render",o]]);export{m as __pageData,f as default};

16
assets/guide_vue2_alias.md.ab53ab6a.js Normal file
View File

@ -0,0 +1,16 @@
import{_ as s,c as a,o as n,a as o}from"./app.0374baa8.js";const i=JSON.parse('{"title":"\u914D\u7F6E alias \u522B\u540D","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","lastUpdated":1660904971000}'),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 class="copy"></button><span class="lang">javascript</span><pre><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;">&quot;</span><span style="color:#C3E88D;">path</span><span style="color:#89DDFF;">&quot;</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;">=&gt;</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;">&quot;</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">&quot;</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;">=&gt;</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:#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;">&quot;</span><span style="color:#C3E88D;">@</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">src</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">assets</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">src/assets</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">api</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">src/api</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">views</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">src/views</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">components</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">src/components</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#89DDFF;">};</span></span>
<span class="line"></span></code></pre></div>`,2),e=[p];function t(c,r,F,D,y,A){return n(),a("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};

1
assets/guide_vue2_alias.md.ab53ab6a.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as o}from"./app.0374baa8.js";const i=JSON.parse('{"title":"\u914D\u7F6E alias \u522B\u540D","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/alias.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/alias.md"},p=o("",2),e=[p];function t(c,r,F,D,y,A){return n(),a("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};

79
assets/guide_vue2_axios.md.8e4e09af.js Normal file
View File

@ -0,0 +1,79 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-axios-\u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406"}],"relativePath":"guide/vue2/axios.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/axios.md"},o=l(`<h3 id="\u2705-axios-\u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406" tabindex="-1"><span id="axios">\u2705 Axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406</span> <a class="header-anchor" href="#\u2705-axios-\u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406" aria-hidden="true">#</a></h3><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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">axios</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">@/store</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">@/config</span><span style="color:#89DDFF;">&#39;</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>
<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:#A6ACCD;">config</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</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>
<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;">&#39;</span><span style="color:#C3E88D;">X-Token</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;&#39;</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>
<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:#A6ACCD;">error</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</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:#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>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">)</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:#A6ACCD;">response</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</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>
<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>
<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;">&amp;&amp;</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;">&#39;</span><span style="color:#C3E88D;">FedLogOut</span><span style="color:#89DDFF;">&#39;</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;">=&gt;</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>
<span class="line"><span style="color:#F07178;"> </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;"> </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;">&#39;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</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>
<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:#A6ACCD;">error</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</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>
<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;">&#39;</span><span style="color:#C3E88D;">err</span><span style="color:#89DDFF;">&#39;</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:#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>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"><span style="color:#A6ACCD;">)</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>
<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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">qs</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">@/utils/request</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">/user/userinfo</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">post</span><span style="color:#89DDFF;">&#39;</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>
<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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">@/api/user.js</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">sunnie</span><span style="color:#89DDFF;">&#39;</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;">=&gt;</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;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{}</span><span style="color:#A6ACCD;">)</span></span>
<span class="line"></span></code></pre></div>`,10),e=[o];function c(r,t,F,y,D,A){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default};

1
assets/guide_vue2_axios.md.8e4e09af.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-axios-\u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406"}],"relativePath":"guide/vue2/axios.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/axios.md"},o=l("",10),e=[o];function c(r,t,F,y,D,A){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default};

23
assets/guide_vue2_base.md.6ea81797.js Normal file
View File

@ -0,0 +1,23 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-webpack-4-vue-config-js-\u57FA\u7840\u914D\u7F6E"}],"relativePath":"guide/vue2/base.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/base.md"},o=p(`<h3 id="\u2705-webpack-4-vue-config-js-\u57FA\u7840\u914D\u7F6E" tabindex="-1"><span id="base">\u2705 Webpack 4 vue.config.js \u57FA\u7840\u914D\u7F6E </span> <a class="header-anchor" href="#\u2705-webpack-4-vue-config-js-\u57FA\u7840\u914D\u7F6E" aria-hidden="true">#</a></h3><p>\u5982\u679C\u4F60\u7684 <code>Vue Router</code> \u6A21\u5F0F\u662F hash</p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&#39;</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\u76F4</strong></p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/app/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"></span></code></pre></div><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">&#39;</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>
<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;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u7F72\u5E94\u7528\u5305\u65F6\u7684\u57FA\u672C URL\u3002 vue-router hash \u6A21\u5F0F\u4F7F\u7528</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// publicPath: &#39;/app/&#39;, // \u7F72\u5E94\u7528\u5305\u65F6\u7684\u57FA\u672C URL\u3002 vue-router history\u6A21\u5F0F\u4F7F\u7528</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">outputDir</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">dist</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u751F\u4EA7\u73AF\u5883\u6784\u5EFA\u6587\u4EF6\u7684\u76EE\u5F55</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">assetsDir</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">static</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// outputDir\u7684\u9759\u6001\u8D44\u6E90(js\u3001css\u3001img\u3001fonts)\u76EE\u5F55</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">lintOnSave</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </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;">productionSourceMap</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;">// \u5982\u679C\u4F60\u4E0D\u9700\u8981\u751F\u4EA7\u73AF\u5883\u7684 source map\uFF0C\u53EF\u4EE5\u5C06\u5176\u8BBE\u7F6E\u4E3A false \u4EE5\u52A0\u901F\u751F\u4EA7\u73AF\u5883\u6784\u5EFA\u3002</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:#A6ACCD;"> </span><span style="color:#F07178;">port</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">9020</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u7AEF\u53E3\u53F7</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">open</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;">// \u542F\u52A8\u540E\u6253\u5F00\u6D4F\u89C8\u5668</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">overlay</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;">// \u5F53\u51FA\u73B0\u7F16\u8BD1\u5668\u9519\u8BEF\u6216\u8B66\u544A\u65F6\uFF0C\u5728\u6D4F\u89C8\u5668\u4E2D\u663E\u793A\u5168\u5C4F\u8986\u76D6\u5C42</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">warnings</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;">errors</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</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;">// ...</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>`,6),e=[o];function c(t,r,D,y,F,C){return n(),a("div",null,e)}const u=s(l,[["render",c]]);export{i as __pageData,u as default};

1
assets/guide_vue2_base.md.6ea81797.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-webpack-4-vue-config-js-\u57FA\u7840\u914D\u7F6E"}],"relativePath":"guide/vue2/base.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/base.md"},o=p("",6),e=[o];function c(t,r,D,y,F,C){return n(),a("div",null,e)}const u=s(l,[["render",c]]);export{i as __pageData,u as default};

16
assets/guide_vue2_bundle.md.6c3cc0f6.js Normal file
View File

@ -0,0 +1,16 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E-\u6253\u5305\u5206\u6790"}],"relativePath":"guide/vue2/bundle.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/bundle.md"},o=l(`<h3 id="\u2705-\u914D\u7F6E-\u6253\u5305\u5206\u6790" tabindex="-1"><span id="bundle">\u2705 \u914D\u7F6E \u6253\u5305\u5206\u6790 </span> <a class="header-anchor" href="#\u2705-\u914D\u7F6E-\u6253\u5305\u5206\u6790" aria-hidden="true">#</a></h3><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> BundleAnalyzerPlugin </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;">&#39;</span><span style="color:#C3E88D;">webpack-bundle-analyzer</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">BundleAnalyzerPlugin</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:#A6ACCD;">config</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</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:#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;">&#39;</span><span style="color:#C3E88D;">webpack-report</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">static</span><span style="color:#89DDFF;">&#39;</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>
<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 class="copy"></button><span class="lang">bash</span><pre><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,y,D,i){return a(),n("div",null,e)}const C=s(p,[["render",c]]);export{d as __pageData,C as default};

1
assets/guide_vue2_bundle.md.6c3cc0f6.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E-\u6253\u5305\u5206\u6790"}],"relativePath":"guide/vue2/bundle.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/bundle.md"},o=l("",3),e=[o];function c(t,r,F,y,D,i){return a(),n("div",null,e)}const C=s(p,[["render",c]]);export{d as __pageData,C as default};

42
assets/guide_vue2_chunks.md.e8f3e946.js Normal file
View File

@ -0,0 +1,42 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const A=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-splitchunks-\u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757"}],"relativePath":"guide/vue2/chunks.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/chunks.md"},o=p(`<h3 id="\u2705-splitchunks-\u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757" tabindex="-1"><span id="chunks">\u2705 splitChunks \u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757</span> <a class="header-anchor" href="#\u2705-splitchunks-\u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757" aria-hidden="true">#</a></h3><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><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:#A6ACCD;">config</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</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:#A6ACCD;">config</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</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;">&#39;</span><span style="color:#C3E88D;">ScriptExtHtmlWebpackPlugin</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">script-ext-html-webpack-plugin</span><span style="color:#89DDFF;">&#39;</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:#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>
<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;">&#39;</span><span style="color:#C3E88D;">all</span><span style="color:#89DDFF;">&#39;</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:#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;">&#39;</span><span style="color:#C3E88D;">chunk-commons</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">src/components</span><span style="color:#89DDFF;">&#39;</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;"> </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;">&#39;</span><span style="color:#C3E88D;">chunk-libs</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">initial</span><span style="color:#89DDFF;">&#39;</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;"> 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;">&#39;</span><span style="color:#C3E88D;">chunk-vantUI</span><span style="color:#89DDFF;">&#39;</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;"> 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>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#F07178;">)</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;">runtimeChunk</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">single</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><span style="color:#F07178;"> </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>
<span class="line"></span></code></pre></div>`,2),e=[o];function c(t,F,r,D,y,i){return a(),n("div",null,e)}const u=s(l,[["render",c]]);export{A as __pageData,u as default};

1
assets/guide_vue2_chunks.md.e8f3e946.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const A=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-splitchunks-\u5355\u72EC\u6253\u5305\u7B2C\u4E09\u65B9\u6A21\u5757"}],"relativePath":"guide/vue2/chunks.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/chunks.md"},o=p("",2),e=[o];function c(t,F,r,D,y,i){return a(),n("div",null,e)}const u=s(l,[["render",c]]);export{A as __pageData,u as default};

24
assets/guide_vue2_console.md.08d89baa.js Normal file
View File

@ -0,0 +1,24 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u53BB\u6389-console-log"}],"relativePath":"guide/vue2/console.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/console.md"},o=l(`<h3 id="\u2705-\u53BB\u6389-console-log" tabindex="-1"><span id="console">\u2705 \u53BB\u6389 console.log </span> <a class="header-anchor" href="#\u2705-\u53BB\u6389-console-log" aria-hidden="true">#</a></h3><p>\u4FDD\u7559\u4E86\u6D4B\u8BD5\u73AF\u5883\u548C\u672C\u5730\u73AF\u5883\u7684 <code>console.log</code></p><div class="language-bash"><button class="copy"></button><span class="lang">bash</span><pre><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 class="copy"></button><span class="lang">javascript</span><pre><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>
<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;">&#39;</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">&#39;</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>
<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;">&#39;</span><span style="color:#C3E88D;">import</span><span style="color:#89DDFF;">&#39;</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:#F07178;">libraryName</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">libraryDirectory</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">es</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</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;">&#39;</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#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:#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;">&#39;</span><span style="color:#C3E88D;">transform-remove-console</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span></span>
<span class="line"><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 style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@vue/cli-plugin-babel/preset</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">entry</span><span style="color:#89DDFF;">&#39;</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=[o];function c(t,r,D,y,F,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default};

1
assets/guide_vue2_console.md.08d89baa.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u53BB\u6389-console-log"}],"relativePath":"guide/vue2/console.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/console.md"},o=l("",5),e=[o];function c(t,r,D,y,F,C){return a(),n("div",null,e)}const d=s(p,[["render",c]]);export{i as __pageData,d as default};

30
assets/guide_vue2_env.md.1da22f1b.js Normal file
View File

@ -0,0 +1,30 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const A=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF"}],"relativePath":"guide/vue2/env.md","lastUpdated":1660904971000}'),o={name:"guide/vue2/env.md"},l=p(`<h3 id="\u2705-\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF" tabindex="-1"><span id="env">\u2705 \u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF </span> <a class="header-anchor" href="#\u2705-\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF" aria-hidden="true">#</a></h3><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 class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">scripts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">serve</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vue-cli-service serve --open</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">stage</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vue-cli-service build --mode staging</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">build</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vue-cli-service build</span><span style="color:#89DDFF;">&quot;</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 = &#39;development&#39;</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 class="copy"></button><span class="lang">bash</span><pre><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV=</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">development</span><span style="color:#89DDFF;">&#39;</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 class="copy"></button><span class="lang">bash</span><pre><code><span class="line"><span style="color:#A6ACCD;">NODE_ENV=</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">staging</span><span style="color:#89DDFF;">&#39;</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 class="copy"></button><span class="lang">bash</span><pre><code><span class="line"><span style="color:#A6ACCD;"> NODE_ENV=</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">&#39;</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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">./env.</span><span style="color:#89DDFF;">&#39;</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>
<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>
<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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">vue-h5-template</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">http://localhost:9018</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">https://test.xxx.com/api</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">xxx</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">xxx</span><span style="color:#89DDFF;">&#39;</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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">@/config</span><span style="color:#89DDFF;">&#39;</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>
<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 C=s(o,[["render",c]]);export{A as __pageData,C as default};

1
assets/guide_vue2_env.md.1da22f1b.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const A=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E\u591A\u73AF\u5883\u53D8\u91CF"}],"relativePath":"guide/vue2/env.md","lastUpdated":1660904971000}'),o={name:"guide/vue2/env.md"},l=p("",21),e=[l];function c(t,r,D,y,F,i){return a(),n("div",null,e)}const C=s(o,[["render",c]]);export{A as __pageData,C as default};

66
assets/guide_vue2_externals.md.b7fcbcdb.js Normal file
View File

@ -0,0 +1,66 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E-externals-\u5F15\u5165-cdn-\u8D44\u6E90"}],"relativePath":"guide/vue2/externals.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/externals.md"},o=l(`<h3 id="\u2705-\u914D\u7F6E-externals-\u5F15\u5165-cdn-\u8D44\u6E90" tabindex="-1"><span id="externals">\u2705 \u914D\u7F6E externals \u5F15\u5165 cdn \u8D44\u6E90 </span> <a class="header-anchor" href="#\u2705-\u914D\u7F6E-externals-\u5F15\u5165-cdn-\u8D44\u6E90" aria-hidden="true">#</a></h3><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>&lt;script&gt;</code>\u6807\u7B7E\u90FD\u4F1A\u505C\u4E0B\u6765\u89E3\u6790\u6267\u884C\uFF0C\u6240\u4EE5\u5E94\u8BE5\u5C3D\u53EF\u80FD\u51CF\u5C11<code>&lt;script&gt;</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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">./src/config/index.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</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;">&#39;</span><span style="color:#C3E88D;">vue mobile template</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">&#39;</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>
<span class="line"></span>
<span class="line"><span style="color:#676E95;">// 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;">&#39;</span><span style="color:#C3E88D;">Vue</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">vue-router</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">VueRouter</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">vuex</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Vuex</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<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;">&#39;</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">axios</span><span style="color:#89DDFF;">&#39;</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:#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:#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:#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;">&#39;</span><span style="color:#C3E88D;">https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css</span><span style="color:#89DDFF;">&#39;</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>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js</span><span style="color:#89DDFF;">&#39;</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 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:#A6ACCD;">config</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</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>
<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:#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>
<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:#A6ACCD;">config</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</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;">&#39;</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">&#39;</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:#A6ACCD;">args</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</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:#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>
<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:#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>
<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>
<span class="line"><span style="color:#F07178;"> </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>
<span class="line"></span></code></pre></div><p>\u5728 public/index.html \u4E2D\u6DFB\u52A0</p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;!--</span><span style="color:#A6ACCD;"> \u4F7F\u7528CDN\u7684CSS\u6587\u4EF6 </span><span style="color:#89DDFF;">--&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;%</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;"> 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;">&amp;&amp;</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;">%&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">&lt;%= htmlWebpackPlugin.options.cdn.css[i] %&gt;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">preload</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">as</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">style</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">&lt;%= htmlWebpackPlugin.options.cdn.css[i] %&gt;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">rel</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">stylesheet</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;%</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">%&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;!--</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;">--&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;%</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;"> 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;">&amp;&amp;</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;">%&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">&lt;%= htmlWebpackPlugin.options.cdn.js[i] %&gt;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&lt;%</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">%&gt;</span></span>
<span class="line"></span></code></pre></div>`,8),e=[o];function t(c,D,r,F,y,C){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};

1
assets/guide_vue2_externals.md.b7fcbcdb.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E-externals-\u5F15\u5165-cdn-\u8D44\u6E90"}],"relativePath":"guide/vue2/externals.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/externals.md"},o=l("",8),e=[o];function t(c,D,r,F,y,C){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{i as __pageData,d as default};

12
assets/guide_vue2_ie.md.cb5cfd3a.js Normal file
View File

@ -0,0 +1,12 @@
import{_ as s,c as a,o as n,a as e}from"./app.0374baa8.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u6DFB\u52A0-ie-\u517C\u5BB9"}],"relativePath":"guide/vue2/ie.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/ie.md"},l=e(`<h3 id="\u2705-\u6DFB\u52A0-ie-\u517C\u5BB9" tabindex="-1"><span id="ie">\u2705 \u6DFB\u52A0 IE \u517C\u5BB9 </span> <a class="header-anchor" href="#\u2705-\u6DFB\u52A0-ie-\u517C\u5BB9" aria-hidden="true">#</a></h3><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 class="copy"></button><span class="lang">bash</span><pre><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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">core-js/stable</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">regenerator-runtime/runtime</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span></code></pre></div><p>\u914D\u7F6E <code>babel.config.js</code></p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><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>
<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 style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@vue/cli-plugin-babel/preset</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">usage</span><span style="color:#89DDFF;">&#39;</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;"> 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),o=[l];function c(t,r,i,D,y,d){return n(),a("div",null,o)}const u=s(p,[["render",c]]);export{C as __pageData,u as default};

1
assets/guide_vue2_ie.md.cb5cfd3a.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as e}from"./app.0374baa8.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u6DFB\u52A0-ie-\u517C\u5BB9"}],"relativePath":"guide/vue2/ie.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/ie.md"},l=e("",8),o=[l];function c(t,r,i,D,y,d){return n(),a("div",null,o)}const u=s(p,[["render",c]]);export{C as __pageData,u as default};

152
assets/guide_vue2_lint.md.cda95aed.js Normal file
View File

@ -0,0 +1,152 @@
import{_ as s,c as n,o as a,a as o}from"./app.0374baa8.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-eslint-pettier-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303"}],"relativePath":"guide/vue2/lint.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/lint.md"},p=o(`<h3 id="\u2705-eslint-pettier-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303" tabindex="-1"><span id="pettier">\u2705 Eslint + Pettier \u7EDF\u4E00\u5F00\u53D1\u89C4\u8303 </span> <a class="header-anchor" href="#\u2705-eslint-pettier-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303" aria-hidden="true">#</a></h3><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 class="copy"></button><span class="lang">bash</span><pre><code><span class="line"><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">printWidth</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: 120,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">tabWidth</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: 2,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">singleQuote</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: true,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">trailingComma</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">semi</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wrap_line_length</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: 120,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wrap_attributes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">auto</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">proseWrap</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">always</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">arrowParens</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">avoid</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">bracketSpacing</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">jsxBracketSameLine</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: true,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">useTabs</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">overrides</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">files</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.prettierrc</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">parser</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">&quot;</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 class="copy"></button><span class="lang">bash</span><pre><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;">&quot;</span><span style="color:#C3E88D;">files.autoSave</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">off</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">editor.fontFamily</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Consolas, &#39;Courier New&#39;, monospace,&#39;\u5B8B\u4F53&#39;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">terminal.integrated.shell.windows</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</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;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">editor.fontSize</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">editor.roundedSelection</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">editor.suggestFontSize</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">explorer.openEditors.visible</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">git.autorefresh</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">terminal.integrated.fontSize</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">terminal.integrated.cursorBlinking</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">editor.tabSize</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">editor.formatOnType</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: true,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">window.zoomLevel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: 0,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">editor.detectIndentation</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">css.fileExtensions</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">[</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">css</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">]</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">files.associations</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">*.string</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">*.vue</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">*.wxss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">css</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">*.wxml</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wxml</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">*.wxs</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">*.cjson</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">jsonc</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">*.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">javascript</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">emmet.syntaxProfiles</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vue-html</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">search.exclude</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">**/node_modules</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: true,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">**/bower_components</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">editor.formatOnSave</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">editor.quickSuggestions</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">strings</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">vetur.format.options.tabSize</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: 2,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.options.useTabs</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.html</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">js-beautify-html</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.css</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.postcss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.less</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.js</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vscode-typescript</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.sass</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">sass-formatter</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.defaultFormatter.ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vetur.format.defaultFormatterOptions</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">js-beautify-html</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wrap_attributes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">aligned-multiple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, // \u8D85\u8FC7150\u6298\u884C</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wrap-line-length</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">prettier</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">printWidth</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: 120,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">tabWidth</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: 2,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">singleQuote</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">trailingComma</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">none</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">semi</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wrap_line_length</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: 120,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wrap_attributes</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">aligned-multiple</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">, // \u8D85\u8FC7150\u6298\u884C</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">proseWrap</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">always</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">arrowParens</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">avoid</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">bracketSpacing</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: true,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">jsxBracketSameLine</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: true,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">useTabs</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">overrides</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">files</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.prettierrc</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">options</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">parser</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">json</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">[json]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">vetur.validation.template</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">html.format.enable</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">json.format.enable</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">javascript.format.enable</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">typescript.format.enable</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: false,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">[html]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">[javascript]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">[jsonc]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">[vue]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">octref.vetur</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">emmet.includeLanguages</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">wxml</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">html</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">[typescriptreact]</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">editor.defaultFormatter</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">esbenp.prettier-vscode</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">editor.codeActionsOnSave</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">source.fixAll.eslint</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">minapp-vscode.disableAutoConfig</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: true,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">javascript.implicitProjectConfig.experimentalDecorators</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: true,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">editor.maxTokenizationLineLength</span><span style="color:#89DDFF;">&quot;</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 a(),n("div",null,t)}const i=s(l,[["render",e]]);export{u as __pageData,i as default};

1
assets/guide_vue2_lint.md.cda95aed.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as o}from"./app.0374baa8.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-eslint-pettier-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303"}],"relativePath":"guide/vue2/lint.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/lint.md"},p=o("",6),t=[p];function e(D,c,r,y,C,F){return a(),n("div",null,t)}const i=s(l,[["render",e]]);export{u as __pageData,i as default};

24
assets/guide_vue2_proxy.md.e685500d.js Normal file
View File

@ -0,0 +1,24 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E-proxy-\u8DE8\u57DF"}],"relativePath":"guide/vue2/proxy.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/proxy.md"},o=p(`<h3 id="\u2705-\u914D\u7F6E-proxy-\u8DE8\u57DF" tabindex="-1"><span id="proxy">\u2705 \u914D\u7F6E proxy \u8DE8\u57DF </span> <a class="header-anchor" href="#\u2705-\u914D\u7F6E-proxy-\u8DE8\u57DF" aria-hidden="true">#</a></h3><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 &#39;/&#39;</strong></u></p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><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:#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:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">/api</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">https://test.xxx.com</span><span style="color:#89DDFF;">&#39;</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;">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;">&#39;</span><span style="color:#F07178;">^/api</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&#39;</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:#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 class="copy"></button><span class="lang">javascript</span><pre><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 style="color:#F07178;"> url</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/api/userinfo</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">post</span><span style="color:#89DDFF;">&#39;</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>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre></div>`,6),e=[o];function c(t,r,D,F,y,A){return n(),a("div",null,e)}const d=s(l,[["render",c]]);export{C as __pageData,d as default};

1
assets/guide_vue2_proxy.md.e685500d.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const C=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-\u914D\u7F6E-proxy-\u8DE8\u57DF"}],"relativePath":"guide/vue2/proxy.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/proxy.md"},o=p("",6),e=[o];function c(t,r,D,F,y,A){return n(),a("div",null,e)}const d=s(l,[["render",c]]);export{C as __pageData,d as default};

28
assets/guide_vue2_rem.md.92227c2d.js Normal file
View File

@ -0,0 +1,28 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-rem-\u9002\u914D\u65B9\u6848"}],"relativePath":"guide/vue2/rem.md","lastUpdated":1660904971000}'),o={name:"guide/vue2/rem.md"},l=p(`<h3 id="\u2705-rem-\u9002\u914D\u65B9\u6848" tabindex="-1"><span id="rem">\u2705 rem \u9002\u914D\u65B9\u6848 </span> <a class="header-anchor" href="#\u2705-rem-\u9002\u914D\u65B9\u6848" aria-hidden="true">#</a></h3><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 class="copy"></button><span class="lang">javascript</span><pre><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 style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Android 4.1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">iOS 7.1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Chrome &gt; 31</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ff &gt; 31</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ie &gt;= 8</span><span style="color:#89DDFF;">&#39;</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:#89DDFF;">&#39;</span><span style="color:#F07178;">postcss-pxtorem</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">*</span><span style="color:#89DDFF;">&#39;</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:#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\u641E\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 class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">font-size: 37.5px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</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 class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">image</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://www.sunniejs.cn/static/weapp/logo.png</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</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;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div>`,19),e=[l];function t(c,r,D,F,y,C){return n(),a("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};

1
assets/guide_vue2_rem.md.92227c2d.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const d=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-rem-\u9002\u914D\u65B9\u6848"}],"relativePath":"guide/vue2/rem.md","lastUpdated":1660904971000}'),o={name:"guide/vue2/rem.md"},l=p("",19),e=[l];function t(c,r,D,F,y,C){return n(),a("div",null,e)}const A=s(o,[["render",t]]);export{d as __pageData,A as default};

25
assets/guide_vue2_router.md.99674be0.js Normal file
View File

@ -0,0 +1,25 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-vue-router"}],"relativePath":"guide/vue2/router.md","lastUpdated":1660904971000}'),o={name:"guide/vue2/router.md"},l=p(`<h3 id="\u2705-vue-router" tabindex="-1"><span id="router">\u2705 Vue-router </span> <a class="header-anchor" href="#\u2705-vue-router" aria-hidden="true">#</a></h3><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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">vue-router</span><span style="color:#89DDFF;">&#39;</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>
<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:#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;">&#39;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">index</span><span style="color:#89DDFF;">&#39;</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;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@/views/home/index</span><span style="color:#89DDFF;">&#39;</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:#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;">&#39;</span><span style="color:#C3E88D;">\u9996\u9875</span><span style="color:#89DDFF;">&#39;</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:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#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;">=&gt;</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: &#39;history&#39;, // \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: &#39;/app/&#39;,</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;">=&gt;</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>
<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>
<span class="line"></span></code></pre></div>`,5),e=[l];function t(c,r,D,y,A,F){return a(),n("div",null,e)}const u=s(o,[["render",t]]);export{i as __pageData,u as default};

1
assets/guide_vue2_router.md.99674be0.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-vue-router"}],"relativePath":"guide/vue2/router.md","lastUpdated":1660904971000}'),o={name:"guide/vue2/router.md"},l=p("",5),e=[l];function t(c,r,D,y,A,F){return a(),n("div",null,e)}const u=s(o,[["render",t]]);export{i as __pageData,u as default};

60
assets/guide_vue2_sass.md.5098ef38.js Normal file
View File

@ -0,0 +1,60 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const A=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-sass-\u5168\u5C40\u6837\u5F0F"}],"relativePath":"guide/vue2/sass.md","lastUpdated":1660904971000}'),p={name:"guide/vue2/sass.md"},o=l(`<h3 id="\u2705-sass-\u5168\u5C40\u6837\u5F0F" tabindex="-1"><span id="sass">\u2705 Sass \u5168\u5C40\u6837\u5F0F</span> <a class="header-anchor" href="#\u2705-sass-\u5168\u5C40\u6837\u5F0F" aria-hidden="true">#</a></h3><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 class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</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;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scoped</span><span style="color:#89DDFF;">&gt;</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;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</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 class="copy"></button><span class="lang">bash</span><pre><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 class="copy"></button><span class="lang">css</span><pre><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>&gt;&gt;&gt;</code> \u6765\u5B9E\u73B0\uFF1A</p><div class="language-css"><button class="copy"></button><span class="lang">css</span><pre><code><span class="line"><span style="color:#A6ACCD;">&lt;</span><span style="color:#FFCB6B;">style</span><span style="color:#A6ACCD;"> scoped</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">.</span><span style="color:#FFCB6B;">a</span><span style="color:#A6ACCD;"> &gt;&gt;&gt; </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;">&lt;/</span><span style="color:#FFCB6B;">style</span><span style="color:#89DDFF;">&gt;</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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">production</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">prod</span><span style="color:#89DDFF;">&#39;</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>
<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;">&#39;</span><span style="color:#C3E88D;">./src/config/index.js</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</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 &quot;assets/css/mixin.scss&quot;;</span></span>
<span class="line"><span style="color:#C3E88D;"> @import &quot;assets/css/variables.scss&quot;;</span></span>
<span class="line"><span style="color:#C3E88D;"> $cdn: &quot;</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;">&quot;;</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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">@/assets/css/index.scss</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">@/config</span><span style="color:#89DDFF;">&#39;</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>
<span class="line"></span></code></pre></div><p>\u5728 css \u548C js \u4F7F\u7528</p><div class="language-html"><button class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</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>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">scss</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">scoped</span><span style="color:#89DDFF;">&gt;</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:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/weapp/logo.png</span><span style="color:#89DDFF;">&#39;</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;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</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
assets/guide_vue2_sass.md.5098ef38.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const A=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-sass-\u5168\u5C40\u6837\u5F0F"}],"relativePath":"guide/vue2/sass.md","lastUpdated":1660904971000}'),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};

14
assets/guide_vue2_start.md.ffc7a092.js Normal file
View File

@ -0,0 +1,14 @@
import{_ as s,c as a,o as n,a as e}from"./app.0374baa8.js";const A=JSON.parse('{"title":"\u542F\u52A8\u9879\u76EE","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","lastUpdated":1660904971000}'),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 class="copy"></button><span class="lang">js</span><pre><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,_,y,D){return n(),a("div",null,t)}const C=s(l,[["render",o]]);export{A as __pageData,C as default};

1
assets/guide_vue2_start.md.ffc7a092.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as e}from"./app.0374baa8.js";const A=JSON.parse('{"title":"\u542F\u52A8\u9879\u76EE","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue2/start.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/start.md"},p=e("",2),t=[p];function o(c,r,i,_,y,D){return n(),a("div",null,t)}const C=s(l,[["render",o]]);export{A as __pageData,C as default};

25
assets/guide_vue2_vant.md.2a7548d9.js Normal file
View File

@ -0,0 +1,25 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-vantui-\u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D"}],"relativePath":"guide/vue2/vant.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/vant.md"},o=p(`<h3 id="\u2705-vantui-\u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D" tabindex="-1"><span id="vant">\u2705 VantUI \u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D </span> <a class="header-anchor" href="#\u2705-vantui-\u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D" aria-hidden="true">#</a></h3><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><h4 id="\u5B89\u88C5\u63D2\u4EF6" tabindex="-1">\u5B89\u88C5\u63D2\u4EF6 <a class="header-anchor" href="#\u5B89\u88C5\u63D2\u4EF6" aria-hidden="true">#</a></h4><div class="language-bash"><button class="copy"></button><span class="lang">bash</span><pre><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 class="copy"></button><span class="lang">javascript</span><pre><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>
<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;">&#39;</span><span style="color:#C3E88D;">import</span><span style="color:#89DDFF;">&#39;</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:#F07178;">libraryName</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">libraryDirectory</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">es</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</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;">&#39;</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> ]</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;">]</span></span>
<span class="line"><span style="color:#89DDFF;">module.exports</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">presets</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [[</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">@vue/cli-plugin-babel/preset</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">usage</span><span style="color:#89DDFF;">&#39;</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;"> plugins</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="\u4F7F\u7528\u7EC4\u4EF6" tabindex="-1">\u4F7F\u7528\u7EC4\u4EF6 <a class="header-anchor" href="#\u4F7F\u7528\u7EC4\u4EF6" aria-hidden="true">#</a></h4><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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">&#39;</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>
<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>
<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>
<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>
<span class="line"></span></code></pre></div>`,10),e=[o];function t(c,r,D,y,F,C){return n(),a("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};

1
assets/guide_vue2_vant.md.2a7548d9.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-vantui-\u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D"}],"relativePath":"guide/vue2/vant.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/vant.md"},o=p("",10),e=[o];function t(c,r,D,y,F,C){return n(),a("div",null,e)}const u=s(l,[["render",t]]);export{i as __pageData,u as default};

30
assets/guide_vue2_vuex.md.69c74237.js Normal file
View File

@ -0,0 +1,30 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-vuex-\u72B6\u6001\u7BA1\u7406"}],"relativePath":"guide/vue2/vuex.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/vuex.md"},o=p(`<h3 id="\u2705-vuex-\u72B6\u6001\u7BA1\u7406" tabindex="-1"><span id="vuex">\u2705 Vuex \u72B6\u6001\u7BA1\u7406</span> <a class="header-anchor" href="#\u2705-vuex-\u72B6\u6001\u7BA1\u7406" aria-hidden="true">#</a></h3><p>\u76EE\u5F55\u7ED3\u6784</p><div class="language-bash"><button class="copy"></button><span class="lang">bash</span><pre><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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">./App.vue</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">./store</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">#app</span><span style="color:#89DDFF;">&#39;</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:#A6ACCD;">h</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</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>
<span class="line"></span></code></pre></div><p>\u4F7F\u7528</p><div class="language-html"><button class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</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;">&#39;</span><span style="color:#C3E88D;">vuex</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">userName</span><span style="color:#89DDFF;">&#39;</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 style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">setUserName</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</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;">&#39;</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:#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;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div>`,7),e=[o];function t(c,r,D,F,y,A){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default};

1
assets/guide_vue2_vuex.md.69c74237.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-vuex-\u72B6\u6001\u7BA1\u7406"}],"relativePath":"guide/vue2/vuex.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/vuex.md"},o=p("",7),e=[o];function t(c,r,D,F,y,A){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default};

30
assets/guide_vue2_vw.md.18487172.js Normal file
View File

@ -0,0 +1,30 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const A=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-vm-\u9002\u914D\u65B9\u6848"}],"relativePath":"guide/vue2/vw.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/vw.md"},o=p(`<h3 id="\u2705-vm-\u9002\u914D\u65B9\u6848" tabindex="-1"><span id="vw">\u2705 vm \u9002\u914D\u65B9\u6848 </span> <a class="header-anchor" href="#\u2705-vm-\u9002\u914D\u65B9\u6848" aria-hidden="true">#</a></h3><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><h4 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></h4><div class="language-bash"><button class="copy"></button><span class="lang">bash</span><pre><code><span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">npm install postcss-px-to-viewport -D</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div><h4 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></h4><p>\u5C06\u6839\u76EE\u5F55\u4E0B .postcssrc.js \u6587\u4EF6\u4FEE\u6539\u5982\u4E0B</p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><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;">&quot;</span><span style="color:#C3E88D;">Android 4.1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">iOS 7.1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Chrome &gt; 31</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ff &gt; 31</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ie &gt;= 8</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#F07178;">postcss-px-to-viewport</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">vw</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">.ignore</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">.hairlines</span><span style="color:#89DDFF;">&quot;</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:#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><h4 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></h4><p>src/main.js \u5220\u9664\u5982\u4E0B\u4EE3\u7801</p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><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;">&quot;</span><span style="color:#C3E88D;">lib-flexible/flexible.js</span><span style="color:#89DDFF;">&quot;</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 class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">lib-flexible</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">^0.3.2</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">postcss-pxtorem</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">^5.1.1</span><span style="color:#89DDFF;">&quot;</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><p><a href="#top">\u25B2 \u56DE\u9876\u90E8</a></p>`,14),e=[o];function t(c,r,D,y,F,i){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{A as __pageData,d as default};

1
assets/guide_vue2_vw.md.18487172.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const A=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[{"level":3,"title":"","slug":"\u2705-vm-\u9002\u914D\u65B9\u6848"}],"relativePath":"guide/vue2/vw.md","lastUpdated":1660904971000}'),l={name:"guide/vue2/vw.md"},o=p("",14),e=[o];function t(c,r,D,y,F,i){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{A as __pageData,d as default};

18
assets/guide_vue3_alias.md.84c5b14c.js Normal file
View File

@ -0,0 +1,18 @@
import{_ as s,c as a,o as n,a as l}from"./app.0374baa8.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","lastUpdated":1660904971000}'),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 class="copy"></button><span class="lang">javascript</span><pre><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;">&#39;</span><span style="color:#C3E88D;">vue-i18n</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">vue-i18n/dist/vue-i18n.cjs.js</span><span style="color:#89DDFF;">&#39;</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 =&gt; 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;">&#39;</span><span style="color:#C3E88D;">src</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&#39;</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 =&gt; 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;">&#39;</span><span style="color:#C3E88D;">types</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">+</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&#39;</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 n(),a("div",null,e)}const C=s(p,[["render",c]]);export{_ as __pageData,C as default};

1
assets/guide_vue3_alias.md.84c5b14c.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as l}from"./app.0374baa8.js";const _=JSON.parse('{"title":"alias","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/alias.md","lastUpdated":1660904971000}'),p={name:"guide/vue3/alias.md"},o=l("",2),e=[o];function c(t,r,F,D,y,i){return n(),a("div",null,e)}const C=s(p,[["render",c]]);export{_ as __pageData,C as default};

58
assets/guide_vue3_axios.md.cdcdafd6.js Normal file
View File

@ -0,0 +1,58 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const i=JSON.parse('{"title":"axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","lastUpdated":1660904971000}'),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 class="copy"></button><span class="lang">javascript</span><pre><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;">&quot;</span><span style="color:#C3E88D;">axios</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">@/store</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">vant</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">@/config</span><span style="color:#89DDFF;">&quot;</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;">=&gt;</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;">&quot;</span><span style="color:#C3E88D;">X-Token</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">] </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;&quot;</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;">=&gt;</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;">=&gt;</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;">&amp;&amp;</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;">&quot;</span><span style="color:#C3E88D;">FedLogOut</span><span style="color:#89DDFF;">&quot;</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;">=&gt;</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;">&quot;</span><span style="color:#C3E88D;">error</span><span style="color:#89DDFF;">&quot;</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;">=&gt;</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;">&quot;</span><span style="color:#C3E88D;">err</span><span style="color:#89DDFF;">&quot;</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 r(t,c,F,D,y,A){return a(),n("div",null,e)}const u=s(p,[["render",r]]);export{i as __pageData,u as default};

1
assets/guide_vue3_axios.md.cdcdafd6.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as l}from"./app.0374baa8.js";const i=JSON.parse('{"title":"axios \u5C01\u88C5\u53CA\u63A5\u53E3\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/axios.md","lastUpdated":1660904971000}'),p={name:"guide/vue3/axios.md"},o=l("",4),e=[o];function r(t,c,F,D,y,A){return a(),n("div",null,e)}const u=s(p,[["render",r]]);export{i as __pageData,u as default};

32
assets/guide_vue3_base.md.c4d55231.js Normal file
View File

@ -0,0 +1,32 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const d=JSON.parse('{"title":"vite.config.ts \u57FA\u7840\u914D\u7F6E","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","lastUpdated":1660904971000}'),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 class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">./</span><span style="color:#89DDFF;">&#39;</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 class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#FFCB6B;">publicPath</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">/app/</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"></span></code></pre></div><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><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>
<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;">&quot;</span><span style="color:#C3E88D;">build</span><span style="color:#89DDFF;">&quot;</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;"> 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;">&quot;</span><span style="color:#C3E88D;">0.0.0.0</span><span style="color:#89DDFF;">&quot;</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;"> plugins</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">vue</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">vueJsx</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">createStyleImportPlugin</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> resolves</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> [</span><span style="color:#82AAFF;">NutuiResolve</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:#82AAFF;">eruda</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">viteMockServe</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> mockPath</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">./src/mock</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> localEnabled</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;">&quot;</span><span style="color:#C3E88D;">serve</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> logger</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;"> 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:#F07178;"> additionalData</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">\`</span><span style="color:#C3E88D;">@import &quot;@nutui/nutui/dist/styles/variables.scss&quot;;</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};

1
assets/guide_vue3_base.md.c4d55231.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const d=JSON.parse('{"title":"vite.config.ts \u57FA\u7840\u914D\u7F6E","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/base.md","lastUpdated":1660904971000}'),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};

6
assets/guide_vue3_env.md.899e3569.js Normal file
View File

@ -0,0 +1,6 @@
import{_ as s,c as o,o as e,a}from"./app.0374baa8.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/env.md","lastUpdated":1660904971000}'),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 class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">scripts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">dev</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vite</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">dev:test</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vite --mode test</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">dev:prod</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">vite --mode production</span><span style="color:#89DDFF;">&quot;</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 e(),o("div",null,l)}const _=s(n,[["render",t]]);export{u as __pageData,_ as default};

1
assets/guide_vue3_env.md.899e3569.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as o,o as e,a}from"./app.0374baa8.js";const u=JSON.parse('{"title":"","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/env.md","lastUpdated":1660904971000}'),n={name:"guide/vue3/env.md"},p=a("",3),l=[p];function t(c,r,d,D,F,y){return e(),o("div",null,l)}const _=s(n,[["render",t]]);export{u as __pageData,_ as default};

1
assets/guide_vue3_lint.md.a0caa8fb.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as s,o as i,b as t,d as n}from"./app.0374baa8.js";const g=JSON.parse('{"title":"Eslint+Pettier+stylelint \u7EDF\u4E00\u5F00\u53D1\u89C4\u8303","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/lint.md","lastUpdated":1660904971000}'),a={name:"guide/vue3/lint.md"},r=t("h1",{id:"eslint-pettier-stylelint-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303",tabindex:"-1"},[n("Eslint+Pettier+stylelint \u7EDF\u4E00\u5F00\u53D1\u89C4\u8303 "),t("a",{class:"header-anchor",href:"#eslint-pettier-stylelint-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303","aria-hidden":"true"},"#")],-1),l=t("p",null,"\u6839\u76EE\u5F55\u4E0B\u7684.eslintrc.js\u3001.stylelint.config.js\u3001.prettier.config.js \u5185\u7F6E\u4E86 lint \u89C4\u5219\uFF0C\u5E2E\u52A9\u4F60\u89C4\u8303\u5730\u5F00\u53D1\u4EE3\u7801\uFF0C\u6709\u52A9\u4E8E\u63D0\u9AD8\u56E2\u961F\u7684\u4EE3\u7801\u8D28\u91CF\u548C\u534F\u4F5C\u6027\uFF0C\u53EF\u4EE5\u6839\u636E\u56E2\u961F\u7684\u89C4\u5219\u8FDB\u884C\u4FEE\u6539",-1),o=[r,l];function c(d,_,p,h,u,f){return i(),s("div",null,o)}const x=e(a,[["render",c]]);export{g as __pageData,x as default};

1
assets/guide_vue3_lint.md.a0caa8fb.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as s,o as i,b as t,d as n}from"./app.0374baa8.js";const g=JSON.parse('{"title":"Eslint+Pettier+stylelint \u7EDF\u4E00\u5F00\u53D1\u89C4\u8303","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/lint.md","lastUpdated":1660904971000}'),a={name:"guide/vue3/lint.md"},r=t("h1",{id:"eslint-pettier-stylelint-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303",tabindex:"-1"},[n("Eslint+Pettier+stylelint \u7EDF\u4E00\u5F00\u53D1\u89C4\u8303 "),t("a",{class:"header-anchor",href:"#eslint-pettier-stylelint-\u7EDF\u4E00\u5F00\u53D1\u89C4\u8303","aria-hidden":"true"},"#")],-1),l=t("p",null,"\u6839\u76EE\u5F55\u4E0B\u7684.eslintrc.js\u3001.stylelint.config.js\u3001.prettier.config.js \u5185\u7F6E\u4E86 lint \u89C4\u5219\uFF0C\u5E2E\u52A9\u4F60\u89C4\u8303\u5730\u5F00\u53D1\u4EE3\u7801\uFF0C\u6709\u52A9\u4E8E\u63D0\u9AD8\u56E2\u961F\u7684\u4EE3\u7801\u8D28\u91CF\u548C\u534F\u4F5C\u6027\uFF0C\u53EF\u4EE5\u6839\u636E\u56E2\u961F\u7684\u89C4\u5219\u8FDB\u884C\u4FEE\u6539",-1),o=[r,l];function c(d,_,p,h,u,f){return i(),s("div",null,o)}const x=e(a,[["render",c]]);export{g as __pageData,x as default};

10
assets/guide_vue3_pinia.md.8d372f85.js Normal file
View File

@ -0,0 +1,10 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const C=JSON.parse('{"title":"Pinia \u72B6\u6001\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/pinia.md","lastUpdated":1660904971000}'),l={name:"guide/vue3/pinia.md"},o=p(`<h1 id="pinia-\u72B6\u6001\u7BA1\u7406" tabindex="-1">Pinia \u72B6\u6001\u7BA1\u7406 <a class="header-anchor" href="#pinia-\u72B6\u6001\u7BA1\u7406" aria-hidden="true">#</a></h1><p>\u4E0B\u4E00\u4EE3 vuex\uFF0C\u4F7F\u7528\u6781\u5176\u65B9\u4FBF\uFF0Cts \u517C\u5BB9\u597D</p><p>\u76EE\u5F55\u7ED3\u6784</p><div class="language-bash"><button class="copy"></button><span class="lang">bash</span><pre><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 user.js</span></span>
<span class="line"><span style="color:#A6ACCD;">\u2502 \u251C\u2500\u2500 index.js</span></span>
<span class="line"></span></code></pre></div><p>\u4F7F\u7528</p><div class="language-html"><button class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">lang</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ts</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">setup</span><span style="color:#89DDFF;">&gt;</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;">useUserStore</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;">&quot;</span><span style="color:#C3E88D;">@/store/modules/user</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> userStore </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">useUserStore</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> userStore</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">login</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div>`,6),e=[o];function t(c,r,D,i,y,F){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{C as __pageData,d as default};

1
assets/guide_vue3_pinia.md.8d372f85.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const C=JSON.parse('{"title":"Pinia \u72B6\u6001\u7BA1\u7406","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/pinia.md","lastUpdated":1660904971000}'),l={name:"guide/vue3/pinia.md"},o=p("",6),e=[o];function t(c,r,D,i,y,F){return n(),a("div",null,e)}const d=s(l,[["render",t]]);export{C as __pageData,d as default};

10
assets/guide_vue3_proxy.md.6da8800f.js Normal file
View File

@ -0,0 +1,10 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const d=JSON.parse('{"title":"proxy \u8DE8\u57DF","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/proxy.md","lastUpdated":1660904971000}'),o={name:"guide/vue3/proxy.md"},l=p(`<h1 id="proxy-\u8DE8\u57DF" tabindex="-1">proxy \u8DE8\u57DF <a class="header-anchor" href="#proxy-\u8DE8\u57DF" aria-hidden="true">#</a></h1><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#FFCB6B;">server</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;">proxy</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;">&#39;</span><span style="color:#C3E88D;">/api</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">: </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> target</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://baidu.com</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> changeOrigin</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:#82AAFF;">rewrite</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">path</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">path</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">replace</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">^</span><span style="color:#A6ACCD;">\\/</span><span style="color:#C3E88D;">api</span><span style="color:#89DDFF;">/</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&#39;&#39;</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;"> </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=[l];function t(r,c,F,y,D,i){return n(),a("div",null,e)}const C=s(o,[["render",t]]);export{d as __pageData,C as default};

1
assets/guide_vue3_proxy.md.6da8800f.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as p}from"./app.0374baa8.js";const d=JSON.parse('{"title":"proxy \u8DE8\u57DF","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/proxy.md","lastUpdated":1660904971000}'),o={name:"guide/vue3/proxy.md"},l=p("",2),e=[l];function t(r,c,F,y,D,i){return n(),a("div",null,e)}const C=s(o,[["render",t]]);export{d as __pageData,C as default};

20
assets/guide_vue3_router.md.400bfb7f.js Normal file
View File

@ -0,0 +1,20 @@
import{_ as s,c as a,o as n,a as o}from"./app.0374baa8.js";const u=JSON.parse('{"title":"vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/router.md","lastUpdated":1660904971000}'),p={name:"guide/vue3/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 class="copy"></button><span class="lang">javascript</span><pre><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;">&quot;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&quot;</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;">createRouter</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">createWebHistory</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">Router</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;">&quot;</span><span style="color:#C3E88D;">vue-router</span><span style="color:#89DDFF;">&quot;</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:#A6ACCD;"> </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;">&quot;</span><span style="color:#C3E88D;">root</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">/</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">redirect</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">/home</span><span style="color:#89DDFF;">&quot;</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;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">import</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@/layout/basic/index.vue</span><span style="color:#89DDFF;">&quot;</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>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> router</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Router</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">=</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 style="color:#A6ACCD;"> </span><span style="color:#F07178;">history</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">createWebHistory</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;"> routes</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>
<span class="line"><span style="color:#89DDFF;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">default</span><span style="color:#A6ACCD;"> router</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre></div>`,5),e=[l];function t(r,c,D,y,F,A){return n(),a("div",null,e)}const i=s(p,[["render",t]]);export{u as __pageData,i as default};

1
assets/guide_vue3_router.md.400bfb7f.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as o}from"./app.0374baa8.js";const u=JSON.parse('{"title":"vue-router","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/router.md","lastUpdated":1660904971000}'),p={name:"guide/vue3/router.md"},l=o("",5),e=[l];function t(r,c,D,y,F,A){return n(),a("div",null,e)}const i=s(p,[["render",t]]);export{u as __pageData,i as default};

11
assets/guide_vue3_start.md.6dadf190.js Normal file
View File

@ -0,0 +1,11 @@
import{_ as s,c as a,o as n,a as e}from"./app.0374baa8.js";const y=JSON.parse('{"title":"\u542F\u52A8\u9879\u76EE","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/start.md","lastUpdated":1660904971000}'),t={name:"guide/vue3/start.md"},l=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 class="copy"></button><span class="lang">js</span><pre><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;">// \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 dev</span></span>
<span class="line"></span>
<span class="line"></span></code></pre></div>`,2),p=[l];function c(o,r,i,_,d,u){return n(),a("div",null,p)}const m=s(t,[["render",c]]);export{y as __pageData,m as default};

1
assets/guide_vue3_start.md.6dadf190.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as a,o as n,a as e}from"./app.0374baa8.js";const y=JSON.parse('{"title":"\u542F\u52A8\u9879\u76EE","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/start.md","lastUpdated":1660904971000}'),t={name:"guide/vue3/start.md"},l=e("",2),p=[l];function c(o,r,i,_,d,u){return n(),a("div",null,p)}const m=s(t,[["render",c]]);export{y as __pageData,m as default};

22
assets/guide_vue3_ui.md.5d4bbfae.js Normal file
View File

@ -0,0 +1,22 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const C=JSON.parse('{"title":"\u591A UI \u7EC4\u4EF6\u5E93\u4F9B\u9009\u62E9","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5B89\u88C5\u63D2\u4EF6","slug":"\u5B89\u88C5\u63D2\u4EF6"},{"level":2,"title":"\u4F7F\u7528\u7EC4\u4EF6\u5E93","slug":"\u4F7F\u7528\u7EC4\u4EF6\u5E93"},{"level":2,"title":"\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93","slug":"\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93"}],"relativePath":"guide/vue3/ui.md","lastUpdated":1660904971000}'),l={name:"guide/vue3/ui.md"},o=p(`<h1 id="\u591A-ui-\u7EC4\u4EF6\u5E93\u4F9B\u9009\u62E9" tabindex="-1">\u591A UI \u7EC4\u4EF6\u5E93\u4F9B\u9009\u62E9 <a class="header-anchor" href="#\u591A-ui-\u7EC4\u4EF6\u5E93\u4F9B\u9009\u62E9" aria-hidden="true">#</a></h1><p>Vite \u6784\u5EFA\u5DE5\u5177\uFF0C\u4F7F\u7528 vite-plugin-style-import \u548C unplugin-vue-components/vite \u5B9E\u73B0\u6309\u9700\u5F15\u5165\u3002</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 class="copy"></button><span class="lang">bash</span><pre><code><span class="line"><span style="color:#A6ACCD;">yarn add vite-plugin-style-import -D</span></span>
<span class="line"><span style="color:#A6ACCD;">yarn add unplugin-vue-components/vite -D</span></span>
<span class="line"></span></code></pre></div><h2 id="\u4F7F\u7528\u7EC4\u4EF6\u5E93" tabindex="-1">\u4F7F\u7528\u7EC4\u4EF6\u5E93 <a class="header-anchor" href="#\u4F7F\u7528\u7EC4\u4EF6\u5E93" aria-hidden="true">#</a></h2><p>nutUI \u6CA1\u6709\u6309\u9700\u52A0\u8F7D\u7684 resolvers\uFF0Cstyle \u9700\u8981\u81EA\u5DF1\u914D\u7F6E\u6309\u9700\u52A0\u8F7D</p><p>\u5728 <code>config/vite/plugins/styleImport.ts</code> \u8BBE\u7F6E</p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// \u6309\u9700\u52A0\u8F7D\u6837\u5F0F\u6587\u4EF6</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:#82AAFF;">createStyleImportPlugin</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">resolves</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#82AAFF;">NutuiResolve</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;">)</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></code></pre></div><p>\u9879\u76EE\u5728 <code>src/plugins/nutUI.ts</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 class="copy"></button><span class="lang">javascript</span><pre><code><span class="line"><span style="color:#676E95;">// \u6309\u9700\u5168\u5C40\u5F15\u5165nutUI\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;">&quot;</span><span style="color:#C3E88D;">vue</span><span style="color:#89DDFF;">&quot;</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;">Cell</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">CellGroup</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;">&quot;</span><span style="color:#C3E88D;">@nutui/nutui</span><span style="color:#89DDFF;">&quot;</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;"> nutUiComponents </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> [Button</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> Cell</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> CellGroup]</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;">// \u5728main.ts\u6587\u4EF6\u4E2D\u5F15\u5165</span></span>
<span class="line"><span style="color:#A6ACCD;">nutUiComponents</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">forEach</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">use</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">item</span><span style="color:#F07178;">)</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>vant \u548C varlet \u53EF\u4EE5\u4F7F\u7528\u7EC4\u4EF6\u6309\u9700\u52A0\u8F7D</p><p>\u5728<code>config/vite/plugins/component.ts</code>\u4E0B</p><div class="language-javascript"><button class="copy"></button><span class="lang">javascript</span><pre><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;">VueUseComponentsResolver</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">VantResolver</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">VarletUIResolver</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;">&#39;</span><span style="color:#C3E88D;">unplugin-vue-components/resolvers</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">...</span></span>
<span class="line"><span style="color:#FFCB6B;">resolvers</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#82AAFF;">VantResolver</span><span style="color:#A6ACCD;">()</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">VarletUIResolver</span><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="\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93" tabindex="-1">\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93 <a class="header-anchor" href="#\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93" aria-hidden="true">#</a></h2><p>nutUI \u9700\u5220\u9664<code>src/plugins/nutUI.ts</code>\u548C<code>main.ts</code>\u6587\u4EF6\u4E0B\u7684\u5F15\u5165</p><p>vant \u548C varlet \u53EA\u9700\u5220\u9664\u5BF9\u5E94\u7684 resolvers \u5373\u53EF</p><p>\u5220\u9664\u540E\u9700\u5168\u5C40\u641C\u7D22\u5220\u9664\u4E0D\u9700\u8981\u7684\u7EC4\u4EF6\uFF0C\u907F\u514D\u62A5\u9519</p>`,17),e=[o];function t(c,r,D,y,F,i){return a(),n("div",null,e)}const u=s(l,[["render",t]]);export{C as __pageData,u as default};

1
assets/guide_vue3_ui.md.5d4bbfae.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const C=JSON.parse('{"title":"\u591A UI \u7EC4\u4EF6\u5E93\u4F9B\u9009\u62E9","description":"","frontmatter":{},"headers":[{"level":2,"title":"\u5B89\u88C5\u63D2\u4EF6","slug":"\u5B89\u88C5\u63D2\u4EF6"},{"level":2,"title":"\u4F7F\u7528\u7EC4\u4EF6\u5E93","slug":"\u4F7F\u7528\u7EC4\u4EF6\u5E93"},{"level":2,"title":"\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93","slug":"\u4E0D\u9700\u8981\u67D0\u4E2A\u7EC4\u4EF6\u5E93"}],"relativePath":"guide/vue3/ui.md","lastUpdated":1660904971000}'),l={name:"guide/vue3/ui.md"},o=p("",17),e=[o];function t(c,r,D,y,F,i){return a(),n("div",null,e)}const u=s(l,[["render",t]]);export{C as __pageData,u as default};

40
assets/guide_vue3_viewport.md.b94444c3.js Normal file
View File

@ -0,0 +1,40 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"viewport \u9002\u914D\u65B9\u6848","description":"","frontmatter":{},"headers":[{"level":2,"title":"PostCSS \u914D\u7F6E","slug":"postcss-\u914D\u7F6E"}],"relativePath":"guide/vue3/viewport.md","lastUpdated":1660904971000}'),l={name:"guide/vue3/viewport.md"},o=p(`<h1 id="viewport-\u9002\u914D\u65B9\u6848" tabindex="-1">viewport \u9002\u914D\u65B9\u6848 <a class="header-anchor" href="#viewport-\u9002\u914D\u65B9\u6848" aria-hidden="true">#</a></h1><p>\u4E0D\u7528\u62C5\u5FC3\uFF0C\u9879\u76EE\u5DF2\u7ECF\u914D\u7F6E\u597D\u4E86 <code>viewport</code> \u9002\u914D\uFF0C\u4E0B\u9762\u4EC5\u505A\u4ECB\u7ECD\uFF1A</p><ul><li><a href="https://github.com/cnjm/postcss-px-to-viewport" target="_blank" rel="noreferrer">cnjm-postcss-px-to-viewport</a> \u662F\u4E00\u6B3E <code>postcss</code> \u63D2\u4EF6\uFF0C\u7528\u4E8E\u5C06\u5355\u4F4D\u8F6C\u5316\u4E3A <code>vw</code>\uFF0C \u73B0\u5728\u5F88\u591A\u6D4F\u89C8\u5668\u5BF9<code>vw</code>\u7684\u652F\u6301\u90FD\u5F88\u597D\uFF0C\u9002\u914D\u9996\u9009\u65B9\u6848\u3002</li></ul><h2 id="postcss-\u914D\u7F6E" tabindex="-1">PostCSS \u914D\u7F6E <a class="header-anchor" href="#postcss-\u914D\u7F6E" aria-hidden="true">#</a></h2><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 class="copy"></button><span class="lang">javascript</span><pre><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 style="color:#A6ACCD;"> </span><span style="color:#F07178;">overrideBrowserslist</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> [</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Android 4.1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">iOS 7.1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">Chrome &gt; 31</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ff &gt; 31</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ie &gt;= 8</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">] </span><span style="color:#89DDFF;">},</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">cnjm-postcss-px-to-viewport</span><span style="color:#89DDFF;">&#39;</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;">unitToConvert</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u8981\u8F6C\u5316\u7684\u5355\u4F4D</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;">750</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// UI\u8BBE\u8BA1\u7A3F\u7684\u5BBD\u5EA6</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;">6</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u8F6C\u6362\u540E\u7684\u7CBE\u5EA6\uFF0C\u5373\u5C0F\u6570\u70B9\u4F4D\u6570</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;">&#39;</span><span style="color:#C3E88D;">*</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">]</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u6307\u5B9A\u8F6C\u6362\u7684css\u5C5E\u6027\u7684\u5355\u4F4D\uFF0C*\u4EE3\u8868\u5168\u90E8css\u5C5E\u6027\u7684\u5355\u4F4D\u90FD\u8FDB\u884C\u8F6C\u6362</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;">&#39;</span><span style="color:#C3E88D;">vw</span><span style="color:#89DDFF;">&#39;</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\u9ED8\u8BA4vw</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">fontViewportUnit</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">vw</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u6307\u5B9A\u5B57\u4F53\u9700\u8981\u8F6C\u6362\u6210\u7684\u89C6\u7A97\u5355\u4F4D\uFF0C\u9ED8\u8BA4vw</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;">// \u9ED8\u8BA4\u503C1\uFF0C\u5C0F\u4E8E\u6216\u7B49\u4E8E1px\u5219\u4E0D\u8FDB\u884C\u8F6C\u6362</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;">true</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;">// \u662F\u5426\u5728\u5A92\u4F53\u67E5\u8BE2\u7684css\u4EE3\u7801\u4E2D\u4E5F\u8FDB\u884C\u8F6C\u6362\uFF0C\u9ED8\u8BA4false</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">replace</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;">// \u662F\u5426\u8F6C\u6362\u540E\u76F4\u63A5\u66F4\u6362\u5C5E\u6027\u503C</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">include</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;">exclude</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;">// \u8BBE\u7F6E\u5FFD\u7565\u6587\u4EF6\uFF0C\u7528\u6B63\u5219\u505A\u76EE\u5F55\u540D\u5339\u914D</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">customFun</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">({</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;">file</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">})</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;">// \u8FD9\u4E2A\u81EA\u5B9A\u4E49\u7684\u65B9\u6CD5\u662F\u9488\u5BF9\u5904\u7406vant\u7EC4\u4EF6\u4E0B\u7684\u8BBE\u8BA1\u7A3F\u4E3A375\u95EE\u9898</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;">designWidth</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">judgeComponent</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">file</span><span style="color:#F07178;">) </span><span style="color:#89DDFF;">?</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">375</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">750</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;">designWidth</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;">}</span><span style="color:#A6ACCD;">;</span></span>
<span class="line"></span></code></pre></div><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\u641E\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 class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">font-size: 37.5px;</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">html</span><span style="color:#89DDFF;">&gt;</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: 75</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 class="copy"></button><span class="lang">html</span><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">image</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">https://www.sunniejs.cn/static/weapp/logo.png</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</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>
<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;">&lt;/</span><span style="color:#F07178;">style</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre></div>`,17),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default};

1
assets/guide_vue3_viewport.md.b94444c3.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as s,c as n,o as a,a as p}from"./app.0374baa8.js";const i=JSON.parse('{"title":"viewport \u9002\u914D\u65B9\u6848","description":"","frontmatter":{},"headers":[{"level":2,"title":"PostCSS \u914D\u7F6E","slug":"postcss-\u914D\u7F6E"}],"relativePath":"guide/vue3/viewport.md","lastUpdated":1660904971000}'),l={name:"guide/vue3/viewport.md"},o=p("",17),e=[o];function t(c,r,D,y,F,C){return a(),n("div",null,e)}const d=s(l,[["render",t]]);export{i as __pageData,d as default};

1
assets/guide_vue3_vite.md.4c4d9960.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as i,o as t,a as l}from"./app.0374baa8.js";const g=JSON.parse('{"title":"vite","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/vite.md","lastUpdated":1660904971000}'),a={name:"guide/vue3/vite.md"},n=l('<h1 id="vite" tabindex="-1">vite <a class="header-anchor" href="#vite" aria-hidden="true">#</a></h1><p>\u57FA\u4E8E\u539F\u751F ES \u6A21\u5757\u63D0\u4F9B\u4E86\u4E30\u5BCC\u7684\u5185\u5EFA\u529F\u80FD\uFF0C\u5982\u901F\u5EA6\u5FEB\u5230\u60CA\u4EBA\u7684\u6A21\u5757\u70ED\u66F4\u65B0\uFF08HMR\uFF09\uFF0C\u4F7F\u7528 Rollup \u6253\u5305\u4F60\u7684\u4EE3\u7801\uFF0C\u5E76\u4E14\u5B83\u662F\u9884\u914D\u7F6E\u7684\uFF0C\u53EF\u8F93\u51FA\u7528\u4E8E\u751F\u4EA7\u73AF\u5883\u7684\u9AD8\u5EA6\u4F18\u5316\u8FC7\u7684\u9759\u6001\u8D44\u6E90\u3002\u66F4\u591A\u5173\u4E8E<a href="https://cn.vitejs.dev/guide/" target="_blank" rel="noreferrer">vite</a></p><p>\u6A21\u7248\u96C6\u6210\u4E86\u5982\u4E0B\u7684 vite \u63D2\u4EF6</p><ul><li>unplugin-auto-import\uFF08\u6309\u9700\u52A0\u8F7D\uFF0C\u81EA\u52A8\u5F15\u5165\uFF09</li><li>unplugin-vue-components\uFF08\u6309\u9700\u52A0\u8F7D\uFF0C\u81EA\u52A8\u5F15\u5165\u7EC4\u4EF6\uFF09</li><li>vite-plugin-compression\uFF08\u5F00\u542F.gz \u538B\u7F29\uFF09</li><li>vite-plugin-eruda\uFF08\u63A7\u5236\u53F0\uFF0C\u65B9\u4FBF\u79FB\u52A8\u7AEF\u8C03\u8BD5\uFF09</li><li>vite-plugin-imagemin\uFF08\u56FE\u7247\u538B\u7F29\uFF09</li><li>vite-plugin-mock\uFF08\u5F15\u5165 mockjs\uFF0C\u672C\u5730\u6A21\u62DF\u63A5\u53E3\uFF09</li><li>vite-plugin-pages\uFF08\u52A8\u6001\u751F\u6210\u8DEF\u7531\uFF09</li><li>vite-plugin-progress\uFF08\u6784\u5EFA\u663E\u793A\u8FDB\u5EA6\u6761\uFF09</li><li>vite-plugin-restart\uFF08\u76D1\u542C\u914D\u7F6E\u6587\u4EF6\u4FEE\u6539\u81EA\u52A8\u91CD\u542F Vite\uFF09</li><li>vite-plugin-style-import\uFF08\u6309\u9700\u5F15\u5165\u6837\u5F0F\u6587\u4EF6\uFF09</li><li>vite-plugin-svg-icons\uFF08\u52A0\u8F7D SVG \u6587\u4EF6\uFF0C\u81EA\u52A8\u5F15\u5165\uFF09</li></ul>',4),r=[n];function s(o,p,u,_,c,v){return t(),i("div",null,r)}const m=e(a,[["render",s]]);export{g as __pageData,m as default};

1
assets/guide_vue3_vite.md.4c4d9960.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as i,o as t,a as l}from"./app.0374baa8.js";const g=JSON.parse('{"title":"vite","description":"","frontmatter":{},"headers":[],"relativePath":"guide/vue3/vite.md","lastUpdated":1660904971000}'),a={name:"guide/vue3/vite.md"},n=l("",4),r=[n];function s(o,p,u,_,c,v){return t(),i("div",null,r)}const m=e(a,[["render",s]]);export{g as __pageData,m as default};

1
assets/index.md.91e0a38d.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as t,o as a}from"./app.0374baa8.js";const d=JSON.parse('{"title":"Vue-H5-Template","titleTemplate":"\u4E00\u4E2A\u5FEB\u901F\u5F00\u53D1\u7684vue h5\u79FB\u52A8\u7AEF\u811A\u624B\u67B6","description":"","frontmatter":{"layout":"home","title":"Vue-H5-Template","titleTemplate":"\u4E00\u4E2A\u5FEB\u901F\u5F00\u53D1\u7684vue h5\u79FB\u52A8\u7AEF\u811A\u624B\u67B6","hero":{"name":"Vue-H5-Template","text":"\u4E00\u4E2A\u5FEB\u901F\u5F00\u53D1\u7684Vue H5\u79FB\u52A8\u7AEF\u811A\u624B\u67B6","image":{"src":"http://www.sunniejs.cn/static/weapp/logo.png","alt":"sunnie"},"actions":[{"theme":"brand","text":"\u5F00\u59CB","link":"/guide/"},{"theme":"alt","text":"Github\u4ED3\u5E93","link":"https://github.com/sunniejs/vue-h5-template"}]},"features":[{"icon":"\u{1F4A1}","title":"\u5F00\u7BB1\u5373\u7528","details":"\u96C6\u6210vue2\u3001vue3\u7684\u79FB\u52A8\u7AEF\u5FEB\u901F\u5F00\u53D1\u6A21\u7248\uFF0C\u5B66\u4E60\u6210\u672C\u4F4E\uFF0C\u6613\u4E0A\u624B"},{"icon":"\u{1F4E6}","title":"\u4EE3\u7801\u89C4\u8303","details":"\u5B8C\u6574\u7684eslint\u3001prettier\u3001stylelint\u89C4\u8303\uFF0C\u52A0\u4E0Ahusky\uFF0C\u5E2E\u52A9\u4F60\u66F4\u597D\u7684\u7BA1\u7406\u4EE3\u7801"},{"icon":"\u{1F6E0}\uFE0F","title":"\u914D\u7F6E\u4F18\u5316","details":"\u5B8C\u6574\u914D\u7F6E\u7684vue\u811A\u624B\u67B6\u63D2\u4EF6\u548C\u4F18\u5316\uFF0C\u8BA9\u4F60\u4E13\u6CE8\u4E8E\u4E1A\u52A1\u5F00\u53D1\uFF0C\u66F4\u9AD8\u6548"},{"icon":"\u2699\uFE0F","title":"More","details":"\u52A0\u5165\u6211\u4EEC\uFF0C\u66F4\u591A\u80FD\u529B\u7B49\u4F60\u6316\u6398...."}]},"headers":[],"relativePath":"index.md","lastUpdated":1660904971000}'),i={name:"index.md"};function n(s,l,o,r,c,p){return a(),t("div")}const m=e(i,[["render",n]]);export{d as __pageData,m as default};

1
assets/index.md.91e0a38d.lean.js Normal file
View File

@ -0,0 +1 @@
import{_ as e,c as t,o as a}from"./app.0374baa8.js";const d=JSON.parse('{"title":"Vue-H5-Template","titleTemplate":"\u4E00\u4E2A\u5FEB\u901F\u5F00\u53D1\u7684vue h5\u79FB\u52A8\u7AEF\u811A\u624B\u67B6","description":"","frontmatter":{"layout":"home","title":"Vue-H5-Template","titleTemplate":"\u4E00\u4E2A\u5FEB\u901F\u5F00\u53D1\u7684vue h5\u79FB\u52A8\u7AEF\u811A\u624B\u67B6","hero":{"name":"Vue-H5-Template","text":"\u4E00\u4E2A\u5FEB\u901F\u5F00\u53D1\u7684Vue H5\u79FB\u52A8\u7AEF\u811A\u624B\u67B6","image":{"src":"http://www.sunniejs.cn/static/weapp/logo.png","alt":"sunnie"},"actions":[{"theme":"brand","text":"\u5F00\u59CB","link":"/guide/"},{"theme":"alt","text":"Github\u4ED3\u5E93","link":"https://github.com/sunniejs/vue-h5-template"}]},"features":[{"icon":"\u{1F4A1}","title":"\u5F00\u7BB1\u5373\u7528","details":"\u96C6\u6210vue2\u3001vue3\u7684\u79FB\u52A8\u7AEF\u5FEB\u901F\u5F00\u53D1\u6A21\u7248\uFF0C\u5B66\u4E60\u6210\u672C\u4F4E\uFF0C\u6613\u4E0A\u624B"},{"icon":"\u{1F4E6}","title":"\u4EE3\u7801\u89C4\u8303","details":"\u5B8C\u6574\u7684eslint\u3001prettier\u3001stylelint\u89C4\u8303\uFF0C\u52A0\u4E0Ahusky\uFF0C\u5E2E\u52A9\u4F60\u66F4\u597D\u7684\u7BA1\u7406\u4EE3\u7801"},{"icon":"\u{1F6E0}\uFE0F","title":"\u914D\u7F6E\u4F18\u5316","details":"\u5B8C\u6574\u914D\u7F6E\u7684vue\u811A\u624B\u67B6\u63D2\u4EF6\u548C\u4F18\u5316\uFF0C\u8BA9\u4F60\u4E13\u6CE8\u4E8E\u4E1A\u52A1\u5F00\u53D1\uFF0C\u66F4\u9AD8\u6548"},{"icon":"\u2699\uFE0F","title":"More","details":"\u52A0\u5165\u6211\u4EEC\uFF0C\u66F4\u591A\u80FD\u529B\u7B49\u4F60\u6316\u6398...."}]},"headers":[],"relativePath":"index.md","lastUpdated":1660904971000}'),i={name:"index.md"};function n(s,l,o,r,c,p){return a(),t("div")}const m=e(i,[["render",n]]);export{d as __pageData,m as default};

BIN
assets/inter-cyrillic-ext.0877b0d9.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-cyrillic.f8750142.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-greek-ext.3e6f6728.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-greek.117e1956.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-cyrillic-ext.33bd5a8e.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-cyrillic.ea42a392.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-greek-ext.4fbe9427.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-greek.8f4463c4.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-latin-ext.bd8920cc.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-latin.bd3b6f56.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-italic-vietnamese.6ce511fb.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-latin-ext.7cc429bc.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-latin.4fe6132f.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-cyrillic-ext.e75737ce.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-cyrillic.5f2c6c8c.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-greek-ext.ab0619bc.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-greek.d5a6d92a.woff2 Normal file
View File

Binary file not shown.

BIN
assets/inter-roman-latin-ext.0030eebd.woff2 Normal file
View File

Binary file not shown.

Some files were not shown because too many files have changed in this diff Show More