PageSourceSearch

https://fan-lv.github.io/

html fan-lv.github.io collected 2026-10-03 09:10:56 UTC 37,206 bytes, 3 lines download raw bytes

1<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="description" content="心之所向 素履以往 生如逆旅 一苇以航"><meta name="keywords"><meta name="author" content="吕钒,[email protected]"><meta name="copyright" content="lvfan"><title>【吕钒的后花园】</title><link rel="stylesheet" href="/css/fan.css"><link rel="stylesheet" href="/css/thirdparty/jquery.mCustomScrollbar.min.css"><link rel="stylesheet" href="https://imsun.github.io/gitment/style/default.css"><link rel="icon" href="/favicon.ico"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch.min.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/instantsearch-theme-algolia.min.css">
1<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
1<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.9/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
1<script type="text/x-mathjax-config">MathJax.Hub.Config({
2    tex2jax: {inlineMath: [['$', '$'], ['\\(', '\\)']]}
3});</script>
3<script>var isPassword=!1;isPassword&&""!==prompt("请输入文章密码")&&(alert("密码错误!"),history.back())</script>
3<script>window.GLOBAL_CONFIG={root:"/",algolia:{appId:"DDS7QLTFBR",apiKey:"4e05b9f66dc7fb2160aef36bd87ecc5a",indexName:"lvfan",hits:{per_page:10},languages:{input_placeholder:"搜索文章",hits_empty:"找不到您查询的内容:${query}",hits_stats:"找到 ${hits} 条结果,用时 ${time} 毫秒"}},localSearch:void 0,copy:{success:"复制成功",error:"复制错误",noSupport:"浏览器不支持"},gitment:{owner:"fan-lv",repo:"fan-lv.github.io",client_id:"09328cbecf9126bb0b49",client_secret:"ea229bdebbb9208f368808dc14e93dc38cc3276a"},valine:{},twikoo:{}}</script>
3<meta name="generator" content="Hexo 6.0.0"></head><body><canvas id="universe"></canvas><div id="sidebar"><div class="author-info"><div class="author-info-avatar"><img class="author-info-avatar-img" src="/avatar.png"></div><div class="author-info-name">吕钒</div><div class="author-info-description">心之所向 素履以往 生如逆旅 一苇以航</div><div class="links-buttons"><a class="links-button button-hover" href="https://github.com/fan-lv" target="_blank">GitHub<i class="icon-dot bg-color0"></i></a><a class="links-button button-hover" href="mailto:[email protected]" target="_blank">E-Mail<i class="icon-dot bg-color4"></i></a><a class="links-button button-hover" href="tencent://message/?uin=1019593584&amp;Site=&amp;Menu=yes" target="_blank">QQ<i class="icon-dot bg-color0"></i></a></div><div class="author-info-articles"><a class="author-info-articles-archives article-meta" href="/archives"><span class="pull-top">日志</span><span class="pull-bottom">56</span></a><a class="author-info-articles-tags article-meta" href="/tags"><span class="pull-top">标签</span><span class="pull-bottom">31</span></a><a class="author-info-articles-categories article-meta" href="/categories"><span class="pull-top">分类</span><span class="pull-bottom">19</span></a></div></div></div><div id="main-container"><header><div id="menu-outer"><i class="menu-list-icon fas fa-bars"></i><nav id="menu-inner"><a class="menu-item" href="/">首页</a><a class="menu-item" href="/tags">标签</a><a class="menu-item" href="/categories">分类</a><a class="menu-item" href="/archives">归档</a><a class="menu-item" href="/about">关于</a></nav><div class="right-info"><a class="search social-icon"><i class="fas fa-search"></i> <span>搜索</span></a><a class="title-name" href="/">吕钒的后花园</a><span id="now-time"></span></div></div></header><div id="content-outer"><div id="content-inner"><div id="recent-posts"><div class="recent-post-item"><i class="article-top"></i><a class="post-title" href="/2019/06/10/%E7%94%9F%E6%B4%BB%E8%AE%B0%E5%BD%95-%E6%91%98%E5%BD%95/">摘录</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2020-07-16</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E7%94%9F%E6%B4%BB%E8%AE%B0%E5%BD%95/">生活记录</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/%E7%94%9F%E6%B4%BB%E8%AE%B0%E5%BD%95/">生活记录</a></div></div><div class="post-content"><div class="main-content content"><p>我见过春日夏风,秋月冬雪,也曾踏遍南水北山,东麓西岭,可这四季春秋,苍山央水,都不及你瞅我展眉一笑</p></div></div><a class="button-hover more" href="/2019/06/10/%E7%94%9F%E6%B4%BB%E8%AE%B0%E5%BD%95-%E6%91%98%E5%BD%95/#more">阅读全文</a></div><div class="recent-post-item"><a class="post-title" href="/2023/11/21/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-%E6%8F%92%E4%BB%B6-%E5%9B%BE%E7%89%87%E8%A3%81%E5%89%AA/">图片裁剪</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2023-12-12</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/">前端资料</a><i class="fa fa-angle-right" style="margin:0 8px"></i><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E6%8F%92%E4%BB%B6/">插件</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/JavaScript/">JavaScript</a></div></div><div class="post-content"><div class="main-content content"><h2 id="使用方法"><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">
3import</span> imageClip <span class="keyword">from</span> <span class="string">&#x27;./imageClip.js&#x27;</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="title function_">imageClip</span>(&#123;</span><br><span class="line">    <span class="attr">src</span>: <span class="string">&#x27;data:image/png;base64,&#x27;</span>,</span><br><span class="line">    <span class="attr">autoCut</span>: <span class="literal">true</span>,</span><br><span class="line">    <span class="attr">ok</span>: <span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(data);</span><br><span class="line">    &#125;,</span><br><span class="line">    <span class="attr">complete</span>: <span class="function">() =&gt;</span> &#123;</span><br><span class="line">        <span class="comment">// 取消或确认操作回调</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure></div></div><a class="button-hover more" href="/2023/11/21/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-%E6%8F%92%E4%BB%B6-%E5%9B%BE%E7%89%87%E8%A3%81%E5%89%AA/#more">阅读全文</a></div><div class="recent-post-item"><a class="post-title" href="/2019/06/11/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Git-Git/">Git</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2023-11-21</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/">前端资料</a><i class="fa fa-angle-right" style="margin:0 8px"></i><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/Git/">Git</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/Git/">Git</a></div></div><div class="post-content"><div class="main-content content"><h2 id="概述"><a href="#概述" class="headerlink" title="概述"></a>概述</h2><p>我们可以把 Git 分成两个部分,一个是远程仓库 Remote Repository,还有一个是本地环境 Development Environment</p><img src="/2019/06/11/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Git-Git/git1.png" title="git1"><h2 id="命令"><a href="#命令" class="headerlink" title="命令"></a>命令</h2><h3 id="git-clone"><a href="#git-clone" class="headerlink" title="git clone "></a>git clone<url></url></h3><img src="/2019/06/11/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Git-Git/git2.png" title="git2"></div></div><a class="button-hover more" href="/2019/06/11/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Git-Git/#more">阅读全文</a></div><div class="recent-post-item"><a class="post-title" href="/2019/06/13/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-%E6%8F%92%E4%BB%B6-%E6%95%B0%E5%AD%97%E6%BB%9A%E5%8A%A8%E7%89%B9%E6%95%88/">数字滚动特效</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2023-11-21</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/">前端资料</a><i class="fa fa-angle-right" style="margin:0 8px"></i><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E6%8F%92%E4%BB%B6/">插件</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/JavaScript/">JavaScript</a></div></div><div class="post-content"><div class="main-content content"><h2 id="使用方法"><a href="#使用方法" class="headerlink" title="使用方法"></a>使用方法</h2><figure class="highlight elixir"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;numberRoll <span class="symbol">:number=<span class="string">&quot;9866.66&quot;</span>&gt;&lt;/numberRoll&gt;</span></span><br></pre></td></tr></table></figure></div></div><a class="button-hover more" href="/2019/06/13/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-%E6%8F%92%E4%BB%B6-%E6%95%B0%E5%AD%97%E6%BB%9A%E5%8A%A8%E7%89%B9%E6%95%88/#more">阅读全文</a></div><div class="recent-post-item"><a class="post-title" href="/2023/11/21/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E7%A7%BB%E5%8A%A8%E7%AB%AF-px-%E9%80%82%E9%85%8D/">移动端 px 适配</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2023-11-21</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/">前端资料</a><i class="fa fa-angle-right" style="margin:0 8px"></i><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/%E7%A7%BB%E5%8A%A8%E7%AB%AF/">移动端</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/JavaScript/">JavaScript</a><span>&nbsp;|&nbsp;</span><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/CSS/">CSS</a></div></div><div class="post-content"><div class="main-content content"><h2 id="px-单位转-rem(移动端适配)"><a href="#px-单位转-rem(移动端适配)" class="headerlink" title="px 单位转 rem(移动端适配)"></a>px 单位转 rem(移动端适配)</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 按照宽度1920或高度1040去换算(1px===1rem)</span></span><br><span class="line"><span class="keyword">function</span> <span class="title function_">setSize</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="keyword">let</span> screenWidth = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientWidth</span></span><br><span class="line">    <span class="keyword">let</span> screenHeight = <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">clientHeight</span></span><br><span class="line">    <span class="keyword">let</span> scaled = <span class="number">1920</span> / <span class="number">1040</span></span><br><span class="line">    <span class="keyword">let</span> currentFontSize = <span class="number">12</span></span><br><span class="line">    <span class="keyword">if</span> (scaled &gt; screenWidth / screenHeight) &#123;</span><br><span class="line">        currentFontSize = screenWidth / <span class="number">1920</span></span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        currentFontSize = screenHeight / <span class="number">1040</span></span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="variable language_">document</span>.<span class="property">documentElement</span>.<span class="property">style</span>.<span class="property">fontSize</span> = currentFontSize + <span class="string">&#x27;px&#x27;</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">(<span class="keyword">function</span> (<span class="params">w</span>) &#123;</span><br><span class="line">    w.<span class="title function_">addEventListener</span>(<span class="string">&#x27;resize&#x27;</span>, setSize)</span><br><span class="line">    w.<span class="title function_">addEventListener</span>(<span class="string">&#x27;pageShow&#x27;</span>, setSize)</span><br><span class="line">    w.<span class="title function_">addEventListener</span>(<span class="string">&#x27;DOMContentLoaded&#x27;</span>, setSize)</span><br><span class="line">&#125;)(<span class="variable language_">window</span>)</span><br><span class="line"><span class="title function_">setSize</span>()</span><br></pre></td></tr></table></figure></div></div><a class="button-hover more" href="/2023/11/21/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-%E7%A7%BB%E5%8A%A8%E7%AB%AF-%E7%A7%BB%E5%8A%A8%E7%AB%AF-px-%E9%80%82%E9%85%8D/#more">阅读全文</a></div><div class="recent-post-item">
3<a class="post-title" href="/2021/07/06/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Node-electron%E6%89%93%E5%8C%85%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8/">electron打包桌面应用</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2021-07-06</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/">前端资料</a><i class="fa fa-angle-right" style="margin:0 8px"></i><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/Node/">Node</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/Node-js/">Node.js</a><span>&nbsp;|&nbsp;</span><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/electron%E6%89%93%E5%8C%85%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8/">electron打包桌面应用</a></div></div><div class="post-content"><div class="main-content content"><h1 id="官方文档"><a href="#官方文档" class="headerlink" title="官方文档"></a><a target="_blank" rel="noopener" href="http://www.electronjs.org/docs/tutorial/quick-start#package-and-distribute-the-application">官方文档</a></h1><h3 id="结构"><a href="#结构" class="headerlink" title="结构"></a>结构</h3><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">my-electron-app/</span><br><span class="line">├── package<span class="selector-class">.json</span></span><br><span class="line">├── <span class="selector-tag">main</span><span class="selector-class">.js</span></span><br><span class="line">├── preload<span class="selector-class">.js</span></span><br><span class="line">└── index.html</span><br></pre></td></tr></table></figure></div></div><a class="button-hover more" href="/2021/07/06/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Node-electron%E6%89%93%E5%8C%85%E6%A1%8C%E9%9D%A2%E5%BA%94%E7%94%A8/#more">阅读全文</a></div><div class="recent-post-item"><a class="post-title" href="/2021/07/06/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Vue-uni-app/">uni-app</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2021-07-06</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/">前端资料</a><i class="fa fa-angle-right" style="margin:0 8px"></i><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/Vue/">Vue</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/uni-app/">uni-app</a></div></div><div class="post-content"><div class="main-content content"><h2 id="接口请求发生错误,可能原因"><a href="#接口请求发生错误,可能原因" class="headerlink" title="接口请求发生错误,可能原因"></a>接口请求发生错误,可能原因</h2><p>安卓系统请求头部不会自动带上<code>Content-Type</code>,后台代码有校验</p><h2 id="安卓系统6-0以上会提示需要获取手机权限,不允许授权时候应用会闪退问题解决方案:"><a href="#安卓系统6-0以上会提示需要获取手机权限,不允许授权时候应用会闪退问题解决方案:" class="headerlink" title="安卓系统6.0以上会提示需要获取手机权限,不允许授权时候应用会闪退问题解决方案:"></a>安卓系统6.0以上会提示需要获取手机权限,不允许授权时候应用会闪退问题解决方案:</h2><p>在 <code>manifest.json</code> 文件中,<code>app-plus.distribute.android</code> 增加以下代码</p><figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;permissionExternalStorage&quot;</span> <span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;request&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;none&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;prompt&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;应用保存运行状态等信息,需要获取读写手机存储(系统提示为访问设备上的照片、媒体内容和文件)权限,请允许。&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;permissionPhoneState&quot;</span> <span class="punctuation">:</span> <span class="punctuation">&#123;</span></span><br><span class="line">    <span class="attr">&quot;request&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;none&quot;</span><span class="punctuation">,</span></span><br><span class="line">    <span class="attr">&quot;prompt&quot;</span> <span class="punctuation">:</span> <span class="string">&quot;为保证您正常、安全地使用,需要获取设备识别码(部分手机提示为获取手机号码)使用权限,请允许。&quot;</span></span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure></div></div>
3<a class="button-hover more" href="/2021/07/06/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Vue-uni-app/#more">阅读全文</a></div><div class="recent-post-item"><a class="post-title" href="/2019/05/05/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Vue-%E6%9B%B4%E6%8D%A2%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2/">更换主题颜色</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2021-07-06</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/">前端资料</a><i class="fa fa-angle-right" style="margin:0 8px"></i><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/Vue/">Vue</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/Vue/">Vue</a></div></div><div class="post-content"><div class="main-content content"><ol><li>把 css 文件放到服务器上,通过 XMLHttpRequest 请求文件,获取到文件内容之后替换颜色。<figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="title function_">getFile</span>(<span class="params">url: <span class="built_in">string</span></span>) &#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="title class_">Promise</span>(<span class="function">(<span class="params">resolve, reject</span>) =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">const</span> client = <span class="keyword">new</span> <span class="title class_">XMLHttpRequest</span>();</span><br><span class="line">        client.<span class="title function_">open</span>(<span class="string">&quot;GET&quot;</span>, url);</span><br><span class="line">        client.<span class="property">responseType</span> = <span class="string">&quot;text&quot;</span>;</span><br><span class="line">        client.<span class="property">onreadystatechange</span> = <span class="function">() =&gt;</span> &#123;</span><br><span class="line">            <span class="keyword">if</span> (client.<span class="property">readyState</span> !== <span class="number">4</span>) &#123;</span><br><span class="line">                <span class="keyword">return</span>;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="keyword">if</span> (client.<span class="property">status</span> === <span class="number">200</span>) &#123;</span><br><span class="line">                <span class="keyword">const</span> urlArr = client.<span class="property">responseURL</span>.<span class="title function_">split</span>(<span class="string">&quot;/&quot;</span>);</span><br><span class="line">                <span class="title function_">resolve</span>(&#123;</span><br><span class="line">                    <span class="attr">data</span>: client.<span class="property">response</span>,</span><br><span class="line">
3                    <span class="attr">url</span>: urlArr[urlArr.<span class="property">length</span> - <span class="number">1</span>],</span><br><span class="line">                &#125;);</span><br><span class="line">            &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">                <span class="title function_">reject</span>(<span class="keyword">new</span> <span class="title class_">Error</span>(client.<span class="property">statusText</span>));</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;;</span><br><span class="line">        client.<span class="title function_">send</span>();</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title function_">getIndexStyle</span>(<span class="params"></span>) &#123;</span><br><span class="line">    <span class="variable language_">this</span>.<span class="title function_">getFile</span>(<span class="string">&quot;//doc.mamaezhan.com/web/my_theme.css&quot;</span>)</span><br><span class="line">        .<span class="title function_">then</span>(<span class="function">(<span class="params">&#123;data&#125;: <span class="built_in">any</span></span>) =&gt;</span> &#123;</span><br><span class="line">            <span class="variable language_">this</span>.<span class="property">originalStyle</span> = <span class="variable language_">this</span>.<span class="title function_">getStyleTemplate</span>(data);</span><br><span class="line">            <span class="variable language_">this</span>.<span class="title function_">writeNewStyle</span>();</span><br><span class="line">        &#125;);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></li></ol></div></div>
3<a class="button-hover more" href="/2019/05/05/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Vue-%E6%9B%B4%E6%8D%A2%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2/#more">阅读全文</a></div><div class="recent-post-item"><a class="post-title" href="/2019/05/05/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Vue-Vue-TypeScript/">Vue + TypeScript</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2021-07-06</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/">前端资料</a><i class="fa fa-angle-right" style="margin:0 8px"></i><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/Vue/">Vue</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/Vue/">Vue</a><span>&nbsp;|&nbsp;</span><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/TypeScript/">TypeScript</a></div></div><div class="post-content"><div class="main-content content"><h2 id="项目相关配置在哪里写"><a href="#项目相关配置在哪里写" class="headerlink" title="项目相关配置在哪里写?"></a>项目相关配置在哪里写?</h2><p>由于采用<a href="mailto:[email protected]">[email protected]</a>版本来初始化工程,所以没有了2.x版本对外暴露的webpack配置文件,所以如果相对项目进行一些配置,需要在项目根目录下新建vue.config.js.<br>比如需要修改项目启动的端口号,去掉打包后文件名的哈希值,如下:</p><figure class="highlight dts"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">module.<span class="attr">exports</span> <span class="operator">=</span> <span class="punctuation">&#123;</span></span><br><span class="line"><span class="symbol">    baseUrl:</span> <span class="string">&#x27;/&#x27;</span>, <span class="comment">// 默认为根目录下 &#x27;/&#x27;</span></span><br><span class="line"><span class="symbol">    devServer:</span> <span class="punctuation">&#123;</span></span><br><span class="line"><span class="symbol">        port:</span> <span class="number">8989</span></span><br><span class="line">    <span class="punctuation">&#125;</span>,</span><br><span class="line"><span class="symbol">    filenameHashing:</span> false</span><br><span class="line"><span class="punctuation">&#125;</span></span><br></pre></td></tr></table></figure><h2 id="Vue-prototype-定义的全局变量无法使用"><a href="#Vue-prototype-定义的全局变量无法使用" class="headerlink" title="Vue.prototype 定义的全局变量无法使用"></a>Vue.prototype 定义的全局变量无法使用</h2><p>如果在main中定义了一个全局变量</p><figure class="highlight abnf"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">import apiConfig from <span class="string">&quot;@/apiConfig&quot;</span><span class="comment">;</span></span><br><span class="line">Vue.prototype.apiConfig <span class="operator">=</span> apiConfig<span class="comment">;</span></span><br></pre></td></tr></table></figure><p>但是在组件中无法使用该变量,需要在 .d.ts 文件中加入如下代码:</p><figure class="highlight typescript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> <span class="title class_">Vue</span> <span class="keyword">from</span> <span class="string">&quot;vue&quot;</span>;</span><br><span class="line"><span class="keyword">declare</span> <span class="variable language_">module</span> <span class="string">&quot;vue/types/vue&quot;</span> &#123;</span><br><span class="line">    <span class="keyword">interface</span> <span class="title class_">Vue</span> &#123;</span><br><span class="line">
3        <span class="attr">apiConfig</span>: <span class="built_in">any</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><p>以上代码可在<a target="_blank" rel="noopener" href="https://cn.vuejs.org/v2/guide/typescript.html#%E5%A2%9E%E5%BC%BA%E7%B1%BB%E5%9E%8B%E4%BB%A5%E9%85%8D%E5%90%88%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8">官方文档</a>找到</p></div></div><a class="button-hover more" href="/2019/05/05/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Vue-Vue-TypeScript/#more">阅读全文</a></div><div class="recent-post-item"><a class="post-title" href="/2020/03/13/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Hexo-%E5%8D%9A%E5%AE%A2-Gitment%E8%AF%84%E8%AE%BA/">Gitment评论</a><div class="container"><time class="button-hover post-date"><i class="fas fa-calendar-alt article-icon" aria-hidden="true"></i> 更新于 2021-07-06</time><div class="button-hover categories"><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/">前端资料</a><i class="fa fa-angle-right" style="margin:0 8px"></i><i class="fa fa-inbox article-icon" aria-hidden="true"></i><a class="link-a" href="/categories/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99/Hexo-%E5%8D%9A%E5%AE%A2/">Hexo 博客</a></div><div class="button-hover tags"><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/Hexo/">Hexo</a><span>&nbsp;|&nbsp;</span><i class="fa fa-tag article-icon" aria-hidden="true"></i><a class="link-a" href="/tags/Gitment/">Gitment</a></div></div><div class="post-content"><div class="main-content content"><p>在根目录的 _config.yml 中添加下面代码</p><figure class="highlight awk"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 评论</span></span><br><span class="line">comments:</span><br><span class="line">  gitment:</span><br><span class="line">    enable: true</span><br><span class="line">    owner: <span class="string">&#x27;&#x27;</span> <span class="regexp">//</span> github 的 ID 或用户名</span><br><span class="line">    repo: <span class="string">&#x27;&#x27;</span> <span class="regexp">//</span> 用于存储评论的 GitHub 仓库名称</span><br><span class="line">    client_id: <span class="string">&#x27;&#x27;</span> <span class="regexp">//</span> 注册 gitment 获得的 client_id</span><br><span class="line">    client_secret: <span class="string">&#x27;&#x27;</span> <span class="regexp">//</span> 注册 gitment 获得的 client_secret</span><br></pre></td></tr></table></figure></div></div><a class="button-hover more" href="/2020/03/13/%E5%89%8D%E7%AB%AF%E8%B5%84%E6%96%99-Hexo-%E5%8D%9A%E5%AE%A2-Gitment%E8%AF%84%E8%AE%BA/#more">阅读全文</a></div></div><div id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/">2</a><span class="space">&hellip;</span><a class="page-number" href="/page/6/">6</a><a class="extend next" rel="next" href="/page/2/"><i class="fas fa-angle-right"></i></a></div></div></div></div><div class="button-hover" id="return-top"><i class="fas fa-arrow-up" aria-hidden="true"></i></div><footer><div id="footer"><div class="button-hover" id="side-button"><i class="fas fa-arrow-right"></i></div><div class="right-content"><div class="busuanzi">
3<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
3<span id="busuanzi_container_site_uv"><i class="fas fa-user"></i></span><span id="busuanzi_value_site_uv"></span><span></span><span class="footer-separator">|</span><span id="busuanzi_container_site_pv"><i class="fas fa-eye"></i></span><span id="busuanzi_value_site_pv"></span><span></span></div><div class="copyright">&copy;2017 ~ 2024 By 吕钒</div></div></div></footer></div>
3<script src="/js/thirdparty/jquery-3.3.1.min.js"></script>
3<script src="/js/thirdparty/velocity.min.js"></script>
3<script src="/js/thirdparty/jquery.mCustomScrollbar.concat.min.js"></script>
3<script src="/js/fan.js"></script>
3<script src="/js/canvas_bg.js"></script>
3<script src="/js/utils.js"></script>
3<script src="/js/scroll.js"></script>
3<script src="/js/sidebar.js"></script>
3<script src="/js/copy.js"></script>
3<div class="search-dialog"><div id="algolia-search-title">Algolia</div><div class="search-close-button"><i class="fa fa-times"></i></div><div id="search-box"></div><hr><div id="hits"></div><div id="algolia-pagination"></div></div><div class="search-mask"></div>
3<script src="/js/search/algolia.js"></script>
3</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.