-
Notifications
You must be signed in to change notification settings - Fork 0
/
local-search.xml
122 lines (57 loc) · 164 KB
/
local-search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title>Elementui折叠动画出现卡顿</title>
<link href="/2024/01/25/Elementui%E6%8A%98%E5%8F%A0%E5%8A%A8%E7%94%BB%E5%87%BA%E7%8E%B0%E5%8D%A1%E9%A1%BF/"/>
<url>/2024/01/25/Elementui%E6%8A%98%E5%8F%A0%E5%8A%A8%E7%94%BB%E5%87%BA%E7%8E%B0%E5%8D%A1%E9%A1%BF/</url>
<content type="html"><![CDATA[<p>Element UI的 el-menu 组件在进行折叠动画时，可能会在某些情况下出现卡顿的问题，这通常与浏览器的渲染性能有关，特别是在涉及大量DOM操作或复杂动画的情况下。</p><h1 id="css-elementui-折叠动画出现卡顿"><a href="#css-elementui-折叠动画出现卡顿" class="headerlink" title="css(elementui)折叠动画出现卡顿"></a>css(elementui)折叠动画出现卡顿</h1><h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><figure class="highlight html"><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><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">el-menu</span> <span class="hljs-attr">ref</span>=<span class="hljs-string">"menu"</span> <span class="hljs-attr">background-color</span>=<span class="hljs-string">"#030000"</span> <span class="hljs-attr">text-color</span>=<span class="hljs-string">"#a9abaf"</span> <span class="hljs-attr">active-text-color</span>=<span class="hljs-string">"#F57D2D"</span></span><br><span class="hljs-tag"> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-menu-vertical-demo"</span> <span class="hljs-attr">:unique-opened</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">:default-active</span>=<span class="hljs-string">"defaultActive"</span></span><br><span class="hljs-tag"> <span class="hljs-attr">:default-openeds</span>=<span class="hljs-string">"defaultOpeneds"</span> <span class="hljs-attr">:router</span>=<span class="hljs-string">"true"</span> @<span class="hljs-attr">open</span>=<span class="hljs-string">"handleOpen"</span> @<span class="hljs-attr">close</span>=<span class="hljs-string">"handleClose"</span></span><br><span class="hljs-tag"> <span class="hljs-attr">:collapse</span>=<span class="hljs-string">"isCollapse"</span> <span class="hljs-attr">:collapse-transition</span>=<span class="hljs-string">"true"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"main-title"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>看护人员管理系统<span class="hljs-tag"></<span class="hljs-name">h4</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">div</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/home"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-icon-s-home"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span>></span>首页<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/importData"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-icon-download"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span>></span>数据导入<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-submenu</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"3"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-icon-menu"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>看护管理<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">template</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/intoNurse"</span>></span>待转入看护<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/intoNurseManage"</span>></span>转入看护管理<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/assignNurse"</span>></span>外派看护<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/nurserRecord"</span>></span>看护记录<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">el-submenu</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-submenu</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"4"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-icon-s-custom"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>人员信息<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">template</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/personAll"</span>></span>全部<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/onJobPerson"</span>></span>在岗人员<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/caregivers"</span>></span>看护人员<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/employee"</span>></span>离职人员<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">el-submenu</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/locale"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-icon-location-information"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>地区设置<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-submenu</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"5"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">template</span> <span class="hljs-attr">slot</span>=<span class="hljs-string">"title"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"el-icon-s-operation"</span>></span><span class="hljs-tag"></<span class="hljs-name">i</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">span</span>></span>系统设置<span class="hljs-tag"></<span class="hljs-name">span</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">template</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"/userManage"</span>></span>用户管理<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"5-2"</span> <span class="hljs-attr">disabled</span>></span>修改密码<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">el-menu-item</span> <span class="hljs-attr">index</span>=<span class="hljs-string">"5-3"</span> <span class="hljs-attr">disabled</span>></span>数据备份<span class="hljs-tag"></<span class="hljs-name">el-menu-item</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">el-submenu</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">el-menu</span>></span><br></code></pre></td></tr></table></figure><p>由于使用了element的折叠菜单，<code>:collapse="isCollapse" :collapse-transition="true"</code>使用了这两个属性实现折叠与折叠动画，出现了明显卡顿。</p><h2 id="卡顿原因"><a href="#卡顿原因" class="headerlink" title="卡顿原因"></a>卡顿原因</h2><blockquote><p>Element UI的 el-menu 组件在进行折叠动画时，可能会在某些情况下出现卡顿的问题，这通常与浏览器的渲染性能有关，特别是在涉及大量DOM操作或复杂动画的情况下。</p></blockquote><h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2><figure class="highlight css"><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></pre></td><td class="code"><pre><code class="hljs css"><span class="hljs-selector-class">.el-menu-vertical-demo</span><span class="hljs-selector-pseudo">:not</span>(<span class="hljs-selector-class">.el-menu--collapse</span>) {<br> <span class="hljs-attribute">width</span>: <span class="hljs-number">200px</span>;<br> <span class="hljs-attribute">height</span>: <span class="hljs-number">100%</span>;<br>}<br></code></pre></td></tr></table></figure><h2 id="解决原因"><a href="#解决原因" class="headerlink" title="解决原因"></a>解决原因</h2><p>加上 .el-menu-vertical-demo:not(.el-menu–collapse) 这段 CSS 代码之后不再卡顿的原因是:</p><p>:not(.el-menu–collapse) 选择器排除了折叠状态的菜单<br>为展开状态的菜单设置了固定的宽高:width: 200px; height: 100%<br><strong><font color="skyBlue">在菜单展开/折叠时,不再触发宽高的改变,避免了折叠时频繁的 DOM 重排<br> 移除了宽高改变时的复杂计算和渲染,所以动画更流畅</font></strong></p><p>具体分析:</p><p>ElementUI 的 el-menu 在默认状态下,宽度由菜单内容决定,会随着展开/折叠而改变<br>动画过程中,菜单宽度的改变会触发复杂的 DOM 重排、图层合成等操作<br>而 Transition 动画本身就需要大量的 GPU 资源,如果再配合 DOM 操作,就会出现卡顿<br>所以通过 CSS 固定宽高,避免了动画过程中的 DOM 改变,减轻了 GPU 负载,动画更流畅<br>:not() 选择器可以精确定位到展开状态的菜单,对折叠状态不生效,避免样式冲突<br>所以这实际上是一种优化动画性能的常见手段,通过减少 DOM 操作次数,达到优化动画流畅度的效果。</p><p>这可以解决卡顿的问题，因为在非折叠状态下，菜单的宽度被固定，不会随着折叠状态的改变而变化，这样可以减少浏览器的重排（reflow）和重绘（repaint）操作，从而提高性能。</p><h2 id="总结"><a href="#总结" class="headerlink" title="总结"></a>总结</h2><blockquote><p>在elementui中出现太多菜单的时候使用折叠动画会触发浏览器的重排或重载dom。由于动画需要改变宽和高，所以可以给菜单设置固定的宽和高从而避免动画修改宽高而触发重排出现性能卡顿。</p></blockquote><h3 id="重排（Reflow）："><a href="#重排（Reflow）：" class="headerlink" title="重排（Reflow）："></a>重排（Reflow）：</h3><p>重排是指浏览器重新计算并更新元素的几何属性和布局信息的过程。这通常发生在以下情况下：</p><p>添加、删除或修改DOM元素。<br>改变元素的样式，如修改宽度、高度、边距、定位等。<br>改变窗口大小。<br>重排会触发整个渲染流程的重新计算，因此是一项开销昂贵的操作，特别是在复杂的页面上。频繁的重排会导致页面卡顿和性能下降。</p><h3 id="重绘（Repaint）："><a href="#重绘（Repaint）：" class="headerlink" title="重绘（Repaint）："></a>重绘（Repaint）：</h3><p>重绘是指浏览器根据元素的样式更改重新绘制元素的过程，但不会影响元素的布局。这通常发生在以下情况下：</p><p>修改元素的颜色、背景色、文本内容等与几何布局无关的属性。<br>滚动页面。<br>重绘比重排成本低，但仍然会影响性能，尤其是在大规模重绘的情况下。</p>]]></content>
<tags>
<tag>Elementui</tag>
</tags>
</entry>
<entry>
<title>Js正则多次调用test()返回结果不同问题</title>
<link href="/2023/10/10/Js%E6%AD%A3%E5%88%99%E5%A4%9A%E6%AC%A1%E8%B0%83%E7%94%A8test-%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E4%B8%8D%E5%90%8C%E9%97%AE%E9%A2%98/"/>
<url>/2023/10/10/Js%E6%AD%A3%E5%88%99%E5%A4%9A%E6%AC%A1%E8%B0%83%E7%94%A8test-%E8%BF%94%E5%9B%9E%E7%BB%93%E6%9E%9C%E4%B8%8D%E5%90%8C%E9%97%AE%E9%A2%98/</url>
<content type="html"><![CDATA[<p>正则表达式的标志(global全局匹配)<code>/g</code>导致的，<code>RegExp</code>有一个<code>lastIndex</code>属性，而全局标识会影响<code>lastIndex</code>属性，导致每次匹配都从上次匹配的位置开始，这就可能导致不符合预期的行为了。</p><h2 id="问题出现"><a href="#问题出现" class="headerlink" title="问题出现"></a>问题出现</h2><p>看代码</p><figure class="highlight arcade"><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><code class="hljs arcade">let pattern = <span class="hljs-regexp">/^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d!@#$%^&*()_+]$/g</span><br>let value = <span class="hljs-string">"abc123"</span><br><br><span class="hljs-comment">/* 可恶啊。。。这里执行一遍之后居然会改变后面的状态 */</span><br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">"1:"</span>, pattern.test(value));<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">"2:"</span>, pattern.test(value));<br><br></code></pre></td></tr></table></figure><p>控制台输出</p><figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-string">/*</span> <span class="hljs-string">返回</span> <span class="hljs-string">*/</span><br><span class="hljs-attr">1:</span> <span class="hljs-literal">true</span><br><span class="hljs-attr">2:</span> <span class="hljs-literal">false</span><br></code></pre></td></tr></table></figure><p>这里可以看到我们第一次<code>console</code>的时候返回的的是<code>true</code>是正确的，那么第二次<code>console</code>的是时候却变成了false，之后不管<code>console</code>多少次都是false，所以如果我们多次利用<code>pattern.test()</code>的话是会出现判断</p><h2 id="问题原因"><a href="#问题原因" class="headerlink" title="问题原因"></a>问题原因</h2><p>这是因为正则表达式的标志(global全局匹配)<code>/g</code>导致的，<code>RegExp</code>有一个<code>lastIndex</code>属性，而全局标识会影响<code>lastIndex</code>属性，导致每次匹配都从上次匹配的位置开始，这就可能导致不符合预期的行为了。</p><h2 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h2><ul><li>去除全局标准<code>/g</code>：最简单的方法就是不使用全局标志<code>/g</code></li><li>重置<code>lastIndex</code>属性：每次调用完<code>test()</code>的时候将<code>lastIndex</code>重置为零，确保下次匹配都从字符串的开头开始。 <figure class="highlight arcade"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs arcade"><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">"1:"</span>, pattern.test(value));<br>pattern.lastIndex = <span class="hljs-number">0</span>;<br><span class="hljs-built_in">console</span>.<span class="hljs-built_in">log</span>(<span class="hljs-string">"2:"</span>, pattern.test(value));<br></code></pre></td></tr></table></figure> 输出结果： <figure class="highlight yaml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs yaml"><span class="hljs-string">/*</span> <span class="hljs-string">返回</span> <span class="hljs-string">*/</span><br><span class="hljs-attr">1:</span> <span class="hljs-literal">true</span><br><span class="hljs-attr">2:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure></li></ul>]]></content>
</entry>
<entry>
<title>Ajax的几种请求方式</title>
<link href="/2023/04/22/Ajax%E7%9A%84%E5%87%A0%E7%A7%8D%E5%8F%91%E9%80%81%E6%96%B9%E5%BC%8F/"/>
<url>/2023/04/22/Ajax%E7%9A%84%E5%87%A0%E7%A7%8D%E5%8F%91%E9%80%81%E6%96%B9%E5%BC%8F/</url>
<content type="html"><![CDATA[<h2 id="原生AJAX"><a href="#原生AJAX" class="headerlink" title="原生AJAX"></a>原生AJAX</h2><p>AJAX 代表异步的 JavaScript 和 XML（Asynchronous JavaScript And XML）<br>你可以使用 AJAX 最主要的两个特性做下列事：</p><pre><code class="hljs">在不重新加载页面的情况下发送请求给服务器。接收并使用从服务器发来的数据。</code></pre><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><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><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//原生Ajax请求</span><br><span class="hljs-keyword">var</span> xmlHttp;<br><span class="hljs-comment">//创建XMLHttpRequest实例</span><br><span class="hljs-keyword">if</span> (<span class="hljs-variable language_">window</span>.<span class="hljs-property">XMLHttpRequest</span>) {<br>xmlHttp = <span class="hljs-keyword">new</span> <span class="hljs-title class_">XMLHttpRequest</span>();<br>} <span class="hljs-keyword">else</span> {<br>xmlHttp = <span class="hljs-title class_">ActiveXObject</span>(<span class="hljs-string">"Microsoft.xmlHttp"</span>)<br>}<br><br><span class="hljs-keyword">if</span> (!xmlHttp) {<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"创建XMlHttpRequest未成功！"</span>)<br><span class="hljs-keyword">return</span> <span class="hljs-literal">false</span>;<br>}<br><br>xmlHttp.<span class="hljs-property">onreadystatechange</span> = <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {<br><span class="hljs-keyword">try</span> {<br><span class="hljs-keyword">if</span> (xmlHttp.<span class="hljs-property">readyState</span> === <span class="hljs-title class_">XMLHttpRequest</span>.<span class="hljs-property">DONE</span> || xmlHttp.<span class="hljs-property">readyState</span> === <span class="hljs-number">4</span>) {<br><span class="hljs-comment">//很好，服务器以及接收到了响应</span><br><span class="hljs-keyword">if</span> (xmlHttp.<span class="hljs-property">status</span> === <span class="hljs-number">200</span>) {<br><span class="hljs-comment">//响应码为200成功！</span><br><span class="hljs-comment">//解析返回的json数据</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"收到服务器数据："</span>, <span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">parse</span>(xmlHttp.<span class="hljs-property">responseText</span>).<span class="hljs-property">data</span>);<br>} <span class="hljs-keyword">else</span> {<br><span class="hljs-comment">//请求有问题</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"请求有问题！"</span>)<br>}<br>} <span class="hljs-keyword">else</span> {<br><span class="hljs-comment">// 还没准备好。</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"目前的请求状态："</span>, xmlHttp.<span class="hljs-property">readyState</span>);<br>}<br>} <span class="hljs-keyword">catch</span> (e) {<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"遇到了问题："</span>, e.<span class="hljs-property">description</span>)<br>}<br>}<br><br><span class="hljs-comment">//发送get请求（请求方式，请求地址，是否异步）</span><br><span class="hljs-comment">// xmlHttp.open("get", "http://127.0.0.1:5000?name=vghunter&age=12", true)</span><br><span class="hljs-comment">// //发送的数据</span><br><span class="hljs-comment">// xmlHttp.send("原生ajax发送的请求数据");</span><br><br><span class="hljs-comment">//post请求</span><br>xmlHttp.<span class="hljs-title function_">open</span>(<span class="hljs-string">"POST"</span>, <span class="hljs-string">"http://127.0.0.1:5000"</span>, <span class="hljs-literal">true</span>)<br><span class="hljs-comment">//向服务器发送请求头指定内容数据类型使用MIME</span><br>xmlHttp.<span class="hljs-title function_">setRequestHeader</span>(<span class="hljs-string">"Content-type"</span>, <span class="hljs-string">"application/json"</span>);<br>xmlHttp.<span class="hljs-title function_">send</span>(<span class="hljs-title class_">JSON</span>.<span class="hljs-title function_">stringify</span>({ <span class="hljs-attr">name</span>: <span class="hljs-string">"vght"</span> }));<br>}<br><br><br></code></pre></td></tr></table></figure><ul><li>我们首先创建一个<code>XMLhttpRequest</code>实例赋值给<code>xmlHttp</code></li><li>使用<code>xmlHttp.open()</code>来打开一个请求，其中第一个参数是<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Methods">HTTP的请求方法</a>如GET、POST等。第二个参数是请求地址（URL）,可以使用<code>query</code>方式向服务端传输数据。第三个参数是可选择的，用于设置是否进行异步请求。如果为true则为异步请求，true为默认值。</li><li>使用<code>xmlHttp.send()</code>来设置需要给服务端发送的数据，只支持字符串，可以利用<code>JSON</code>来进行编译。</li><li>使用<code>xmlHttp.setRequestHeader</code>来设置请求头部，比如在使用<code>POST</code>请求的时候你必须告诉服务器你发送的数据类型是什么，如果为表单数据需要设置请求头<code>Context-type</code>为<code>application/x-www-form-urlencoded</code>，属性值使用<code>MIME</code>类型。如果发送的数据类型为<code>json</code>则设置<code>Content-type</code>为<code>application/json</code>。</li><li>使用<code>xmlHttp.onreadystatechange</code>来处理服务端响应的数据，一般将其赋值为一个函数。在函数体内我们需要验证请求是否被服务端接收并相应了，使用<code>xmlHttp.readyState</code>获取状态值，其中在<a href="https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState">XMLHTTPRequest.readyState</a>有记载，如下所示：<ul><li>0（未初始化）或（请求还未初始化）</li><li>1（正在加载）或（已建立服务器链接）</li><li>2（已加载）或（请求已接收）</li><li>3（交互）或（正在处理请求）</li><li>4（完成）或（请求已完成并且响应已准备好）</li></ul></li></ul><p>在通信错误的事件中（例如服务器宕机），在访问响应状态 onreadystatechange 方法中会抛出一个 exception。为了缓和这种情况，可以使用 try…catch 把 if…else 语句包裹起来。</p><h2 id="jquery的Ajax"><a href="#jquery的Ajax" class="headerlink" title="jquery的Ajax"></a>jquery的Ajax</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></pre></td><td class="code"><pre><code class="hljs javascript">$.<span class="hljs-title function_">ajax</span>({<br><span class="hljs-attr">type</span>: <span class="hljs-string">"post"</span>,<span class="hljs-comment">//get</span><br><span class="hljs-attr">url</span>: <span class="hljs-string">"http://127.0.0.1:5000"</span>,<br><span class="hljs-attr">data</span>: {<br><span class="hljs-attr">name</span>: <span class="hljs-string">"vghunter"</span>,<br><span class="hljs-attr">age</span>: <span class="hljs-number">20</span><br>},<br><span class="hljs-attr">xhrFields</span>: {<br><span class="hljs-attr">withCredentials</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">//是否携带身份凭证（cookie)</span><br>},<br><span class="hljs-attr">dataType</span>: <span class="hljs-literal">null</span>,<br><span class="hljs-attr">success</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">response, status</span>) {<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"收到后端返回数据："</span>, response)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"状态码："</span>, status)<br>},<br><span class="hljs-attr">error</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) {<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"错误："</span>, error)<br>}<br>});<br><br></code></pre></td></tr></table></figure><h2 id="axios基础请求"><a href="#axios基础请求" class="headerlink" title="axios基础请求"></a>axios基础请求</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><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//axios使用get请求</span><br>axios.<span class="hljs-title function_">get</span>(<span class="hljs-string">"http://127.0.0.1:5000"</span>, { <span class="hljs-attr">params</span>: { <span class="hljs-attr">name</span>: <span class="hljs-string">"vghunter"</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">15</span> } })<br>.<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) {<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response.<span class="hljs-property">data</span>)<br>})<br>.<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">error</span>) {<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error)<br>})<br>.<span class="hljs-title function_">finally</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {<br><span class="hljs-comment">// 总是会执行</span><br>});<br><br><span class="hljs-comment">//axios使用post请求</span><br>axios.<span class="hljs-title function_">post</span>(<span class="hljs-string">"http://127.0.0.1:5000"</span>, { <span class="hljs-attr">name</span>: <span class="hljs-string">"vghunter"</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">16</span> })<br>.<span class="hljs-title function_">then</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">response</span>) {<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(response)<br>})<br>.<span class="hljs-title function_">catch</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(error)<br>})<br>.<span class="hljs-title function_">finally</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {<br><span class="hljs-comment">//总是会执行</span><br>})<br><br></code></pre></td></tr></table></figure><h2 id="nodejs接收前端ajax数据"><a href="#nodejs接收前端ajax数据" class="headerlink" title="nodejs接收前端ajax数据"></a>nodejs接收前端ajax数据</h2><blockquote><p>nodejs中使用express创建一个简单的服务器，用于实现接收前端ajax请求</p></blockquote><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><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><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">"express"</span>)<br><span class="hljs-comment">//bodyParser中间件</span><br><span class="hljs-keyword">const</span> bodyParser = <span class="hljs-built_in">require</span>(<span class="hljs-string">'body-parser'</span>); <br><br><span class="hljs-comment">//解决跨域问题</span><br><span class="hljs-keyword">var</span> cors = <span class="hljs-built_in">require</span>(<span class="hljs-string">'cors'</span>)<br><span class="hljs-keyword">var</span> app = <span class="hljs-title function_">express</span>();<br><br>app.<span class="hljs-title function_">use</span>(<span class="hljs-title function_">cors</span>());<br>app.<span class="hljs-title function_">use</span>(bodyParser.<span class="hljs-title function_">urlencoded</span>({ <span class="hljs-attr">extended</span>: <span class="hljs-literal">true</span> }));<br>app.<span class="hljs-title function_">use</span>(bodyParser.<span class="hljs-title function_">json</span>());<br><br><br>app.<span class="hljs-title function_">use</span>(<span class="hljs-function">(<span class="hljs-params">req,res,next</span>)=></span>{<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"请求的资源是："</span>,req.<span class="hljs-property">path</span>) <br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"请求的地址是："</span>,req.<span class="hljs-title function_">get</span>(<span class="hljs-string">"host"</span>))<br><span class="hljs-title function_">next</span>();<br>})<br><br><span class="hljs-comment">//处理get请求</span><br>app.<span class="hljs-title function_">get</span>(<span class="hljs-string">'/'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>){<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"有人使用get请求server"</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(req.<span class="hljs-property">query</span>)<br>res.<span class="hljs-title function_">send</span>({<span class="hljs-attr">name</span>:<span class="hljs-string">"user"</span>,<span class="hljs-attr">age</span>:<span class="hljs-number">18</span>});<br>})<br><br><span class="hljs-comment">//处理post请求</span><br>app.<span class="hljs-title function_">post</span>(<span class="hljs-string">'/'</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>){<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"有人使用post请求server"</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"req.query:"</span>,req.<span class="hljs-property">query</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"req.body:"</span>,req.<span class="hljs-property">body</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(req.<span class="hljs-property">headers</span>[<span class="hljs-string">"content-type"</span>])<br><span class="hljs-comment">// res.send("你的post请求成功~")</span><br>res.<span class="hljs-title function_">setHeader</span>(<span class="hljs-string">"Context-type"</span>,<span class="hljs-string">"application/json"</span>)<br>res.<span class="hljs-title function_">send</span>({<span class="hljs-attr">status</span>:<span class="hljs-number">200</span>,<span class="hljs-attr">data</span>:<span class="hljs-string">"post返回的数据"</span>})<br>})<br><br><br><span class="hljs-comment">//创建home路由</span><br>app.<span class="hljs-title function_">get</span>(<span class="hljs-string">'/home'</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params">req,res</span>){<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'有人请求了home路由'</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(req.<span class="hljs-property">query</span>)<br>res.<span class="hljs-title function_">send</span>(<span class="hljs-string">"你请求home路由成功"</span>)<br>})<br><br><span class="hljs-comment">//监听端口为5000</span><br>app.<span class="hljs-title function_">listen</span>(<span class="hljs-number">5000</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"应用实例，访问地址为 http://127.0.0.1:5000"</span>)<br>})<br><br></code></pre></td></tr></table></figure><h3 id="body-parser中间件"><a href="#body-parser中间件" class="headerlink" title="body-parser中间件"></a>body-parser中间件</h3><p><code>body-parser</code>是nodejs的一个中间件，用于处理HTTP请求中的数据。当客户端向服务器发送 POST、PUT、DELETE 等请求时，通常会将数据放在请求体中，而 body-parser 可以将请求体中的数据解析出来，供后续的路由处理函数使用。<br><code>body-parser</code>可以解析的请求类型如下：</p><ul><li>JSON 格式</li><li>Raw 格式</li><li>文本格式</li><li>URL-encoded 格式<blockquote><p>在 Express 框架中，我们通常需要使用 body-parser 中间件来解析请求体中的数据。在 Express 4.16.0 之后的版本中，body-parser 已经成为了 Express 的一部分，可以直接通过 express.json() 和 express.urlencoded() 方法来解析请求体中的 JSON 和 URL-encoded 格式数据。</p></blockquote><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></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> express = <span class="hljs-built_in">require</span>(<span class="hljs-string">'express'</span>);<br><br><span class="hljs-keyword">const</span> app = <span class="hljs-title function_">express</span>();<br><br><span class="hljs-comment">// 解析 URL-encoded 格式请求体</span><br>app.<span class="hljs-title function_">use</span>(express.<span class="hljs-title function_">urlencoded</span>({ <span class="hljs-attr">extended</span>: <span class="hljs-literal">false</span> }));<br><span class="hljs-comment">// 解析 JSON 格式请求体</span><br>app.<span class="hljs-title function_">use</span>(express.<span class="hljs-title function_">json</span>());<br></code></pre></td></tr></table></figure><h2 id="http工作原理原理"><a href="#http工作原理原理" class="headerlink" title="http工作原理原理"></a>http工作原理原理</h2></li></ul><h3 id="http基本介绍"><a href="#http基本介绍" class="headerlink" title="http基本介绍"></a>http基本介绍</h3><blockquote><p>HTTP（HyperText Transfer Protocol）是一种用于传输Web数据的协议。它是建立在TCP/IP协议之上的，用于在Web浏览器和Web服务器之间传输数据。</p></blockquote><p>HTTP通信遵循请求/响应模型，客户端发起请求，服务器端响应请求。具体地说，HTTP的工作原理如下：</p><pre><code class="hljs">1. 客户端发起请求：客户端（如Web浏览器）向服务器发起HTTP请求，请求中包含请求方法（GET、POST等）、请求资源的URL、HTTP版本、请求头等信息。2. 服务器响应请求：服务器接收到客户端的请求后，进行处理，并向客户端返回HTTP响应，响应中包含状态码、响应头、响应体等信息。3. 关闭连接：HTTP是一种无状态协议，每次请求和响应完成后都会关闭连接，从而保持了连接的短暂性和低廉性。</code></pre><h3 id="http连接过程"><a href="#http连接过程" class="headerlink" title="http连接过程"></a>http连接过程</h3><blockquote><p>HTTP 的链接是基于 TCP 协议的，因此在建立连接和关闭连接的时候，需要进行 <font color=red><strong>三次握手和四次挥手</strong></font>。</p></blockquote><p>具体来说，HTTP 的连接建立过程如下：</p><pre><code class="hljs">1. 客户端发送 SYN 包给服务器端，请求建立连接。2. 服务器端收到 SYN 包后，回复一个 SYN + ACK 包，表示确认客户端的请求，同时告诉客户端自己也准备好建立连接。3. 客户端收到 SYN + ACK 包后，再回复一个 ACK 包，表示确认收到了服务器端的回复，连接建立成功。</code></pre><p>HTTP 的连接关闭过程如下：</p><pre><code class="hljs">1. 客户端发送一个 FIN 包，表示自己不再发送数据。2. 服务器端收到 FIN 包后，回复一个 ACK 包，表示确认收到客户端的请求。3. 服务器端发送一个 FIN 包，表示自己也不再发送数据。4. 客户端收到服务器端的 FIN 包后，回复一个 ACK 包，表示确认收到了服务器端的请求，连接关闭。</code></pre><p>因此，HTTP 的一次完整的交互包括连接建立和连接关闭，需要进行三次握手和四次挥手。</p><h3 id="ACK包和SYN包和FIN包"><a href="#ACK包和SYN包和FIN包" class="headerlink" title="ACK包和SYN包和FIN包"></a>ACK包和SYN包和FIN包</h3><blockquote><p>在TCP协议中，三次握手和四次挥手中使用了SYN和ACK包、FIN包等。</p></blockquote><pre><code class="hljs">SYN（synchronize）：同步序列编号。在建立TCP连接时，SYN用来同步序号，使通信双方都知道从哪里开始发送数据。SYN包中会带有一个初始序号（ISN）。ACK（acknowledgement）：确认。用于确认收到了对方的数据包。FIN（finish）：终止。用于关闭连接时发送的包，表示数据发送完毕，希望断开连接。在TCP连接的建立阶段，第一次握手中发送的是SYN包，第二次握手中发送的是SYN+ACK包，第三次握手中发送的是ACK包。在TCP连接的关闭阶段，第一次挥手中发送的是FIN包，第二次挥手中发送的是ACK包，第三次挥手中发送的是FIN包，第四次挥手中发送的是ACK包。</code></pre>]]></content>
<tags>
<tag>ajax请求</tag>
</tags>
</entry>
<entry>
<title>VScode Remote-SSH插件</title>
<link href="/2023/02/13/VScode%20Remote-SSH%E6%8F%92%E4%BB%B6/"/>
<url>/2023/02/13/VScode%20Remote-SSH%E6%8F%92%E4%BB%B6/</url>
<content type="html"><![CDATA[<h1 id="插件介绍"><a href="#插件介绍" class="headerlink" title="插件介绍"></a>插件介绍</h1><blockquote><p>在vscode中使用ssh连接远程服务器，并且操作文件。可以直接修改或测试远端服务器的文件，还是比较方便的。下面有解决每次连接都需要输入密码的问题。</p></blockquote><h1 id="插件安装"><a href="#插件安装" class="headerlink" title="插件安装"></a>插件安装</h1><p>插件中心搜索 <code>remote-ssh</code>，点击安装！</p><p><img src="/2023/02/13/VScode%20Remote-SSH%E6%8F%92%E4%BB%B6/img1.png"></p><h1 id="连接服务器"><a href="#连接服务器" class="headerlink" title="连接服务器"></a>连接服务器</h1><p>在vscode中按快捷键<code>ctrl</code>+<code>shift</code>+<code>P</code><br>输入<code>Remote-SSH:Add New SHH Host...</code></p><p><img src="/2023/02/13/VScode%20Remote-SSH%E6%8F%92%E4%BB%B6/img2.png"></p><ol><li>选择并输入： <strong><font color=red>用户名@远程服务器ip地址</font></strong> </li><li>输入密码</li><li>选择需要连接的文件路径(在导航栏文件菜单中选择打开文件)</li></ol><p><img src="/2023/02/13/VScode%20Remote-SSH%E6%8F%92%E4%BB%B6/img3.png"><br><img src="/2023/02/13/VScode%20Remote-SSH%E6%8F%92%E4%BB%B6/img4.png"><br><img src="/2023/02/13/VScode%20Remote-SSH%E6%8F%92%E4%BB%B6/img5.png"></p><p>使用<code>ctrl</code>+<code>shift</code>+<code>Esc</code>打开终端也可以输入命令操作远程服务器了。</p><h1 id="解决每次都需要输入密码"><a href="#解决每次都需要输入密码" class="headerlink" title="解决每次都需要输入密码"></a>解决每次都需要输入密码</h1><p>使用公钥认证方式可以实现不用每次输入密码的方法。</p><ul><li><p>首先先打开本地window的<code>cmd</code>或者<code>PowerShell</code></p></li><li><p>生成公钥和私钥 </p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ ssh-keygen -t rsa<br></code></pre></td></tr></table></figure><p> 输入之后一直按<code>Enter</code>回车就好<br> 之后公钥和私钥会存在<code>C:\Users\用户名\.ssh</code>中，私钥<code>id-rsa</code>，公钥<code>id-rsa.pub</code></p><p> <img src="/2023/02/13/VScode%20Remote-SSH%E6%8F%92%E4%BB%B6/img6.png"></p></li><li><p>复制<strong>公钥</strong>到远程主机找到远程服务器的<code>.ssh</code>文件夹，我使用的是宝塔存在<code>/root/.ssh</code>中,复制你刚刚创建的<code>id-rsa.pub</code>公钥到服务器这个路径<br> <img src="/2023/02/13/VScode%20Remote-SSH%E6%8F%92%E4%BB%B6/img7.png"></p></li><li><p>在远程服务器中，将<code>id_rsa.pub</code>文件里面的所有内容复制到<code>authorized_keys</code>中并保存</p></li><li><p>回到本地主机：用记事本打开<code>C:\Users\用户名\.ssh</code>中的<code>config</code>文件，在尾部加上这串配置<code>IdentityFile C:\Users\用户名\.ssh\id_rsa</code>,文件路径为你存放<strong>私钥</strong>的地方。</p></li><li><p>回到vscode，发现就不需要再输入密码就可以自动连接远程ssh了！</p></li></ul>]]></content>
<tags>
<tag>vscode插件</tag>
</tags>
</entry>
<entry>
<title>Javascript学习笔记</title>
<link href="/2023/02/01/Javascript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/"/>
<url>/2023/02/01/Javascript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/</url>
<content type="html"><![CDATA[<h1 id="Js获取元素的样式"><a href="#Js获取元素的样式" class="headerlink" title="Js获取元素的样式"></a>Js获取元素的样式</h1><h2 id="使用Element-Style-和-Window-getComputedStyle"><a href="#使用Element-Style-和-Window-getComputedStyle" class="headerlink" title="使用Element.Style 和 Window.getComputedStyle"></a>使用Element.Style 和 Window.getComputedStyle</h2><ul><li><p><strong>Element.Style语法</strong> </p><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></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"myElement"</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(element.<span class="hljs-property">style</span>.<span class="hljs-property">width</span>) <span class="hljs-comment">//获取元素的宽</span><br>element.<span class="hljs-property">style</span>.<span class="hljs-property">backgroundColor</span> = <span class="hljs-comment">//设置元素的背景颜色</span><br>element.<span class="hljs-property">style</span>.<span class="hljs-title function_">getPropertyValue</span>(<span class="hljs-string">'margin'</span>) <span class="hljs-comment">//使用getPropertyValue获取元素margin</span><br>element.<span class="hljs-property">style</span>.<span class="hljs-property">transform</span> = <span class="hljs-string">`translateX(<span class="hljs-subst">${move}</span>px)`</span> <span class="hljs-comment">//设置元素的属性</span><br></code></pre></td></tr></table></figure><blockquote><p><strong>注意：</strong> element.style该方法只能设置和修改内联样式，也就是说如果内联样式没有设置width的话，是无法获取到width的，也无法获取实时的width</p></blockquote></li><li><p><strong>Window.getComputedStyle语法</strong> </p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"myElement"</span>)<br><span class="hljs-keyword">let</span> style = <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">getComputedStyle</span>(element,<span class="hljs-literal">null</span>).<span class="hljs-property">width</span><br></code></pre></td></tr></table></figure><blockquote><p><strong>注意：</strong> 使用getComputedStyle可以在任何情况获取到元素的样式属性，但是却无法修改，如果需要修改只能使用style</p></blockquote></li></ul><h1 id="js的事件委派"><a href="#js的事件委派" class="headerlink" title="js的事件委派"></a>js的事件委派</h1><blockquote><p><strong>作用：</strong> 解决多次绑定事件的性能问题，以及解决新添加的元素绑定的事件无效的问题。（实现是利用冒泡）</p></blockquote><h2 id="原生javascript的事件委派"><a href="#原生javascript的事件委派" class="headerlink" title="原生javascript的事件委派"></a>原生javascript的事件委派</h2><ul><li><p><strong>语法</strong></p><figure class="highlight html"><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><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ul"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li4<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li5<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ul</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span>></span>点我添加li<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br></code></pre></td></tr></table></figure><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><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><code class="hljs javascript"><span class="hljs-variable language_">window</span>.<span class="hljs-property">onload</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){<br> <span class="hljs-keyword">let</span> ul = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"ul"</span>)<br> <span class="hljs-comment">/*</span><br><span class="hljs-comment"> 为ul绑定click事件，委派到里面的li </span><br><span class="hljs-comment"> 其中利用(event.target)</span><br><span class="hljs-comment"> */</span><br> <span class="hljs-comment">//方法1：</span><br> ul.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>){<br> <span class="hljs-comment">//判断event.target是否为li,如果为li再做操作</span><br> <span class="hljs-keyword">if</span>(event.<span class="hljs-property">target</span>.<span class="hljs-property">tagName</span> == <span class="hljs-string">'li'</span>){<br> event.<span class="hljs-property">target</span>.<span class="hljs-property">style</span>.<span class="hljs-property">color</span> = <span class="hljs-string">'red'</span><br> }<br> })<br><br> <span class="hljs-comment">//方法2：</span><br> ul.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params">event</span>){<br> <span class="hljs-comment">//判断event.target是否为li,如果为li再做操作</span><br> <span class="hljs-keyword">if</span>(event.<span class="hljs-property">target</span>.<span class="hljs-property">tagName</span> == <span class="hljs-string">'li'</span>){<br> event.<span class="hljs-property">target</span>.<span class="hljs-property">style</span>.<span class="hljs-property">color</span> = <span class="hljs-string">'red'</span><br> }<br> }<br><br> <span class="hljs-comment">//即使新添加的元素也还是可以绑定到事件</span><br> <span class="hljs-keyword">let</span> button = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementsByTagName</span>(<span class="hljs-string">"button"</span>)[<span class="hljs-number">0</span>]<br> button.<span class="hljs-property">onclick</span> = <span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){<br> <span class="hljs-keyword">let</span> li = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">createElement</span>(<span class="hljs-string">"li"</span>)<br> li.<span class="hljs-property">innerHtml</span> = <span class="hljs-string">"新添加的li"</span><br> ul.<span class="hljs-title function_">appendChild</span>(li)<br> }<br>}<br></code></pre></td></tr></table></figure></li></ul><h2 id="使用jquery实现事件委派"><a href="#使用jquery实现事件委派" class="headerlink" title="使用jquery实现事件委派"></a>使用jquery实现事件委派</h2><ul><li><p><strong>语法</strong></p><figure class="highlight html"><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><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"ul"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li1<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li2<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li3<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li4<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>则是li5<span class="hljs-tag"></<span class="hljs-name">li</span>></span><br><span class="hljs-tag"></<span class="hljs-name">ul</span>></span><br><span class="hljs-tag"><<span class="hljs-name">button</span>></span>点我添加li<span class="hljs-tag"></<span class="hljs-name">button</span>></span><br></code></pre></td></tr></table></figure><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></pre></td><td class="code"><pre><code class="hljs javascript">$(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">ready</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {<br> <span class="hljs-comment">//这里我们将事件委派document中，当点击ul里的li时才触发事件</span><br> <br> $(<span class="hljs-variable language_">document</span>).<span class="hljs-title function_">on</span>(<span class="hljs-string">'click'</span>, <span class="hljs-string">'#ul li'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">event</span>) {<br> $(<span class="hljs-variable language_">this</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"color"</span>, <span class="hljs-string">'red'</span>)<br> })<br><br> <span class="hljs-comment">//这里是没有使用事件委派的，新添加的li将无法绑定click事件</span><br> $(<span class="hljs-string">"li"</span>).<span class="hljs-title function_">on</span>(<span class="hljs-string">"click"</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {<br> $(<span class="hljs-variable language_">this</span>).<span class="hljs-title function_">css</span>(<span class="hljs-string">"color"</span>, <span class="hljs-string">'red'</span>)<br> })<br><br> $(<span class="hljs-string">"button"</span>).<span class="hljs-title function_">click</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {<br> $(<span class="hljs-string">'#ul'</span>).<span class="hljs-title function_">append</span>(<span class="hljs-string">"<li>新添加的li</li>"</span>)<br> })<br>})<br></code></pre></td></tr></table></figure></li></ul><h1 id="监听window窗口size的元素的size变化"><a href="#监听window窗口size的元素的size变化" class="headerlink" title="监听window窗口size的元素的size变化"></a>监听window窗口size的元素的size变化</h1><h2 id="window-resize实现"><a href="#window-resize实现" class="headerlink" title="window.resize实现"></a>window.resize实现</h2><blockquote><p>相比新的ResizeObserver API,window.resize性能更差，建议使用ResizeObserver</p></blockquote><ul><li><p>语法</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//监听window窗口的缩放或者改变大小</span><br><span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'resize'</span>,<span class="hljs-keyword">function</span>(<span class="hljs-params"></span>){...})<br></code></pre></td></tr></table></figure></li><li><p>vue监听window.resize改变main的translateX案例</p><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></pre></td><td class="code"><pre><code class="hljs javascript"> <span class="hljs-comment">//监听窗口改变大小 实时改变label的left</span><br><span class="hljs-keyword">const</span> container = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$refs</span>.<span class="hljs-property">container</span>;<br><span class="hljs-keyword">const</span> main = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$refs</span>.<span class="hljs-property">main</span>;<br><span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">"resize"</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) {<br> <span class="hljs-keyword">let</span> mainWidth = main.<span class="hljs-property">clientWidth</span>;<br> <span class="hljs-keyword">let</span> containerWidth = container.<span class="hljs-property">clientWidth</span>;<br> <span class="hljs-keyword">let</span> moveWidth = containerWidth - mainWidth;<br> <span class="hljs-keyword">if</span> (mainWidth >= containerWidth) {<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">"超过"</span>);<br> <span class="hljs-variable language_">this</span>.$set(<br> <span class="hljs-variable language_">this</span>.<span class="hljs-property">mainStyle</span>,<br> <span class="hljs-string">"transform"</span>,<br> <span class="hljs-string">`translateX(<span class="hljs-subst">${moveWidth}</span>px)`</span><br> );<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-variable language_">this</span>.$set(<span class="hljs-variable language_">this</span>.<span class="hljs-property">mainStyle</span>, <span class="hljs-string">"transform"</span>, <span class="hljs-string">`translateX(0)`</span>);<br> }<br>});<br></code></pre></td></tr></table></figure><h2 id="ResizeObserver-API实现"><a href="#ResizeObserver-API实现" class="headerlink" title="ResizeObserver API实现"></a>ResizeObserver API实现</h2><blockquote><p>这个方法接受一个参数，即需要监听的元素 element。当元素的尺寸发生变化时，ResizeObserver 会触发回调函数，并将 ResizeObserverEntry 对象作为参数传入。</p></blockquote></li><li><p>语法</p><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></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">let</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(<span class="hljs-string">"#myElement"</span>)<br><span class="hljs-keyword">const</span> resizeObserver = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ResizeObserver</span>(<span class="hljs-function">(<span class="hljs-params">entries</span>)=></span>{<br> <span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> entry <span class="hljs-keyword">of</span> entries){<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Element:'</span>, entry.<span class="hljs-property">target</span>) <span class="hljs-comment">//元素的标签名</span><br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">'Width:'</span>, entry.<span class="hljs-property">contentRect</span>.<span class="hljs-property">width</span>) <span class="hljs-comment">//元素的宽</span><br> }<br>})<br><br><span class="hljs-comment">//使用方法,监听element元素的长度变化</span><br>resizeObserver.<span class="hljs-title function_">observer</span>(element)<br></code></pre></td></tr></table></figure></li><li><p>vue案例</p><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><code class="hljs javascript"><span class="hljs-keyword">const</span> container = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$refs</span>.<span class="hljs-property">container</span>;<br><span class="hljs-keyword">const</span> main = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$refs</span>.<span class="hljs-property">main</span>;<br><span class="hljs-keyword">var</span> observer = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ResizeObserver</span>(<span class="hljs-function">(<span class="hljs-params">entries</span>) =></span> {<br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> entry <span class="hljs-keyword">of</span> entries) {<br> <span class="hljs-comment">// console.log(entry);</span><br> <span class="hljs-keyword">let</span> mainWidth = main.<span class="hljs-property">clientWidth</span>;<br> <span class="hljs-keyword">let</span> labelWidth = entry.<span class="hljs-property">contentRect</span>.<span class="hljs-property">width</span>;<br> <span class="hljs-keyword">let</span> moveWidth = labelWidth - mainWidth;<br> <span class="hljs-keyword">if</span> (mainWidth >= labelWidth) {<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(moveWidth);<br> <span class="hljs-variable language_">this</span>.$set(<br> <span class="hljs-variable language_">this</span>.<span class="hljs-property">mainStyle</span>,<br> <span class="hljs-string">"transform"</span>,<br> <span class="hljs-string">`translateX(<span class="hljs-subst">${moveWidth}</span>px)`</span><br> );<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-variable language_">this</span>.$set(<span class="hljs-variable language_">this</span>.<span class="hljs-property">mainStyle</span>, <span class="hljs-string">"transform"</span>, <span class="hljs-string">`translateX(0)`</span>);<br> }<br> }<br>});<br>observer.<span class="hljs-title function_">observe</span>(container);<br></code></pre></td></tr></table></figure></li><li><p>两个方法 </p><ol><li><p><code>disconnect()</code>方法取消对所有<code>Element</code>的监听 </p> <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></pre></td><td class="code"><pre><code class="hljs javascript">btn.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'click'</span>, <span class="hljs-function">() =></span> {<br> resizeObserver.<span class="hljs-title function_">disconnect</span>();<br>})<br></code></pre></td></tr></table></figure></li><li><p><code>unobserve(target)</code>方法结束对指定Element的监听</p> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">this</span>.<span class="hljs-property">$refs</span>.<span class="hljs-property">main</span>;<br>resizeObserver.<span class="hljs-title function_">unobserve</span>(element)<br></code></pre></td></tr></table></figure></li></ol></li><li><p>几个注意的点以及遇到的问题 </p><ul><li><p>在vue的mounted中使用</p><blockquote><p>在组件的生命周期中，mounted钩子函数可能会被多次调用，导致多次创建Observer实例，进而造成了重复输出。你可以在mounted钩子函数中判断Observer实例是否已经被创建，如果已经被创建，就不再进行重复创建。</p></blockquote><p>简单来说： </p></li></ul><ol><li>如果在vue中的mounted中使用，最好使用使用<code>this</code>来定义<code>ResizeObserver</code>实例.</li><li>在mounted中创建的<code>ResizeObserver</code>实例，最好在<code>beforeDestroy</code>生命周期钩子中销毁： <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></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-title function_">beforeDestroy</span>(<span class="hljs-params"></span>) {<br> <span class="hljs-variable language_">this</span>.<span class="hljs-property">containerObserver</span>.<span class="hljs-title function_">disconnect</span>();<br> <span class="hljs-variable language_">this</span>.<span class="hljs-property">containerObserver</span> = <span class="hljs-literal">null</span>;<br>}<br></code></pre></td></tr></table></figure> 这样可以保证在vue开发时，修改程序保存之后，vue热重载之后出现多次调用<code>ResizeObserver</code>的问题。原因可能是因为重载时，mounted会执行一遍之前的实例，之后再创建新的实例，具体原因不明。</li></ol></li></ul><h1 id="获取元素到视口的距离"><a href="#获取元素到视口的距离" class="headerlink" title="获取元素到视口的距离"></a>获取元素到视口的距离</h1><h2 id="getBoundingClientRect"><a href="#getBoundingClientRect" class="headerlink" title="getBoundingClientRect()"></a>getBoundingClientRect()</h2><blockquote><p>Element.getBoundingClientRect() 方法返回一个 DOMRect 对象，其提供了元素的大小及其相对于视口的位置。</p></blockquote><ul><li>语法<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-keyword">var</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">querySelector</span>(<span class="hljs-string">"div"</span>)<br><span class="hljs-keyword">var</span> rect = element.<span class="hljs-title function_">getBoundingClientRect</span>()<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(rect.<span class="hljs-property">top</span>) <span class="hljs-comment">//获取元素到视口的top距离</span><br></code></pre></td></tr></table></figure><img src="/2023/02/01/Javascript%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/getBountingClientRect.png"></li></ul>]]></content>
</entry>
<entry>
<title>Hexo结合GitHub pages搭建个人Blog</title>
<link href="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/"/>
<url>/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/</url>
<content type="html"><![CDATA[<h1 id="什么是-Hexo？"><a href="#什么是-Hexo？" class="headerlink" title="什么是 Hexo？"></a>什么是 Hexo？</h1><p>Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。</p><h1 id="安装Hexo"><a href="#安装Hexo" class="headerlink" title="安装Hexo"></a>安装Hexo</h1><h2 id="安装前提"><a href="#安装前提" class="headerlink" title="安装前提"></a>安装前提</h2><ul><li><strong><a href="http://nodejs.org/">Node.js</a></strong> (Node.js 版本需不低于 10.13，建议使用 Node.js 12.0 及以上版本)</li><li><strong><a href="http://git-scm.com/">Git</a></strong> (为上传到GitHub Page做准备)<br>以上两个基础环境请自行安装与配置</li></ul><h2 id="安装并初始化hexo"><a href="#安装并初始化hexo" class="headerlink" title="安装并初始化hexo"></a>安装并初始化hexo</h2><ol><li><p>创建文件夹 这里创建一个名为<code>demo</code>的文件夹</p></li><li><p>初始化<code>nodejs</code>环境 从终端进入<code>demo</code>文件夹 </p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm init<br></code></pre></td></tr></table></figure><p> <img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img1.png"></p></li><li><p>安装hexo </p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install -g hexo-cli<br></code></pre></td></tr></table></figure><p> 查看是否安装成功</p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm list --depth=0<br></code></pre></td></tr></table></figure><p> <img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img2.png"></p></li><li><p>初始化hexo文件夹 </p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo init <folder><br>$ <span class="hljs-built_in">cd</span> <folder><br>$ npm install<br></code></pre></td></tr></table></figure><p> <code>folder</code>是你想创建的项目名字 这里举例为<code>myBlog</code></p><p> <img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img3.png"> </p><ul><li><code>source\_posts</code>里面存放的为你的md文章文件</li><li><code>themes</code>是主题配置文件（具体请看官网 <strong><a href="https://hexo.io/zh-cn/docs/themes">主题</a></strong> 介绍）</li><li><code>_config.yml</code>是hexo的配置文件（具体请看官网 **<a href="https://hexo.io/zh-cn/docs/configuration">配置文件</a>**介绍）</li><li><code>_config.landscape.yml</code>是landscape这个hexo的原生主题的配置文件</li></ul></li></ol><h1 id="启动hexo服务"><a href="#启动hexo服务" class="headerlink" title="启动hexo服务"></a>启动hexo服务</h1><h2 id="创建文章"><a href="#创建文章" class="headerlink" title="创建文章"></a>创建文章</h2> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo new <span class="hljs-string">"我的第一篇文章"</span><br></code></pre></td></tr></table></figure><p> 在<code>source\_posts</code>会多出一个名为<code>我的第一篇文章.md</code>的文件，在这个文件中使用markdown编辑你的文章内容 注意不要删除前面的文章配置内容 </p><p> <img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img4.png"></p><h2 id="启动服务"><a href="#启动服务" class="headerlink" title="启动服务"></a>启动服务</h2><ul><li><p>生成静态文件</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo generate 或者 hexo g<br></code></pre></td></tr></table></figure><p>会出现一个<code>public</code>文件夹在根目录，一般不需要进行修改</p></li><li><p>启动hexo服务</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo server<br></code></pre></td></tr></table></figure><p> <img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img5.png"></p><p> <img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img6.png"> </p><p> 这时我们访问<a href="http://localhost:4000/">http://localhost:4000/</a>就能访问我们的blog了</p></li></ul><h1 id="部署到Github-Pages"><a href="#部署到Github-Pages" class="headerlink" title="部署到Github Pages"></a>部署到Github Pages</h1><h2 id="创建github-io仓库"><a href="#创建github-io仓库" class="headerlink" title="创建github.io仓库"></a>创建github.io仓库</h2><ol><li><p>注册并登录github (请访问 <strong><a href="https://github.com/">github官网</a></strong> 自行注册)</p></li><li><p>创建 <strong>github.io</strong>仓库 </p><p><img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img7.png"> </p><p><img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img8.png"> </p><p><strong><font color='red'>创建仓库需要注意几点：</font></strong></p><ul><li>仓库名必须右【用户名】+【.github.io】命名，比如我的用户名是HunterX-327，库名就为：<strong>HunterX-327.github.io</strong> </li><li>创建的仓库必须是public公共的，私有的别人也无法访问对吧</li></ul></li><li><p>访问github pages </p><p><img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img9.png"><br>进入刚刚创建的仓库，打开<code>setting</code>设置，进入<code>pages</code>页面，这时就会出现一个<code>visit site</code>按钮。点击就能进入由github服务器为你免费代理的静态页面网站，了前提是你的库里面必须要有文件，可以创建一个readme文件或者index.html文件测试一下是否部署成功</p></li></ol><h2 id="部署hexo到github-pages"><a href="#部署hexo到github-pages" class="headerlink" title="部署hexo到github pages"></a>部署hexo到github pages</h2><p>这里我们使用一键部署方式</p><ol><li><p>查看是否安装好git </p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ git --version<br></code></pre></td></tr></table></figure></li><li><p>安装 hexo-deployer-git</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ npm install hexo-deployer-git --save<br></code></pre></td></tr></table></figure></li><li><p>修改<code>_config.yml</code>文件配置 </p><ul><li>添加以下内容到文件尾部<figure class="highlight yml"><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></pre></td><td class="code"><pre><code class="hljs yml"><span class="hljs-attr">deploy:</span><br><span class="hljs-attr">type:</span> <span class="hljs-string">git</span><br><span class="hljs-attr">repo:</span> <span class="hljs-string">https://github.com/HunterX-327/HunterX-327.github.io.git</span> <span class="hljs-comment">#https://bitbucket.org/JohnSmith/johnsmith.bitbucket.io</span><br><span class="hljs-attr">branch:</span> <span class="hljs-string">gh-pages</span><br></code></pre></td></tr></table></figure></li><li><code>repo</code>为你刚刚创建的github.io仓库链接</li><li><code>branch</code>为你需要部署的仓库分支 </li></ul><p> <img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img10.png"></p></li><li><p>部署到github pages</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo deploy<br></code></pre></td></tr></table></figure><p>等待2-5分钟，查看你的github.io仓库，看看是否有新的文件添加。访问你的github pages网址，恭喜你，就能看到一个属于你自己的由github免费代理的个人blog网站了！！！</p></li><li><p>比较正确的部署方式</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs bash">$ hexo clean<br>$ hexo g<br>$ hexo d<br></code></pre></td></tr></table></figure><ul><li><code>hexo clean</code> 为清除之前创建的静态文件</li><li><code>hexo g</code> 创建新的静态文件</li><li><code>hexo d</code> 部署到github服务器</li></ul></li></ol><h1 id="嵌入图片简便方法"><a href="#嵌入图片简便方法" class="headerlink" title="嵌入图片简便方法"></a>嵌入图片简便方法</h1><p>hexo-renderer-marked 3.1.0 引入了一个新的选项，其允许你无需使用 asset_img 标签插件就可以在 markdown 中嵌入图片</p><figure class="highlight yaml"><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><code class="hljs yaml"><span class="hljs-string">_config.yml</span><br><br><span class="hljs-attr">post_asset_folder:</span> <span class="hljs-literal">true</span><br><span class="hljs-attr">marked:</span><br> <span class="hljs-attr">prependRoot:</span> <span class="hljs-literal">true</span><br> <span class="hljs-attr">postAsset:</span> <span class="hljs-literal">true</span><br></code></pre></td></tr></table></figure><p>启用后，资源图片将会被自动解析为其对应文章的路径。<br>例如： <code>image.jpg</code> 位置为 <code>/2020/01/02/foo/image.jpg</code> ，这表示它是 <code>/2020/01/02/foo/</code> 文章的一张资源图片， <img src="/image.jpg"> 将会被解析为 <code><img src="/2020/01/02/foo/image.jpg"> </code>。</p><p>文件路径大概如下： </p><p><img src="/2023/01/18/Hexo%E7%BB%93%E5%90%88GitHub-pages%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BABlog/img11.png"></p><h1 id="说在后面"><a href="#说在后面" class="headerlink" title="说在后面"></a>说在后面</h1><p>hexo的玩法远不如此，还有主题、插件等功能需要自己去探索，另外github pages是只支持静态页面的，并不支持动态页面，但是如果需要创建留言或者评论系统，可以使用hexo插件实现类似的功能。</p>]]></content>
<tags>
<tag>如何快速的创建一个由hexo和github搭建的免费个人博客</tag>
</tags>
</entry>
<entry>
<title>Electron+VueCli构建桌面app</title>
<link href="/2023/01/18/Electron-VueCli%E6%9E%84%E5%BB%BA%E6%A1%8C%E9%9D%A2app/"/>
<url>/2023/01/18/Electron-VueCli%E6%9E%84%E5%BB%BA%E6%A1%8C%E9%9D%A2app/</url>
<content type="html"><![CDATA[<h1 id="electron-vue-cli学习笔记"><a href="#electron-vue-cli学习笔记" class="headerlink" title="electron+vue-cli学习笔记"></a>electron+vue-cli学习笔记</h1><p>[TOC]</p><h2 id="说在前面"><a href="#说在前面" class="headerlink" title="说在前面"></a>说在前面</h2><ol><li><p>本人也是纯小白一个，接触Electron也不久。这篇文章主要是用来记录笔记，有些东西长时间不用就容易忘记，这里做好笔记在之后也会节省很多时间。另外也想分享一下自己的学习过程还有一些踩过的坑，希望帮助到有需要的人！</p></li><li><p>本篇文章面向有一定前端基础的小白（HTML、CSS、JS…），vue2和vue-cli，其实vue倒是可有可无，如果你只想创建一个简单的electron应用程序，有前端三件套的知识就够了。文章主要介绍electron的基础使用、electron的打包、以及在vue-cli开发环境中如何使用electron去打包出一个桌面端应用程序（win & Mac）。</p></li><li><p>所用到的语言以及工具。</p><ul><li><strong><a href="https://cn.vuejs.org/">Vue.js (vue2)</a></strong> —基础语言</li><li><strong><a href="https://cli.vuejs.org/zh/">Vue-Cli</a></strong> —用于创建vue脚手架</li><li><strong><a href="https://www.electronjs.org/zh/">Electron</a></strong> —用于将项目打桌面应用程序</li><li><strong><a href="https://nodejs.org/en/">node.js</a></strong> —基础语言工具（自带npm）</li><li><strong><a href="https://nodemon.io/">nodemon</a></strong> —实时刷新重启服务插件</li><li><strong><a href="https://nklayman.github.io/vue-cli-plugin-electron-builder/">Vue CLI Plugin Electron Builder</a></strong> —在vue-cli状态下使用(Vue插件)</li><li><strong><a href="https://github.com/safu9/electron-icon-builder">electron-icon-builder</a></strong> —将图片打包成安装程序图标icon(不用也行)</li><li><strong><a href="https://code.visualstudio.com/">VS Code</a></strong> —基础开发工具啦，你可以选择自己喜欢的(顺便提一句，我们强大的vscode就是使用Electron开发的呢！)</li></ul></li><li><p>Electron是什么？<br>Copy一段来自官网的介绍： </p><blockquote><p>Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。</p></blockquote></li></ol><h2 id="基础Electron部分"><a href="#基础Electron部分" class="headerlink" title="基础Electron部分"></a>基础Electron部分</h2><blockquote><p>**注意：如果你只想看vue-cli篇，请自行跳转到<a href="#vue-cli">Vue-cli篇</a>,这部分安装的electron与vue-cli篇部分安装的不一样。</p></blockquote><h3 id="安装node-js"><a href="#安装node-js" class="headerlink" title="安装node.js"></a>安装node.js</h3><p>正如Electron官网所说：在使用Electron进行开发之前，您需要安装**<a href="https://nodejs.org/en/">Node.js</a>。** </p><p>在node.js的环境中自带有npm，在之后的开发插件安装中，几乎都离不开npm来安装一些依赖和库(也可以使用yarn和pnpm…) </p><h4 id="1-下载node-js安装包-自行安装v14-17-5以上版本"><a href="#1-下载node-js安装包-自行安装v14-17-5以上版本" class="headerlink" title="1. 下载node.js安装包(自行安装v14.17.5以上版本)"></a>1. 下载node.js安装包(自行安装v14.17.5以上版本)</h4><ul><li>[Node.js官网]：<a href="https://code.visualstudio.com/">https://code.visualstudio.com</a> </li><li><strong>注意：需要使用Electron的话请安装node版本超过v14.17.5</strong> </li><li>这里推荐各位小伙伴们可以使用nvm-windows去合理的控制自己的node版本哦！这里附上<a href="https://blog.csdn.net/Anony_me/article/details/124153201">nvm详细安装步骤以及使用（window10系统）</a></li></ul><h4 id="2-配置Node-js环境变量"><a href="#2-配置Node-js环境变量" class="headerlink" title="2. 配置Node.js环境变量"></a>2. 配置Node.js环境变量</h4><ul><li>将安装的目录配置到系统环境变量和用户变量中</li></ul><h4 id="3-测试Node-js是否安装成功"><a href="#3-测试Node-js是否安装成功" class="headerlink" title="3. 测试Node.js是否安装成功"></a>3. 测试Node.js是否安装成功</h4><p> 在<code>cmd</code>或者vscode终端中输入以下命令</p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs bash">node -v <span class="hljs-comment">#查看node版本</span><br>npm -v <span class="hljs-comment">#查看npm版本</span><br></code></pre></td></tr></table></figure><p> 如果显示node和npm版本这表示安装Node.js以及配置环境变量成功！</p><h3 id="安装Electron"><a href="#安装Electron" class="headerlink" title="安装Electron"></a>安装Electron</h3><p>在安装好Node.js的前提下，接下来我们来安装 <strong><a href="https://www.electronjs.org/zh/">Electron</a></strong></p><h4 id="1-初始化一个Node-js项目"><a href="#1-初始化一个Node-js项目" class="headerlink" title="1. 初始化一个Node.js项目"></a>1. 初始化一个Node.js项目</h4><p>在安装electron之前我们需要先创建一个文件夹，并初始化它为一个新的Node.js项目。</p><ul><li><p>首先我们创建一个文件夹</p></li><li><p>使用cmd或者vscode终端进入该文件夹</p></li><li><p>输入一下命令将文件夹初始化为一个Node.js项目</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm init<br></code></pre></td></tr></table></figure></li><li><p>按<code>Enter</code>在输入了描述、作者等信息后，这时候你会发现你的文件夹中出现了package.json文件</p></li><li><p><code>package.json</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><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><code class="hljs json"><span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"name"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"my-electron-test"</span><span class="hljs-punctuation">,</span> <br> <span class="hljs-attr">"version"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"1.0.0"</span><span class="hljs-punctuation">,</span> <br> <span class="hljs-attr">"description"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"xxxx"</span><span class="hljs-punctuation">,</span> <br> <span class="hljs-attr">"scripts"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <br> <span class="hljs-attr">"test"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"echo \"Error: no test specified\" && exit 1"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"author"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"VGhunter"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"license"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"ISC"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"dependencies"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <br> <span class="hljs-punctuation">}</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><p>这个文件里面的参数我们后面会一点点添加和修改。<br>到这里你成功初始化了一个Node.js项目文件。</p></li></ul><h4 id="2-使用npm命令安装Electron"><a href="#2-使用npm命令安装Electron" class="headerlink" title="2. 使用npm命令安装Electron"></a>2. 使用npm命令安装Electron</h4><p>好了，现在可以安装Electron了。 </p><ul><li><p>在<code>cmd</code>或者vscode终端下输入一下命令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm install electron --save-dev <span class="hljs-comment">#在当前项目中安装electron</span><br>npm install -g electron <span class="hljs-comment">#在全局安装electron</span><br></code></pre></td></tr></table></figure><p>注意：这里本人建议使用<strong>全局安装</strong>，因为这里有一个大坑。</p><blockquote><p>在安装过程中，electron 模块会通过 electron-download 为您的平台下载 Electron 的预编译二进制文件。</p></blockquote><p>这个是官方原话。没错，它会在安装之后下载所谓的<strong>预编译二进制文件</strong>，这点我问过chatGPT，它回答我说，这里的预编译文件大概80m左右，但是它真的要下特别特别久，没有耐心的朋友可能就中途就退出了。所以建议大家<strong>全局安装</strong>，就不用每次安装了。这一点我也不是特别理解是什么东西。如果有朋友们有什么解决办法，或者更好的办法麻烦可以评论区说一下。</p></li><li><p>下载完成之后 测试一下是否安装成功了</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm list --depth=0 //查看已经安装的项目依赖<br>npm list -g --depth=0 //查看已经安装的全局依赖<br></code></pre></td></tr></table></figure><p>如果都看到了<code>[email protected]</code>则代表安装成功了<br>这时在看你的项目文件夹，发现多了一个<code>node_modules</code>文件夹，不用管他，里面就装着一些相关依赖啦！<br>再看我们的<code>package.json</code>文件：<br>如果你是使用<code>npm install electron --save-dev</code>安装的话，你的文件里面应该多出了一个<code>devDependencies</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><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></pre></td><td class="code"><pre><code class="hljs json"><span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"name"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"my-electron-test"</span><span class="hljs-punctuation">,</span> <br> <span class="hljs-attr">"version"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"1.0.0"</span><span class="hljs-punctuation">,</span> <br> <span class="hljs-attr">"description"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"xxxx"</span><span class="hljs-punctuation">,</span> <br> <span class="hljs-attr">"scripts"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <br> <span class="hljs-attr">"test"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"echo \"Error: no test specified\" && exit 1"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"author"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"VGhunter"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"license"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"ISC"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"dependencies"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span> <br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"devDependencies"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"electron"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^22.0.0"</span><span class="hljs-punctuation">,</span> <span class="hljs-comment">//刚刚安装的electron依赖显示在这</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><p>如果你使用的<code>npm install -g electron</code>，那么electron就安装在全局，这样在任何项目都可以使用electron啦！</p></li></ul><h3 id="创建一个Electron应用"><a href="#创建一个Electron应用" class="headerlink" title="创建一个Electron应用"></a>创建一个Electron应用</h3><h4 id="1-编辑package-json文件"><a href="#1-编辑package-json文件" class="headerlink" title="1. 编辑package.json文件"></a>1. 编辑package.json文件</h4><ul><li><p>在package.json中添加main程序入口和scripts程序启动命令</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><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></pre></td><td class="code"><pre><code class="hljs json"><span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"name"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"my-electron-test"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"version"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"1.0.0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"description"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"xxxx"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"main"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"main.js"</span><span class="hljs-punctuation">,</span> <span class="hljs-comment">//Electron程序入口文件</span><br> <span class="hljs-attr">"scripts"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"test"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"echo \"Error: no test specified\" && exit 1"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"start"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"electron ."</span> <span class="hljs-comment">//Electron程序启动命令</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"author"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"VGhunter"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"license"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"ISC"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"dependencies"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-punctuation">}</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure></li></ul><h4 id="2-创建main-js入口文件"><a href="#2-创建main-js入口文件" class="headerlink" title="2. 创建main.js入口文件"></a>2. 创建main.js入口文件</h4><ul><li><p>在文件根目录创建main.js文件</p><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><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><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// main.js</span><br><span class="hljs-comment">// 引入app和BrowserWindow</span><br><span class="hljs-keyword">const</span> { app, <span class="hljs-title class_">BrowserWindow</span> } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'electron'</span>)<br><span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">'path'</span>)<br><br><span class="hljs-keyword">const</span> <span class="hljs-title function_">createWindow</span> = (<span class="hljs-params"></span>) => {<br> <span class="hljs-comment">// 创建一个窗口，长为800宽为600</span><br> <span class="hljs-keyword">const</span> mainWindow = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BrowserWindow</span>({<br> <span class="hljs-attr">width</span>: <span class="hljs-number">800</span>,<br> <span class="hljs-attr">height</span>: <span class="hljs-number">600</span>,<br> <span class="hljs-attr">webPreferences</span>: { <span class="hljs-comment">// 预加载脚本</span><br> <span class="hljs-attr">preload</span>: path.<span class="hljs-title function_">join</span>(__dirname, <span class="hljs-string">'preload.js'</span>)<br> }<br> })<br><br> <span class="hljs-comment">// 加载 index.html,就是你想展示的界面也可以使用</span><br> mainWindow.<span class="hljs-title function_">loadFile</span>(<span class="hljs-string">'index.html'</span>)<br><br> <span class="hljs-comment">// 打开开发工具</span><br> <span class="hljs-comment">// mainWindow.webContents.openDevTools()</span><br>}<br><br><span class="hljs-comment">// 这段程序将会在 Electron 结束初始化</span><br><span class="hljs-comment">// 和创建浏览器窗口的时候调用</span><br><span class="hljs-comment">// 部分 API 在 ready 事件触发后才能使用。</span><br>app.<span class="hljs-title function_">whenReady</span>().<span class="hljs-title function_">then</span>(<span class="hljs-function">() =></span> {<br> <span class="hljs-title function_">createWindow</span>()<br><br> app.<span class="hljs-title function_">on</span>(<span class="hljs-string">'activate'</span>, <span class="hljs-function">() =></span> {<br> <span class="hljs-comment">// On macOS it's common to re-create a window in the app when the</span><br> <span class="hljs-comment">// dock icon is clicked and there are no other windows open.</span><br> <span class="hljs-keyword">if</span> (<span class="hljs-title class_">BrowserWindow</span>.<span class="hljs-title function_">getAllWindows</span>().<span class="hljs-property">length</span> === <span class="hljs-number">0</span>) <span class="hljs-title function_">createWindow</span>()<br> })<br>})<br><br><span class="hljs-comment">// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。</span><br>app.<span class="hljs-title function_">on</span>(<span class="hljs-string">'window-all-closed'</span>, <span class="hljs-function">() =></span> {<br> <span class="hljs-keyword">if</span> (process.<span class="hljs-property">platform</span> !== <span class="hljs-string">'darwin'</span>) app.<span class="hljs-title function_">quit</span>()<br>})<br><span class="hljs-comment">// code. 也可以拆分成几个文件，然后用 require 导入。</span><br> <br></code></pre></td></tr></table></figure></li></ul><h4 id="3-创建index-html文件"><a href="#3-创建index-html文件" class="headerlink" title="3. 创建index.html文件"></a>3. 创建index.html文件</h4><ul><li><p>在根目录创建你想暂时的index.html文件</p><figure class="highlight html"><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></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-comment"><!--index.html--></span><br><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span><br><span class="hljs-tag"><<span class="hljs-name">html</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">head</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span><br> <span class="hljs-comment"><!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP --></span><br> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">"Content-Security-Policy"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"default-src 'self'; script-src 'self'"</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Hello World!<span class="hljs-tag"></<span class="hljs-name">title</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">head</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">body</span>></span><br> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>Hello World!<span class="hljs-tag"></<span class="hljs-name">h1</span>></span><br> We are using Node.js <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"node-version"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>,<br> Chromium <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"chrome-version"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>,<br> and Electron <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"electron-version"</span>></span><span class="hljs-tag"></<span class="hljs-name">span</span>></span>.<br><br> <！-- 您也可以此进程中运行其他文件 --><br> <span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./renderer.js"</span>></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span><br> <span class="hljs-tag"></<span class="hljs-name">body</span>></span><br><span class="hljs-tag"></<span class="hljs-name">html</span>></span><br></code></pre></td></tr></table></figure><p>这个时候你在终端输入<code>npm run start</code>,就可以启动Electron程序了<br>不出意外应该会弹出一个窗口，而窗口的内容就是你的<code>index.html</code>中编写的内容</p></li></ul><h4 id="4-创建预加载脚本preload-js-可有可无"><a href="#4-创建预加载脚本preload-js-可有可无" class="headerlink" title="4. 创建预加载脚本preload.js(可有可无)"></a>4. 创建预加载脚本preload.js(可有可无)</h4><ul><li><p>同样在项目根目录创建一个名为<code>preload.js</code>的文件 作为预加载脚本文件</p> <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></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-variable language_">window</span>.<span class="hljs-title function_">addEventListener</span>(<span class="hljs-string">'DOMContentLoaded'</span>, <span class="hljs-function">() =></span> {<br> <span class="hljs-keyword">const</span> <span class="hljs-title function_">replaceText</span> = (<span class="hljs-params">selector, text</span>) => {<br> <span class="hljs-keyword">const</span> element = <span class="hljs-variable language_">document</span>.<span class="hljs-title function_">getElementById</span>(selector)<br> <span class="hljs-keyword">if</span> (element) element.<span class="hljs-property">innerText</span> = text<br> }<br> <br> <span class="hljs-keyword">for</span> (<span class="hljs-keyword">const</span> dependency <span class="hljs-keyword">of</span> [<span class="hljs-string">'chrome'</span>, <span class="hljs-string">'node'</span>, <span class="hljs-string">'electron'</span>]) {<br> <span class="hljs-title function_">replaceText</span>(<span class="hljs-string">`<span class="hljs-subst">${dependency}</span>-version`</span>, process.<span class="hljs-property">versions</span>[dependency])<br> }<br>})<br></code></pre></td></tr></table></figure><blockquote><p>预加载脚本在渲染器进程加载之前加载，并有权访问两个 渲染器全局 (例如 window 和 document) 和 Node.js 环境。</p></blockquote><p> 这个文件的代码大概作用就是在程序加载之前，通过这个文件去修改index.html的DOM元素，将版本号输出到index.html中，具体的我也不是很懂。总之这个文件如果不创建也是不影响的！！ </p></li><li><p>到了这里，一个超级基础的Electron应用程序就算创建完成了。<br>使用<code>npm run start</code>来启动你的程序，你见看到一个windows窗口弹出，而里面是你创建index页面。<br>如果你想让你的应用变得更加丰富，请修改你的<code>main.js</code>文件，来让你的应用程序有更完善的功能。<br>更多的教程还请浏览**<a href="https://www.electronjs.org/zh/docs/latest/">Electron官网开发指南</a>**</p></li></ul><h4 id="5-安装nodemon实时刷新插件"><a href="#5-安装nodemon实时刷新插件" class="headerlink" title="5. 安装nodemon实时刷新插件"></a>5. 安装nodemon实时刷新插件</h4><p> 到这里你已经已经可以使用<code>npm run start</code>去开启你的Electron程序了<br> 但是我们来优化一个在开发中遇到的问题<br> 每次我们使用<code>npm run start</code>打开应用查看之后，如果我们修改了内容，页面不会实时刷新，需要<code>Ctrl+C</code>关闭程序在重新启动！<br> 我们优化这个问题，使用 <strong><a href="https://nodemon.io/">nodemon</a></strong></p><ul><li><p>在全局安装nodemon</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm install -g nodemon<br></code></pre></td></tr></table></figure></li><li><p>修改Electron启动命令<br>进入根目录的package.json</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><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></pre></td><td class="code"><pre><code class="hljs json"><span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"name"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"my-electron-test"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"version"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"1.0.0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"description"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"xxxx"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"main"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"main.js"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"scripts"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"test"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"echo \"Error: no test specified\" && exit 1"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"start"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"nodemon --exec electron ."</span> <span class="hljs-comment">//添加nodemon启动方式</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"author"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"VGhunter"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"license"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"ISC"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"dependencies"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"nodemon"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^2.0.20"</span><br> <span class="hljs-punctuation">}</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure><p>现在你再使用<code>npm run start</code>启动，然后修改main.js文件的内容，程序将<strong>自动重启刷新内容</strong>。</p></li></ul><h2 id="Electron-Vue-Cli部分"><a href="#Electron-Vue-Cli部分" class="headerlink" title="Electron + Vue-Cli部分"></a><h2 id='vue-cli'>Electron + Vue-Cli部分</h2></h2><ul><li>知道了基础的Electron使用方法之后,我们开始结合Vue-Cli来创建一个Electron应用。 </li><li>这里我们使用的插件是 <strong><a href="https://nklayman.github.io/vue-cli-plugin-electron-builder/">Vue CLI Plugin Electron Builder</a></strong> 来实现在脚手架创建Electron应用 </li><li>此外你还可以使用<a href="https://github.com/SimulatedGREG/electron-vue">Electron-vue</a>脚手架来直接创建一个基于vue的electon项目</li></ul><h3 id="1-初始化一个vue-cli项目"><a href="#1-初始化一个vue-cli项目" class="headerlink" title="1. 初始化一个vue-cli项目"></a>1. 初始化一个vue-cli项目</h3><ul><li><p>安装vue-cli脚手架</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm install -g @vue/cli<br><span class="hljs-comment"># OR</span><br>yarn global add @vue/cli<br></code></pre></td></tr></table></figure><p>安装完成之后 你可以在终端使用<code>vue --version</code>查看是否安装成功</p></li><li><p>创建一个vue-cli项目<br>切换到你想创建项目的目录 执行一下指令</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">vue create my-vue-cli<br></code></pre></td></tr></table></figure><p>选择你需要创建的vue版本，这里我们使用vue2来举例</p></li><li><p>启动vue-cli项目<br>切换到你创建的vue脚手架项目内部 使用一下命令启动服务</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm run serve<br></code></pre></td></tr></table></figure><p>在加载完成之后 默认情况使用<code>https://localhost:8080</code>就能看到界面了<br>这样就创建好了一个vue脚手架项目，具体的vue-cli脚手架使用方法，还请浏览<a href="https://cli.vuejs.org/zh/">Vue CLI官网</a></p></li></ul><h3 id="2-安装Vue-CLI-Plugin-Electron-Builder"><a href="#2-安装Vue-CLI-Plugin-Electron-Builder" class="headerlink" title="2. 安装Vue CLI Plugin Electron Builder"></a>2. 安装Vue CLI Plugin Electron Builder</h3><ul><li><p>Vue CLI Plugin Electron Builder是一个基于Vue的插件 所以我们使用一下命令来安装</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">vue add electron-builder<br></code></pre></td></tr></table></figure><p>稍等片刻后…<br>额没错，你会发现等了很久，因为使用这个命令安装同样是需要下载electron-13版本的二进制预编译包的，现在我也没有找到其他办法，貌似只有等待。但是好像在下载了一遍之后，在其他新建的项目中就不会再下载了，可能是缓存到了本地，对此我也不是很懂，如果有懂的大佬麻烦评论区留言，谢谢！！</p></li><li><p>漫长的等待之后 我们来查看一下package.json文件<br>如果你的package.json文件和这个差不多 而且安装没有报错 就算是安装成功了</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><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><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><code class="hljs json"><span class="hljs-punctuation">{</span><br><span class="hljs-attr">"name"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"electron-app"</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"version"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"0.1.0"</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"description"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"electron-app"</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"author"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"VGhunter"</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"private"</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">true</span></span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"scripts"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"serve"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"vue-cli-service serve"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"build"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"vue-cli-service build"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"lint"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"vue-cli-service lint"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"electron:build"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"vue-cli-service electron:build"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"electron:serve"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"vue-cli-service electron:serve"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"postinstall"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"electron-builder install-app-deps"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"postuninstall"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"electron-builder install-app-deps"</span><span class="hljs-punctuation">,</span><br><span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"main"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"background.js"</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"dependencies"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"core-js"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^3.8.3"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"electron-icon-builder"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^2.0.1"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"vue"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^2.6.14"</span><br><span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"devDependencies"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"@babel/core"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^7.12.16"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"@babel/eslint-parser"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^7.12.16"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"@vue/cli-plugin-babel"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"~5.0.0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"@vue/cli-plugin-eslint"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"~5.0.0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"@vue/cli-service"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"~5.0.0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"electron"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"13.0.0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"electron-devtools-installer"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^3.1.0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"eslint"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^7.32.0"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"eslint-plugin-vue"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^8.0.3"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"nodemon"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^2.0.20"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"vue-cli-plugin-electron-builder"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^2.1.1"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"vue-template-compiler"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"^2.6.14"</span><br><span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"eslintConfig"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"root"</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">true</span></span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"env"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"node"</span><span class="hljs-punctuation">:</span> <span class="hljs-literal"><span class="hljs-keyword">true</span></span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"extends"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-string">"plugin:vue/essential"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-string">"eslint:recommended"</span><br> <span class="hljs-punctuation">]</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"parserOptions"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><br> <span class="hljs-attr">"parser"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"@babel/eslint-parser"</span><br> <span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br> <span class="hljs-attr">"rules"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">{</span><span class="hljs-punctuation">}</span><br><span class="hljs-punctuation">}</span><span class="hljs-punctuation">,</span><br><span class="hljs-attr">"browserslist"</span><span class="hljs-punctuation">:</span> <span class="hljs-punctuation">[</span><br> <span class="hljs-string">"> 1%"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-string">"last 2 versions"</span><span class="hljs-punctuation">,</span><br> <span class="hljs-string">"not dead"</span><br><span class="hljs-punctuation">]</span><br><span class="hljs-punctuation">}</span><br></code></pre></td></tr></table></figure></li><li><p>我们使用<code>npm run electron:serve</code>来看看是否能够启动应用</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm run electron:serve<br></code></pre></td></tr></table></figure><p>这个命令会自动先启动一遍vue-cli的服务在在启动electron服务<br>如果启动成功 则会出现一个window窗口 里面就是你的vue界面 代表插件安装正常</p></li></ul><h3 id="3-程序入口background-js文件"><a href="#3-程序入口background-js文件" class="headerlink" title="3. 程序入口background.js文件"></a>3. 程序入口background.js文件</h3><ul><li><p>在vue-electron-builder插件中，我们的electron的入口文件被放在<code>src</code>目录中 名为<code>background.js</code></p><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><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><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-meta"> 'use strict'</span><br><br><span class="hljs-keyword">import</span> { app, protocol, <span class="hljs-title class_">BrowserWindow</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'electron'</span><br><span class="hljs-keyword">import</span> { createProtocol } <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-cli-plugin-electron-builder/lib'</span><br><span class="hljs-keyword">import</span> installExtension, { <span class="hljs-variable constant_">VUEJS_DEVTOOLS</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'electron-devtools-installer'</span><br><span class="hljs-keyword">const</span> isDevelopment = process.<span class="hljs-property">env</span>.<span class="hljs-property">NODE_ENV</span> !== <span class="hljs-string">'production'</span><br><br><span class="hljs-comment">// Scheme must be registered before the app is ready</span><br>protocol.<span class="hljs-title function_">registerSchemesAsPrivileged</span>([<br> { <span class="hljs-attr">scheme</span>: <span class="hljs-string">'app'</span>, <span class="hljs-attr">privileges</span>: { <span class="hljs-attr">secure</span>: <span class="hljs-literal">true</span>, <span class="hljs-attr">standard</span>: <span class="hljs-literal">true</span> } }<br>])<br><br><span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">createWindow</span>(<span class="hljs-params"></span>) {<br> <span class="hljs-comment">// Create the browser window.</span><br> <span class="hljs-keyword">const</span> win = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BrowserWindow</span>({<br> <span class="hljs-attr">width</span>: <span class="hljs-number">800</span>,<br> <span class="hljs-attr">height</span>: <span class="hljs-number">600</span>,<br> <span class="hljs-attr">webPreferences</span>: {<br> <br> <span class="hljs-comment">// Use pluginOptions.nodeIntegration, leave this alone</span><br> <span class="hljs-comment">// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info</span><br> <span class="hljs-attr">nodeIntegration</span>: process.<span class="hljs-property">env</span>.<span class="hljs-property">ELECTRON_NODE_INTEGRATION</span>,<br> <span class="hljs-attr">contextIsolation</span>: !process.<span class="hljs-property">env</span>.<span class="hljs-property">ELECTRON_NODE_INTEGRATION</span><br> }<br> })<br><br> <span class="hljs-keyword">if</span> (process.<span class="hljs-property">env</span>.<span class="hljs-property">WEBPACK_DEV_SERVER_URL</span>) {<br> <span class="hljs-comment">// Load the url of the dev server if in development mode</span><br> <span class="hljs-keyword">await</span> win.<span class="hljs-title function_">loadURL</span>(process.<span class="hljs-property">env</span>.<span class="hljs-property">WEBPACK_DEV_SERVER_URL</span>)<br> <span class="hljs-keyword">if</span> (!process.<span class="hljs-property">env</span>.<span class="hljs-property">IS_TEST</span>) win.<span class="hljs-property">webContents</span>.<span class="hljs-title function_">openDevTools</span>()<br> } <span class="hljs-keyword">else</span> {<br> <span class="hljs-title function_">createProtocol</span>(<span class="hljs-string">'app'</span>)<br> <span class="hljs-comment">// Load the index.html when not in development</span><br> win.<span class="hljs-title function_">loadURL</span>(<span class="hljs-string">'app://./index.html'</span>)<br> win.<span class="hljs-title function_">removeMenu</span>()<br> }<br>}<br><br><span class="hljs-comment">// Quit when all windows are closed.</span><br>app.<span class="hljs-title function_">on</span>(<span class="hljs-string">'window-all-closed'</span>, <span class="hljs-function">() =></span> {<br> <span class="hljs-comment">// On macOS it is common for applications and their menu bar</span><br> <span class="hljs-comment">// to stay active until the user quits explicitly with Cmd + Q</span><br> <span class="hljs-keyword">if</span> (process.<span class="hljs-property">platform</span> !== <span class="hljs-string">'darwin'</span>) {<br> app.<span class="hljs-title function_">quit</span>()<br> }<br>})<br><br>app.<span class="hljs-title function_">on</span>(<span class="hljs-string">'activate'</span>, <span class="hljs-function">() =></span> {<br> <span class="hljs-comment">// On macOS it's common to re-create a window in the app when the</span><br> <span class="hljs-comment">// dock icon is clicked and there are no other windows open.</span><br> <span class="hljs-keyword">if</span> (<span class="hljs-title class_">BrowserWindow</span>.<span class="hljs-title function_">getAllWindows</span>().<span class="hljs-property">length</span> === <span class="hljs-number">0</span>) <span class="hljs-title function_">createWindow</span>()<br>})<br><br><span class="hljs-comment">// This method will be called when Electron has finished</span><br><span class="hljs-comment">// initialization and is ready to create browser windows.</span><br><span class="hljs-comment">// Some APIs can only be used after this event occurs.</span><br>app.<span class="hljs-title function_">on</span>(<span class="hljs-string">'ready'</span>, <span class="hljs-keyword">async</span> () => {<br> <span class="hljs-keyword">if</span> (isDevelopment && !process.<span class="hljs-property">env</span>.<span class="hljs-property">IS_TEST</span>) {<br> <span class="hljs-comment">// Install Vue Devtools</span><br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-keyword">await</span> <span class="hljs-title function_">installExtension</span>(<span class="hljs-variable constant_">VUEJS_DEVTOOLS</span>)<br> } <span class="hljs-keyword">catch</span> (e) {<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Vue Devtools failed to install:'</span>, e.<span class="hljs-title function_">toString</span>())<br> }<br> }<br> <span class="hljs-title function_">createWindow</span>()<br>})<br><br><span class="hljs-comment">// Exit cleanly on request from parent process in development mode.</span><br><span class="hljs-keyword">if</span> (isDevelopment) {<br> <span class="hljs-keyword">if</span> (process.<span class="hljs-property">platform</span> === <span class="hljs-string">'win32'</span>) {<br> process.<span class="hljs-title function_">on</span>(<span class="hljs-string">'message'</span>, <span class="hljs-function">(<span class="hljs-params">data</span>) =></span> {<br> <span class="hljs-keyword">if</span> (data === <span class="hljs-string">'graceful-exit'</span>) {<br> app.<span class="hljs-title function_">quit</span>()<br> }<br> })<br> } <span class="hljs-keyword">else</span> {<br> process.<span class="hljs-title function_">on</span>(<span class="hljs-string">'SIGTERM'</span>, <span class="hljs-function">() =></span> {<br> app.<span class="hljs-title function_">quit</span>()<br> })<br> }<br>}<br></code></pre></td></tr></table></figure></li><li><p>这里主要的逻辑写在<code>createWindow()</code>这个函数中 其中<code>BrowserWindow({...})</code>是创建一个windows窗口，你也可以自行new一个新的窗口在合适的时候弹出。</p></li><li><p><code>width</code>和<code>height</code>分别是设置窗口的长和宽，这里还有一些简单的属性,比如：</p><ol><li><code>show:true</code> 是否在程序启动时显示这个窗口。</li><li><code>frame:false</code>是否显示窗口边框</li><li><code>alwaysOnTop:true</code>窗口是否总是显示在最前面<br>…<br> 更多的请浏览Electron官网<a href="https://www.electronjs.org/zh/docs/latest/api/browser-window">API-BrowserWindow</a></li></ol></li><li><p>在<code>if (process.env.WEBPACK_DEV_SERVER_URL)</code>模块中，我们对窗口执行一些操作，比如<code>win.loadRUL(url)</code>是将url连接加载到<code>win</code>这个窗口中，而上面代码就是加载vue-cli服务的<code>https://loaclhost:8080</code>这个地址。使用<code>win.loadFile(path)</code>则是使用文件路径加载文件。</p><blockquote><p><strong>注意:</strong>关于这个地方有个坑：请跳 <strong><a href="#ken">这里</a></strong></p></blockquote></li><li><p><code>app.on('window-all-closed', () => {...}</code>意思是在所有窗口都关闭的时候，关闭程序。下面是几个简单常用的：</p><ol><li><code>win.show()</code>展示窗口并聚焦到顶部</li><li><code>win.destroy()</code>销毁窗口</li><li><code>win.focus()</code>聚焦窗口</li></ol></li><li><p>其他还有更多内容请浏览 <strong><a href="https://www.electronjs.org/zh/docs/latest/api/app">Electron官网 应用程序开发Api</a></strong></p></li></ul><h3 id="4-在窗口加载本地html文件"><a href="#4-在窗口加载本地html文件" class="headerlink" title="4. 在窗口加载本地html文件"></a>4. 在窗口加载本地html文件</h3><ul><li><p>由于在服务启动之后，你没有办法直接用路径去加载一个本地文件。<br>这里vue-electron-builder给出了一个全局变量<code>__static</code>,我们使用<code>path.json</code>方法创建一个路径，方法如下：</p><ol><li>将你想加载的html文件放到<code>public</code>文件目录中.</li><li>使用<code>path.json</code>来创建路径，并使用<code>win.loadFile()</code>来加载html文件。</li></ol> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> fileLocation = path.<span class="hljs-title function_">join</span>(__static, <span class="hljs-string">'preload.html'</span>)<br>win.<span class="hljs-title function_">loadFile</span>(fileLocation);<br></code></pre></td></tr></table></figure><p>这样 你就能在background.js中创建一个加载本地文件的窗口了…</p></li></ul><h3 id="5-去除窗口默认菜单栏"><a href="#5-去除窗口默认菜单栏" class="headerlink" title="5. 去除窗口默认菜单栏"></a>5. 去除窗口默认菜单栏</h3><ul><li><p>在一个应用程序项目中 我们不可能去使用electron的默认菜单栏 怎么去除呢？有下面几种方法:</p><ol><li>引入<code>Menu</code>方法，在<code>app.on('ready',()=>{...})</code>中添加<code>Menu.setApplicationMenu(null)</code>：</li></ol> <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><code class="hljs javascript">app.<span class="hljs-title function_">on</span>(<span class="hljs-string">'ready'</span>, <span class="hljs-keyword">async</span> () => {<br> <span class="hljs-keyword">if</span> (isDevelopment && !process.<span class="hljs-property">env</span>.<span class="hljs-property">IS_TEST</span>) {<br> <span class="hljs-comment">// Install Vue Devtools</span><br> <span class="hljs-keyword">try</span> {<br> <span class="hljs-keyword">await</span> <span class="hljs-title function_">installExtension</span>(<span class="hljs-variable constant_">VUEJS_DEVTOOLS</span>)<br> } <span class="hljs-keyword">catch</span> (e) {<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">error</span>(<span class="hljs-string">'Vue Devtools failed to install:'</span>, e.<span class="hljs-title function_">toString</span>())<br> }<br> }<br> <span class="hljs-title function_">createWindow</span>()<br> <span class="hljs-title class_">Menu</span>.<span class="hljs-title function_">setApplicationMenu</span>(<span class="hljs-literal">null</span>); <span class="hljs-comment">//去除默认菜单栏</span><br>})<br></code></pre></td></tr></table></figure><ol start="2"><li>使用<code>win.setMenu(null);</code></li></ol> <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></pre></td><td class="code"><pre><code class="hljs javascript">app.<span class="hljs-title function_">on</span>(<span class="hljs-string">'browser-window-created'</span>, <span class="hljs-keyword">function</span> (<span class="hljs-params">event, <span class="hljs-variable language_">window</span></span>) {<br> <span class="hljs-variable language_">window</span>.<span class="hljs-title function_">setMenu</span>(<span class="hljs-literal">null</span>);<br>});<br></code></pre></td></tr></table></figure><p> 也可以直接在<code>createWindow()</code>函数对所需要操作的窗口使用。</p><ol start="3"><li>使用<code>win.removeMenu()</code>,直接在<code>createWindow()</code>函数中对所需要的窗口使用</li></ol> <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></pre></td><td class="code"><pre><code class="hljs javascript">...<br><span class="hljs-keyword">const</span> load = <span class="hljs-keyword">new</span> <span class="hljs-title class_">BrowserWindow</span>({<br> <span class="hljs-attr">width</span>: <span class="hljs-number">550</span>,<br> <span class="hljs-attr">height</span>: <span class="hljs-number">300</span>,<br> <span class="hljs-attr">show</span>:<span class="hljs-literal">true</span>,<br> <span class="hljs-attr">frame</span>:<span class="hljs-literal">false</span>,<br> <span class="hljs-comment">// resizable: true //用于可调整窗口大小(貌似没用)</span><br> <span class="hljs-attr">alwaysOnTop</span>:<span class="hljs-literal">true</span>,<br>})<br>...<br>load.<span class="hljs-title function_">removeMenu</span>() <span class="hljs-comment">//移除load窗口的默认菜单栏</span><br></code></pre></td></tr></table></figure><p>当然如果你先创建自己的菜单栏也是可以的，请浏览 <strong><a href="https://www.electronjs.org/zh/docs/latest/api/menu">Menu</a></strong></p></li></ul><h3 id="6-打包应用程序"><a href="#6-打包应用程序" class="headerlink" title="6. 打包应用程序"></a>6. 打包应用程序</h3><blockquote><p><strong id="ken">注意：</strong>在打包之前这里要讲一个我自己遇到的坑！在background.js文件夹中，我们在开发阶段测试时的代码都时写在<code>if (process.env.WEBPACK_DEV_SERVER_URL) {...}</code>中的，这时如果你打包，会发现写的任何逻辑都无效了。因为这个模块里面是写开发时的逻辑的，而如果不是开发时的代码要写在下面的 <code>else</code>模块中！！巨坑呀，我也是没有注意到有英文提示，整了我好久…没想到是写错位置了/(ㄒoㄒ)/~~</p></blockquote><ul><li><p>使用<code>npm run electron:build</code>来将项目打包成桌面程序<br> 打包成功之后 根目录会出现新的文件夹<code>dist_electron</code>,里面就是打包好的应用程序。</p></li><li><p>修改打包设置，图标、安装路径等…</p><ol><li><p>先将图片裁剪成正确的大小和格式，使用 <strong><a href="https://github.com/safu9/electron-icon-builder">electron-icon-builder</a></strong><br> 安装插件：</p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm install -g electron-icon-builder<br></code></pre></td></tr></table></figure><p> 在<code>package.json</code>文件中的<code>script</code>中添加命令：</p> <figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs json"><span class="hljs-attr">"build-icon"</span><span class="hljs-punctuation">:</span> <span class="hljs-string">"electron-icon-builder --input=./public/logo.jpg --output=build --flatten"</span><br></code></pre></td></tr></table></figure><p> 其中<code>--input</code>为你需要裁剪的图片路径，<code>--output</code>为你的图片出路径<br> 使用插件：</p> <figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs bash">npm run build-icon<br></code></pre></td></tr></table></figure></li><li><p>在根目录原有的<code>vue.config.js</code> 文件中添加配置：</p> <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><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><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">const</span> { defineConfig } = <span class="hljs-built_in">require</span>(<span class="hljs-string">'@vue/cli-service'</span>)<br><span class="hljs-variable language_">module</span>.<span class="hljs-property">exports</span> = <span class="hljs-title function_">defineConfig</span>({<br> <span class="hljs-attr">transpileDependencies</span>: <span class="hljs-literal">true</span>,<br> <span class="hljs-attr">pluginOptions</span>: {<br> <span class="hljs-attr">electronBuilder</span>: {<br> <span class="hljs-attr">builderOptions</span>: {<br> <span class="hljs-attr">appId</span>: <span class="hljs-string">"184789"</span>,<br> <span class="hljs-attr">productName</span>: <span class="hljs-string">"electronApp"</span>, <span class="hljs-comment">//项目名，也是生成的安装文件名，即aDemo.exe</span><br> <span class="hljs-attr">copyright</span>: <span class="hljs-string">"nicnic © 2022"</span>, <span class="hljs-comment">//版权信息</span><br> <span class="hljs-attr">directories</span>: {<br> <span class="hljs-attr">output</span>: <span class="hljs-string">"./dist"</span> <span class="hljs-comment">//输出文件路径</span><br> },<br> <span class="hljs-attr">win</span>: {<br> <span class="hljs-comment">//win相关配置</span><br> <span class="hljs-attr">icon</span>: <span class="hljs-string">"./build/icons/icon.ico"</span>, <span class="hljs-comment">//图标，当前图标在根目录下，注意这里有两个坑</span><br> <span class="hljs-attr">target</span>: [<br> {<br> <span class="hljs-attr">target</span>: <span class="hljs-string">"nsis"</span>, <span class="hljs-comment">//利用nsis制作安装程序,打包文件的后缀为exe</span><br> <span class="hljs-attr">arch</span>: [<br> <span class="hljs-string">"x64"</span>, <span class="hljs-comment">//64位</span><br> <span class="hljs-string">"ia32"</span> <span class="hljs-comment">//32位</span><br> ]<br> }<br> ]<br> },<br> <span class="hljs-attr">nsis</span>: {<br> <span class="hljs-attr">oneClick</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">//一键安装</span><br> <span class="hljs-attr">language</span>: <span class="hljs-string">"2052"</span>, <span class="hljs-comment">//安装语言</span><br> <span class="hljs-attr">perMachine</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">//应用所有用户</span><br> <span class="hljs-attr">allowToChangeInstallationDirectory</span>: <span class="hljs-literal">true</span> <span class="hljs-comment">//用户可以选择路径</span><br> }<br> }<br> }<br> }<br>})<br></code></pre></td></tr></table></figure><p> 这时候我们再使用<code>npm run electron:build</code>,就会<code>dist</code>文件夹中出现已经打包好的应用程序文件夹和应哟安装程序了，而且图标和选择安装路径功能都实现了！<br> 更多的配置请自行研究<a href="https://www.electron.build/">electron-builder</a></p></li></ol></li></ul><h2 id="最后"><a href="#最后" class="headerlink" title="最后"></a>最后</h2><p>到这里关于electron+vue-cli的简单分享就完成了，因为第一次认真写文章，废话也有点多，还请见谅！如果你也成功的创建了一个electron应用，请留言评论告诉我吧，如果在文章中有哪里有问题，欢迎到评论区提出！！！</p><ul><li>参考文档<br><a href="https://juejin.cn/post/7086256935317536804">https://juejin.cn/post/7086256935317536804</a><br><a href="https://www.electronjs.org/zh/">https://www.electronjs.org/zh/</a><br><a href="https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports">https://cli.vuejs.org/guide/html-and-static-assets.html#relative-path-imports</a><br><a href="https://chat.openai.com/">https://chat.openai.com/</a><br><a href="https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#preload-files">https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/guide.html#preload-files</a></li></ul>]]></content>
</entry>
</search>