-
Notifications
You must be signed in to change notification settings - Fork 0
/
atom.xml
510 lines (298 loc) · 101 KB
/
atom.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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>reahink</title>
<link href="/atom.xml" rel="self"/>
<link href="https://zqinmiao.github.io/"/>
<updated>2018-03-15T15:25:18.000Z</updated>
<id>https://zqinmiao.github.io/</id>
<author>
<name>reahink</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>嵩山之行</title>
<link href="https://zqinmiao.github.io/details/44251/"/>
<id>https://zqinmiao.github.io/details/44251/</id>
<published>2018-03-15T15:03:44.000Z</published>
<updated>2018-03-15T15:25:18.000Z</updated>
<content type="html"><![CDATA[<p>戊戌狗年正月初六，2018年2月21日，中岳嵩山一日游。<br><br></p><p>岳父，岳母，小惠，姐姐，我们一行五人，早晨九点出发，驱车两个小时至嵩山少室山下。山门下游人熙攘，映入眼前的山门横书“天下第一名刹”。<br><img src="./1.jpg" alt="Alt MVC"><br><br></p><p>向前走约莫一公里，也就到了寺前。寺门前摩肩接踵，红灯笼高挂。不禁感概，也许千百年前的僧人怎么也不会想到，如今竟有如此多的慕名前来者。也或许，曾经的太平盛世，也曾出现过如此人山人海的盛况也未可知。<br><img src="./2.jpg" alt="Alt MVC"><br><br></p><p>我对诸佛并无太多兴致，倒是对寺中碑文想要拜读拜读。无奈游客太多，又加上同行匆匆，只能寄托他日再见，定当细细感受千年禅寺的博大精深。<br><br></p><p>逛完少林寺，继续往山林深处走，接下来就是塔林。千年塔林，我等后辈贸然打扰，望各已归西天的圣僧恕罪。<br><br></p><p>雪后转晴的嵩山好像还未醒来，从山脚下往上看，群山还笼罩在一片朦胧中。乘坐缆车，随着渐渐升高，嵩山也揭开了它的面纱。<br><img src="./3.jpg" alt="Alt MVC"><br><br></p><p>山上冬日的树叶呈现着一种枯黄的红色，像红色经冬日的寒风冲刷褪色一般。林间上又隐隐约约的像洒了一层白沙，那是还未融化殆尽的薄雪。<br><img src="./4.jpg" alt="Alt MVC"><br><br></p><p>缆车停在山顶，依在一块巨石山顶。山顶上铺上了一层薄雪，像是一位年事已高白了头的高僧。对面的山顶，以山脊为界线，一面有雪，一面无雪，甚是奇妙。远处连绵的山脉，一道道山脊也划出一道道分界线。<br><img src="./5.jpg" alt="Alt MVC"><br><img src="./6.jpg" alt="Alt MVC"><br><br></p><p>沿着山路前行，不远处即是“嵩山栈道”。栈道依悬崖峭壁而建，通向山内的三皇寨，然后再通向另一条下山路。走在栈道上，眼前是一座座有“嵩山石笋”组成的山峰，看一层一层的石笋，突然来了食欲不禁想咬上一口。<br><img src="./7.jpg" alt="Alt MVC"><br><img src="./8.jpg" alt="Alt MVC"><br><img src="./9.jpg" alt="Alt MVC"><br><br></p><p>虽然天已经晴了，但是山上的积雪还未融化，所以栈道的阶梯异常的滑，导致我们上山的速度慢了一半。一面小心翼翼的爬，一面望着远处的三皇寨和连天吊桥如此的远，不时让人萌生退意。<br><br></p><p>在山中看山不觉得山的雄伟，当看到远处山腰上栈道的行人时，才会深深的感叹人类的渺小及山的巍峨。<br><img src="./10.jpg" alt="Alt MVC"><br><img src="./11.jpg" alt="Alt MVC"><br><br></p><p>由于天色将晚，最终我们只到了连天吊桥。冬日雪晴的嵩山，为登山增添了不少别致，还真是不虚此行。</p>]]></content>
<summary type="html">
<p>戊戌狗年正月初六，2018年2月21日，中岳嵩山一日游。<br><br></p>
<p>岳父，岳母，小惠，姐姐，我们一行五人，早晨九点出发，驱车两个小时至嵩山少室山下。山门下游人熙攘，映入眼前的山门横书“天下第一名刹”。<br><img src="./1.jpg" alt=
</summary>
<category term="随笔" scheme="https://zqinmiao.github.io/categories/%E9%9A%8F%E7%AC%94/"/>
<category term="游记" scheme="https://zqinmiao.github.io/tags/%E6%B8%B8%E8%AE%B0/"/>
</entry>
<entry>
<title>React官方文档知识点归纳-1</title>
<link href="https://zqinmiao.github.io/details/50305/"/>
<id>https://zqinmiao.github.io/details/50305/</id>
<published>2018-02-08T02:14:52.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>阅读了一下React的官方文档，翻译并归纳了一些知识点。这只是QUICK START部分<br><a id="more"></a></p></blockquote><h2 id="JSX语法："><a href="#JSX语法：" class="headerlink" title="JSX语法："></a>JSX语法：</h2><h3 id="元素属性名命名规则"><a href="#元素属性名命名规则" class="headerlink" title="元素属性名命名规则"></a>元素属性名命名规则</h3><ul><li><strong>属性名采用camelCase命名法，比如，类（class）就叫：’className’，tabindex就叫：’tabIndex’。<a href="https://reactjs.org/docs/introducing-jsx.html#specifying-attributes-with-jsx" target="_blank" rel="noopener">引用</a></strong></li></ul><h2 id="组件"><a href="#组件" class="headerlink" title="组件"></a>组件</h2><ul><li><strong>命名规则：始终以大写字母开头。<a href="https://reactjs.org/docs/components-and-props.html#rendering-a-component" target="_blank" rel="noopener">引用</a></strong></li><li><font color="red"><strong><a href="https://reactjs.org/docs/components-and-props.html#props-are-read-only" target="_blank" rel="noopener">React is pretty flexible but it has a single strict rule :</a></strong> <strong>All React components must act like pure functions with respect to their props.</strong></font></li></ul><h3 id="组件状态（state）"><a href="#组件状态（state）" class="headerlink" title="组件状态（state）"></a>组件状态（state）</h3><ul><li><strong>不要直接修改状态</strong></li></ul><pre><code>// 错误的this.state.comment = 'Hello';</code></pre><pre><code>// 正确的this.setState({comment: 'Hello'});</code></pre><p><strong>唯一可以指定this.state的地方是构造函数。</strong></p><ul><li><strong>因为this.props和this.state可能会异步更新，所以不应该依赖它们的值来计算下一个状态。</strong></li></ul><pre><code>// 错误this.setState({ counter: this.state.counter + this.props.increment,});</code></pre><pre><code>// 正确this.setState((prevState, props) => ({ counter: prevState.counter + props.increment}));</code></pre><pre><code>// 正确this.setState(function(prevState, props) { return { counter: prevState.counter + props.increment };});</code></pre><ul><li>This is commonly called a “top-down” or “unidirectional” data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree.</li></ul><h2 id="状态与生命周期（State-and-Lifecycle）"><a href="#状态与生命周期（State-and-Lifecycle）" class="headerlink" title="状态与生命周期（State and Lifecycle）"></a><a href="https://reactjs.org/docs/state-and-lifecycle.html" target="_blank" rel="noopener">状态与生命周期（State and Lifecycle）</a></h2><ul><li><strong>componentDidMount()</strong></li><li><strong>componentWillUnmount()</strong></li></ul><h2 id="处理事件（Handling-Events）"><a href="#处理事件（Handling-Events）" class="headerlink" title="处理事件（Handling Events）"></a>处理事件（Handling Events）</h2><ul><li><strong><a href="https://reactjs.org/docs/handling-events.html" target="_blank" rel="noopener">React事件使用camelCase命名，而不是小写。</a></strong></li><li><strong><a href="https://reactjs.org/docs/handling-events.html" target="_blank" rel="noopener">使用JSX，您将传递一个函数作为事件处理程序，而不是字符串。</a></strong></li></ul><p>For example, the HTML:</p><pre><code><button onclick="activateLasers()"> Activate Lasers</button></code></pre><p>in React:</p><pre><code><button onClick={activateLasers}> Activate Lasers</button></code></pre><ul><li><strong>另一个区别是你不能返回false来防止React中的默认行为。您必须显式调用preventDefault。例如，对于纯HTML，为了防止打开新页面的默认链接行为，可以这样写：</strong></li></ul><pre><code><a href="#" onclick="console.log('The link was clicked.'); return false"> Click me</a></code></pre><p>in React:</p><pre><code>function ActionLink() { function handleClick(e) { e.preventDefault(); console.log('The link was clicked.'); } return ( <a href="#" onClick={handleClick}> Click me </a> );}</code></pre><h2 id="条件渲染（Conditional-Rendering）"><a href="#条件渲染（Conditional-Rendering）" class="headerlink" title="条件渲染（Conditional Rendering）"></a><a href="https://reactjs.org/docs/conditional-rendering.html" target="_blank" rel="noopener">条件渲染（Conditional Rendering）</a></h2><h2 id="列表和键（Lists-and-Keys）"><a href="#列表和键（Lists-and-Keys）" class="headerlink" title="列表和键（Lists and Keys）"></a><a href="https://reactjs.org/docs/lists-and-keys.html" target="_blank" rel="noopener">列表和键（Lists and Keys）</a></h2><ul><li><strong>关于列表中的key的添加的正确用法</strong></li></ul><pre><code>//错误的写法function ListItem(props) { const value = props.value; return ( // Wrong! There is no need to specify the key here: <li key={value.toString()}> {value} </li> );}function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // Wrong! The key should have been specified here: <ListItem value={number} /> ); return ( <ul> {listItems} </ul> );}const numbers = [1, 2, 3, 4, 5];ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root'));</code></pre><pre><code>//正确的写法function ListItem(props) { // Correct! There is no need to specify the key here: return <li>{props.value}</li>;}function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => // Correct! Key should be specified inside the array. <ListItem key={number.toString()} value={number} /> ); return ( <ul> {listItems} </ul> );}const numbers = [1, 2, 3, 4, 5];ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root'));</code></pre><ul><li><p><strong>key在兄弟元素之间必须是唯一的</strong></p></li><li><p><strong>在JSX中插入map()</strong></p></li></ul><pre><code>function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); return ( <ul> {listItems} </ul> );}</code></pre><h2 id="表单（Forms）"><a href="#表单（Forms）" class="headerlink" title="表单（Forms）"></a><a href="https://reactjs.org/docs/forms.html" target="_blank" rel="noopener">表单（Forms）</a></h2><h2 id="状态提升（Lifting-State-Up）"><a href="#状态提升（Lifting-State-Up）" class="headerlink" title="状态提升（Lifting State Up）"></a><a href="https://reactjs.org/docs/forms.html" target="_blank" rel="noopener"><font color="red">状态提升（Lifting State Up）</font></a></h2><h2 id="构成与继承（Composition-vs-Inheritance））"><a href="#构成与继承（Composition-vs-Inheritance））" class="headerlink" title="构成与继承（Composition vs Inheritance））"></a><a href="https://reactjs.org/docs/composition-vs-inheritance.html" target="_blank" rel="noopener">构成与继承（Composition vs Inheritance））</a></h2>]]></content>
<summary type="html">
<blockquote>
<p>阅读了一下React的官方文档，翻译并归纳了一些知识点。这只是QUICK START部分<br>
</summary>
<category term="框架" scheme="https://zqinmiao.github.io/categories/%E6%A1%86%E6%9E%B6/"/>
<category term="React" scheme="https://zqinmiao.github.io/tags/React/"/>
</entry>
<entry>
<title>古镇，仿古的步行街</title>
<link href="https://zqinmiao.github.io/details/38305/"/>
<id>https://zqinmiao.github.io/details/38305/</id>
<published>2017-10-04T06:40:19.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<p>正值国庆加中秋长假，陪小惠回老丈人家，已在家三日，雨水不停。</p><p>于10月2日，求婚成功，是谓求婚纪念日。恐日后追问起来，特此记下。</p><p>今雨天依旧，在屋闲坐，无所事事，遂想起月前游古镇，补一篇游后感。</p><p>2017年9月16日，丁酉年己酉月。我们一行七人，驾车去游乌镇。</p><p>古镇诸如西塘、乌镇，自认为形式雷同，人文淡薄，商业浓厚。</p><p>乌镇除了西栅和东栅，乌镇东栅旁的老街让我彼具好感，不在景区内，融于市井中。各色店铺，古玩手工，浏览于中，没有景区内人多噪杂。走进一家小店，驻留片刻，欣赏一下手工艺人的作品，还是很惬意的。</p><p>在我看来，古镇更像是装饰古朴的步行街。建筑古朴，却缺少了不少人文的灵气。去了两次古镇（乌镇、西塘），形式类同，无非大小有异，至于美景还是有的，只是我不很喜欢。我是没有了对古镇的遐想了，以后也无再去的欲望，那如若陪人，还是要去的。哈哈。</p><p>每去一处，品尝当地特色美食自然必不可少，在景区内，吃了一家并不好吃，而且价钱稍贵。临走前，特地网上搜了一下，选了一家排名靠前的小餐馆，地处东栅旁，店面不大，菜价比景区内便宜不少。点的菜中，清蒸白水鱼、古镇羊肉、外婆三宝，这三样印象最深，味道较好。</p><p>店内一老婆婆甚是热情，吃饭间隙，不断入屋寒暄，让我们吃好喝好。众人受宠若惊，感慨古镇民风真是热情。间隙又不断查看，身后领一众食客，众人恍悟，原来此热情有几分侦查之意，恐我们吃的过慢，有催促之意。无奈我们稍后有又点一盘螺丝，慢慢品味。吃还是要吃好的，而且要慢慢吃，这才不枉吃货一行。</p><p><br><br>2017年10月4日，农历八月十五。</p>]]></content>
<summary type="html">
<p>正值国庆加中秋长假，陪小惠回老丈人家，已在家三日，雨水不停。</p>
<p>于10月2日，求婚成功，是谓求婚纪念日。恐日后追问起来，特此记下。</p>
<p>今雨天依旧，在屋闲坐，无所事事，遂想起月前游古镇，补一篇游后感。</p>
<p>2017年9月16日，丁酉年己酉月。
</summary>
<category term="随笔" scheme="https://zqinmiao.github.io/categories/%E9%9A%8F%E7%AC%94/"/>
<category term="游记" scheme="https://zqinmiao.github.io/tags/%E6%B8%B8%E8%AE%B0/"/>
</entry>
<entry>
<title>使用vue开发项目梳理及需要掌握的知识点</title>
<link href="https://zqinmiao.github.io/details/29189/"/>
<id>https://zqinmiao.github.io/details/29189/</id>
<published>2017-09-13T06:57:14.000Z</published>
<updated>2018-03-14T09:29:44.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>需要在部门内部做一个关于vue的培训，所以也就写了一个文档，来梳理一下vue的开发，及一些知识点<br><a id="more"></a></p></blockquote><h2 id="一、开发环境搭建"><a href="#一、开发环境搭建" class="headerlink" title="一、开发环境搭建"></a>一、开发环境搭建</h2><h3 id="1-安装node-js"><a href="#1-安装node-js" class="headerlink" title="1.安装node.js"></a>1.安装node.js</h3><p><a href="https://nodejs.org/zh-cn/" target="_blank" rel="noopener">下载node.js</a></p><p>安装—>一路next—>完成</p><p>winows下打开cmd（mac下打开终端）,输入以下命令，输出后都能输出版本号，既是安装成功</p><pre><code>$ node -vv6.11.3$ npm -v3.10.10</code></pre><p><strong>由于npm服务器在国外，国内使用时会比较卡，所以我们需要使用<a href="https://npm.taobao.org/" target="_blank" rel="noopener">cnpm(淘宝 NPM 镜像)</a>来代替npm</strong></p><h4 id="cnpm使用说明"><a href="#cnpm使用说明" class="headerlink" title="cnpm使用说明"></a>cnpm使用说明</h4><p>使用定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:</p><pre><code>npm install -g cnpm --registry=https://registry.npm.taobao.org# 安装成功后就可以使用cnpm命令来安装模块了$ cnpm install [name]</code></pre><h3 id="2-安装vue-cli"><a href="#2-安装vue-cli" class="headerlink" title="2.安装vue-cli"></a>2.安装vue-cli</h3><pre><code># 安装 vue-cli$ npm install --global vue-cli$ vue --version2.8.2</code></pre><hr><h2 id="二、相关知识点-不是必须"><a href="#二、相关知识点-不是必须" class="headerlink" title="二、相关知识点(不是必须)"></a>二、相关知识点(不是必须)</h2><h3 id="1-模式"><a href="#1-模式" class="headerlink" title="1.模式"></a>1.模式</h3><h4 id="MVC模式"><a href="#MVC模式" class="headerlink" title="MVC模式"></a>MVC模式</h4><p>代表：<a href="http://backbonejs.org/" target="_blank" rel="noopener">backbone.js</a><br><img src="./MVC.png" alt="MVC"></p><h4 id="MVVM"><a href="#MVVM" class="headerlink" title="MVVM"></a>MVVM</h4><p>代表：<a href="https://angular.cn/" target="_blank" rel="noopener">AngularJs</a>、<a href="https://facebook.github.io/react/" target="_blank" rel="noopener">React</a>、<a href="https://vuefe.cn/v2/guide/" target="_blank" rel="noopener">Vue</a><br><img src="./MVVM.png" alt="MVVM"></p><h3 id="2-前端模块化"><a href="#2-前端模块化" class="headerlink" title="2.前端模块化"></a>2.前端模块化</h3><h4 id="1-Sea-js"><a href="#1-Sea-js" class="headerlink" title="1.Sea.js"></a>1.<a href="https://github.com/seajs/seajs" target="_blank" rel="noopener">Sea.js</a></h4><p>在 Sea.js 中，所有 JavaScript 模块都遵循 CMD（Common Module Definition） 模块定义规范。</p><p>在 CMD 规范中，一个模块就是一个文件。</p><h4 id="2-RequireJS"><a href="#2-RequireJS" class="headerlink" title="2.RequireJS"></a>2.<a href="http://requirejs.org/" target="_blank" rel="noopener">RequireJS</a></h4><p>RequireJS 遵循 AMD（异步模块定义）规范</p><p><strong><a href="https://github.com/seajs/seajs/issues/277" target="_blank" rel="noopener">RequireJS 和 Sea.js的差异</a></strong></p><h4 id="3-CommonJS-规范"><a href="#3-CommonJS-规范" class="headerlink" title="3.CommonJS 规范"></a>3.<a href="http://zhaoda.net/webpack-handbook/commonjs.html" target="_blank" rel="noopener">CommonJS 规范</a></h4><p>node采用的就是这种规范</p><p>CommonJS 规范是为了解决 JavaScript 的作用域问题而定义的模块形式，可以使每个模块它自身的命名空间中执行。该规范的主要内容是，模块必须通过 module.exports 导出对外的变量或接口，通过 require() 来导入其他模块的输出到当前模块作用域中。</p><h4 id="5-webpack（最好了解下）"><a href="#5-webpack（最好了解下）" class="headerlink" title="5.webpack（最好了解下）"></a>5.<a href="https://doc.webpack-china.org/concepts/" target="_blank" rel="noopener">webpack</a>（最好了解下）</h4><p><a href="https://github.com/dwqs/blog/issues/21" target="_blank" rel="noopener">参考文章：详解前端模块化工具-Webpack</a></p><p>Webpack具有requireJs和<a href="http://browserify.org/" target="_blank" rel="noopener">browserify</a>的功能，但仍有很多自己的新特性：</p><ol><li>对 CommonJS 、 AMD 、ES6的语法做了兼容</li><li>对js、css、图片等资源文件都支持打包</li><li>串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持</li><li>有独立的配置文件webpack.config.js</li><li>可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间</li><li>支持 SourceUrls 和 SourceMaps，易于调试</li><li>具有强大的Plugin接口，大多是内部插件，使用起来比较灵活</li><li>webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快</li></ol><h3 id="3-语法-amp-node-模块"><a href="#3-语法-amp-node-模块" class="headerlink" title="3.语法 & node/模块"></a>3.语法 & node/模块</h3><h4 id="1-es2015（都什么年代了，还是熟练起来吧）"><a href="#1-es2015（都什么年代了，还是熟练起来吧）" class="headerlink" title="1. es2015（都什么年代了，还是熟练起来吧）"></a>1. <a href="http://es6.ruanyifeng.com/" target="_blank" rel="noopener">es2015</a>（都什么年代了，还是熟练起来吧）</h4><p><a href="http://es6.ruanyifeng.com/#docs/style" target="_blank" rel="noopener">编程风格的改变</a></p><h4 id="2-babel（咋回事总该要知道吧）"><a href="#2-babel（咋回事总该要知道吧）" class="headerlink" title="2. babel（咋回事总该要知道吧）"></a>2. <a href="http://babeljs.cn/" target="_blank" rel="noopener">babel</a>（咋回事总该要知道吧）</h4><p>Babel 是一个 JavaScript 编译器</p><h4 id="3-node-API"><a href="#3-node-API" class="headerlink" title="3. node API"></a>3. <a href="http://nodejs.cn/api/" target="_blank" rel="noopener">node API</a></h4><p><a href="http://nodejs.cn/api/path.html" target="_blank" rel="noopener">path (路径)</a>webpack中会遇到像：<code>path.resolve(__dirname, '...')</code>这样的语法</p><h4 id="4-express（这个可以不看）"><a href="#4-express（这个可以不看）" class="headerlink" title="4. express（这个可以不看）"></a>4. <a href="http://expressjs.com/zh-cn/4x/api.html" target="_blank" rel="noopener">express</a>（这个可以不看）</h4><h4 id="5-request（看看也没什么，很简单）"><a href="#5-request（看看也没什么，很简单）" class="headerlink" title="5. request（看看也没什么，很简单）"></a>5. <a href="https://www.npmjs.com/package/request" target="_blank" rel="noopener">request</a>（看看也没什么，很简单）</h4><hr><h2 id="三、Vue"><a href="#三、Vue" class="headerlink" title="三、Vue"></a>三、Vue</h2><h3 id="1-vue官方介绍-官网"><a href="#1-vue官方介绍-官网" class="headerlink" title="1. vue官方介绍 官网"></a>1. vue官方介绍 <a href="https://vuefe.cn/v2/guide/" target="_blank" rel="noopener">官网</a></h3><p>Vue.js（读音 /vjuː/，类似于 view 的读音）是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是，Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层，并且很容易与其他第三方库或现有项目集成。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供有力驱动。</p><p>总结就是：</p><ol><li>良好的生态系统：<a href="https://github.com/vuejs/awesome-vue#components--libraries" target="_blank" rel="noopener">生态系统支持的库</a></li><li>MVVM的模式，数据的双向绑定</li><li>使用Virtual(虚拟) DOM</li><li>将注意力集中保持在核心库，同时也关注路由和负责处理全局状态管理的辅助库</li><li>提供了响应式(reactive)和可组合的视图组件(composable view component)。</li><li>使用<a href="https://vuefe.cn/v2/guide/single-file-components.html" target="_blank" rel="noopener">单文件组件</a>，结合webpack+<a href="https://vue-loader.vuejs.org/zh-cn/" target="_blank" rel="noopener">vue-loader</a>将vue组件转换为JavaScript 模块</li><li>结合webpack,可使用最新的JS语法或TypeScript</li></ol><p><strong>想要了解更多，请查看：<a href="https://vuefe.cn/v2/guide/comparison.html" target="_blank" rel="noopener">对比其他框架</a></strong></p><h3 id="2-什么是Virtual-虚拟-DOM"><a href="#2-什么是Virtual-虚拟-DOM" class="headerlink" title="2.什么是Virtual(虚拟) DOM ?"></a>2.什么是Virtual(虚拟) DOM ?</h3><p><a href="https://www.zhihu.com/question/29504639/answer/73607810" target="_blank" rel="noopener">参考知乎问题：如何理解虚拟DOM?</a></p><p>首先，DOM是很慢的。</p><p>相对于 DOM 对象，原生的 JavaScript 对象处理起来更快，而且更简单。DOM 树上的结构、属性信息我们都可以很容易地用 JavaScript 对象表示出来：</p><pre><code>var element = { tagName: 'ul', // 节点标签名 props: { // DOM的属性，用一个对象存储键值对 id: 'list' }, children: [ // 该节点的子节点 {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]}, {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]}, {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]}, ]}</code></pre><p>上面对应的HTML写法是：</p><pre><code><ul id='list'> <li class='item'>Item 1</li> <li class='item'>Item 2</li> <li class='item'>Item 3</li></ul></code></pre><p><strong>Virtual DOM 算法包括几个步骤：</strong></p><ol><li>用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中</li><li>当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异</li><li>把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了</li><li>Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。</li></ol><h3 id="3-流行的vue库"><a href="#3-流行的vue库" class="headerlink" title="3.流行的vue库"></a>3.流行的vue库</h3><p><a href="https://router.vuejs.org/zh-cn/" target="_blank" rel="noopener">vue-router（vue路由）</a></p><p><a href="https://vuex.vuejs.org/zh-cn/" target="_blank" rel="noopener">vuex（vue状态管理）</a></p><p><a href="https://github.com/mzabriskie/axios" target="_blank" rel="noopener">axios（基于Promise的http请求库）</a></p><p>UI框架：</p><p><a href="http://element.eleme.io/#/zh-CN" target="_blank" rel="noopener">element ui</a></p><p><a href="https://www.iviewui.com/" target="_blank" rel="noopener">iView</a></p><p><a href="https://vux.li/#/zh-CN/README" target="_blank" rel="noopener">vux</a></p><p><a href="http://mint-ui.github.io/#!/zh-cn" target="_blank" rel="noopener">Mint UI</a></p><hr><h2 id="四、实战"><a href="#四、实战" class="headerlink" title="四、实战"></a>四、实战</h2><h3 id="1-使用vue脚手架来搭建一个基于webpack模版的项目"><a href="#1-使用vue脚手架来搭建一个基于webpack模版的项目" class="headerlink" title="1.使用vue脚手架来搭建一个基于webpack模版的项目"></a>1.使用vue脚手架来搭建一个基于webpack模版的项目</h3><pre><code># 安装 vue-cli$ npm install --global vue-cli# 使用 "webpack" 模板创建一个名为“Vue-webpack”的新项目$ vue init webpack Vue-Admin //执行? Project name (Vue-webpack) vue-webpack //回车$ 如果出现以下信息，意思是，项目名称不能有大写字母>> Sorry, name can no longer contain capital letters.? Project description (A Vue.js project) //输入项目描述，回车? Author (xxx <[email protected]>) //回车# 出现下面的提示，回车? Vue build (Use arrow keys)❯ Runtime + Compiler: recommended for most users Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere? Install vue-router? (Y/n) y //输入 y,回车? Use ESLint to lint your code? (Y/n) n //输入 n,回车? Setup unit tests with Karma + Mocha? (Y/n) n //输入 n,回车? Setup e2e tests with Nightwatch? (Y/n) n //输入 n,回车初始化一个基于vue的前端项目完成# 安装依赖，然后开始！$ cd vue-webpack$ npm install$ npm run dev</code></pre><h3 id="2-上面我们已经将项目生成了，下面我们写一个简单的页面"><a href="#2-上面我们已经将项目生成了，下面我们写一个简单的页面" class="headerlink" title="2.上面我们已经将项目生成了，下面我们写一个简单的页面"></a>2.上面我们已经将项目生成了，下面我们写一个简单的页面</h3><p><strong>vue项目目录结构</strong></p><pre><code> vue-webpack vue项目 │ ├──build webpack配置文件夹 │ │ │ ├──build.js 生产环境构建 │ ├──check-versions.js 检查node、npm版本 │ ├──dev-client.js 开发模式下用到的工具，如：热重载 │ ├──dev-server.js 开发模式下，构建本地服务 │ ├──utils.js 构建工具相关，封装了webpack模块用到的方法 │ ├──vue-loader.conf.js .vue单文件加载配置 │ ├──webpack.base.conf.js webpack基础配置 │ ├──webpack.dev.conf.js webpack开发环境配置 │ ├──webpack.prod.conf.js webpack生产环境配置 │ ├──config webpack配置所用变量 │ ├──dev.env.js 开发环境 │ ├──index.js webpack配置文件 │ ├──prod.env.js 生产环境 │ ├──src 源文件夹 ├──static 静态文件夹 ├──.babelrc babel编译配置 ├──.editorconfig 在IDE中提供代码一致性 ├──.postcssrc.js 通过JS插件装换样式的工具 ├──index.html webpack插件HtmlWebpackPlugin生成html所用的模版 ├──package.json 项目信息及依赖</code></pre><p>默认情况下：</p><pre><code># 构建生产代码$ npm run build</code></pre><p>vue-webpack目录下会生成<code>dist</code>文件夹</p><h3 id="3-更改生产代码输出目录"><a href="#3-更改生产代码输出目录" class="headerlink" title="3.更改生产代码输出目录"></a>3.更改生产代码输出目录</h3><p>更改在<code>config</code>文件夹下的<code>index.js</code></p><pre><code>index: path.resolve(__dirname, '../../myapp/dist/index.html'),assetsRoot: path.resolve(__dirname, '../../myapp/dist'),</code></pre><p>最终代码输出目录为：</p><pre><code> vue-practice │ ├──vue-webpack vue项目 │ │ │ ├──myapp │ │ │ ├──dist │ │ ├──index.html │ │ ├──static</code></pre><p>这个时候：</p><pre><code>$ cd myapp$ npm install# 启动node服务$ node bin/www</code></pre><p>在浏览器中访问：<a href="http://localhost:3000/" target="_blank" rel="noopener">http://localhost:3000/</a></p><h3 id="4-开发环境下与测试接口进行数据交互"><a href="#4-开发环境下与测试接口进行数据交互" class="headerlink" title="4.开发环境下与测试接口进行数据交互"></a>4.开发环境下与测试接口进行数据交互</h3><p>在<code>vue-webpack</code>下安装以下模块</p><pre><code>$ npm i cookie-parser -D$ npm i body-parser -D$ npm i request -D</code></pre><p>在build文件夹下将安装的模块引入<code>dev-server.js</code></p><pre><code>var cookieParser = require('cookie-parser');var bodyParser = require('body-parser');var request = require('request');//找到下面的两个所在的位置var app = express()var compiler = webpack(webpackConfig)//在上面的下面引入以下app.use(bodyParser.json());app.use(bodyParser.urlencoded({ extended: false }));app.use(cookieParser());app.all('/路由地址/*',function (req, res, next) { //测试接口地址 var path = 'http://xxx.xxx.com'+req.path; let params =req.body; console.log(params); console.log(path); request({ url: path, method: "POST", json: true, body: params }, function (error, response, body) { if (error) { console.log(error); } else { console.log(typeof body); res.send(body) } });})</code></pre><h3 id="5-使用axios进行AJAX请求"><a href="#5-使用axios进行AJAX请求" class="headerlink" title="5.使用axios进行AJAX请求"></a>5.使用<a href="https://github.com/mzabriskie/axios" target="_blank" rel="noopener">axios</a>进行AJAX请求</h3><p>安装</p><pre><code>$ npm i axios -D</code></pre><p>写法：</p><pre><code>axios.post('接口地址', {键值对对象}) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });</code></pre><h2 id="项目地址"><a href="#项目地址" class="headerlink" title="项目地址"></a><a href="https://github.com/zqinmiao/vue-practice" target="_blank" rel="noopener">项目地址</a></h2>]]></content>
<summary type="html">
<blockquote>
<p>需要在部门内部做一个关于vue的培训，所以也就写了一个文档，来梳理一下vue的开发，及一些知识点<br>
</summary>
<category term="框架" scheme="https://zqinmiao.github.io/categories/%E6%A1%86%E6%9E%B6/"/>
<category term="Vue.js" scheme="https://zqinmiao.github.io/tags/Vue-js/"/>
</entry>
<entry>
<title>[实战]gulp构建前端自动化</title>
<link href="https://zqinmiao.github.io/details/596/"/>
<id>https://zqinmiao.github.io/details/596/</id>
<published>2017-09-12T03:38:32.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>需要给部门前端组写一个关于使用gulp的文档，所以就写了一个<br><a id="more"></a></p></blockquote><h2 id="相关文档"><a href="#相关文档" class="headerlink" title="相关文档"></a>相关文档</h2><p><a href="http://www.gulpjs.com.cn/" target="_blank" rel="noopener">Gulp中文网</a> - 如何开始使用 gulp</p><p><a href="http://www.gulpjs.com.cn/docs/getting-started/" target="_blank" rel="noopener">入门指南</a> - 学习 gulp 的输入和输出方式</p><p><a href="https://gulpjs.com/plugins/" target="_blank" rel="noopener">搜索 gulp 插件</a></p><p><a href="https://www.npmjs.com/browse/keyword/gulpplugin" target="_blank" rel="noopener">在 npm 查看所有插件</a></p><p><a href="http://www.browsersync.cn/docs/gulp/" target="_blank" rel="noopener">Browsersync / 说明文档</a></p><h2 id="实战"><a href="#实战" class="headerlink" title="实战"></a>实战</h2><p><a href="https://github.com/zqinmiao/gulp-practice" target="_blank" rel="noopener">实战项目地址</a></p><h3 id="package-json"><a href="#package-json" class="headerlink" title="package.json"></a>package.json</h3><pre><code>{ "name": "gulp-practice", "version": "0.1.0", "description": "A gulp practice project", "main": "index.js", "repository": { "type": "git", "url": "" }, "keywords": [], "author": "Mark Zhang", "license": "MIT", "bugs": { "url": "" }, "homepage": "", "devDependencies": { "babel-preset-env": "^1.6.0", "browser-sync": "^2.18.13", "gulp-babel": "^7.0.0", "gulp-ejs": "^3.0.1", "gulp-imagemin": "^3.3.0", "gulp-load-plugins": "^1.5.0", "gulp-rename": "^1.2.2", "gulp-rev": "^8.0.0", "gulp-rev-collector": "^1.2.2", "gulp-sourcemaps": "^2.6.1", "imagemin-pngquant": "^5.0.1" }, "dependencies": { "babel-core": "^6.23.1", "babel-preset-es2015": "^6.22.0", "del": "^2.2.2", "gitment": "0.0.3", "gulp": "^3.9.1", "gulp-autoprefixer": "^3.1.1", "gulp-clean-css": "^3.0.2", "gulp-concat": "^2.6.1", "gulp-less": "^3.3.0", "gulp-sequence": "^0.4.6", "gulp-uglify": "^3.0.0" }}</code></pre><h3 id="项目目录"><a href="#项目目录" class="headerlink" title="项目目录"></a>项目目录</h3><pre><code> gulp-practice │ ├──dist 文件输出目录 ├──rev 生成版本号文件夹 ├──src 资源文件夹 │ ├──css css文件夹 │ ├──images 图片 │ ├──js js文件夹 │ ├──template 模版文件 │ ├──views 增加版本号后的模版文件 ├──.babelrc babel配置 ├──.gitignore git忽略项 ├──gulpfile.babel.js gulp配置 ├──package.json ├──README.md</code></pre><h3 id="babelrc"><a href="#babelrc" class="headerlink" title=".babelrc"></a>.babelrc</h3><p>设置babel选项，以下选项设置为可使用es2015语法</p><pre><code>{ "presets": [ "es2015" ]}</code></pre><h3 id="gulpfile-babel-js"><a href="#gulpfile-babel-js" class="headerlink" title="gulpfile.babel.js"></a>gulpfile.babel.js</h3><p>正常情况下此文件的名称是<code>gulpfile.js</code>，由于我们使用了<code>babel</code>来实现在gulpfile.js里使用<strong>es2015</strong>语法，所以要将<code>gulpfile.js</code>改为<code>gulpfile.babel.js</code></p><pre><code>//导入gulpimport gulp from 'gulp';//压缩jsimport uglify from 'gulp-uglify';//源文件映射import sourcemaps from 'gulp-sourcemaps';//合并文件import concat from 'gulp-concat';//处理less文件import less from 'gulp-less';//压缩图片import imagemin from 'gulp-imagemin';//压缩pngimport pngquant from 'imagemin-pngquant';//压缩cssimport cleanCss from 'gulp-clean-css';//增加css前缀import autoprefixer from 'gulp-autoprefixer';//删除文件import del from 'del';//任务执行队列import sequence from 'gulp-sequence';//重命名文件名称import rename from 'gulp-rename';//处理ejs文件import ejs from 'gulp-ejs';//生成版本号import rev from 'gulp-rev';//关联html中，引入资源的版本号import revCollector from 'gulp-rev-collector';//将es6语法编译成es5语法import babel from 'gulp-babel'//浏览器同步工具import browserSync from 'browser-sync'// 清理目录gulp.task('clean', () => del(['./dist/*','./src/views/*'], {dot: true}));//copy 复制文件gulp.task('copy', () => gulp.src(['./src/js/lib/jquery.min.js']) .pipe(concat('lib.js')) .pipe(gulp.dest('./dist/js')));//image 压缩图片gulp.task('image', () => gulp.src('./src/images/**/*') .pipe(imagemin({ progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片 optimizationLevel: 3, //类型：Number 默认：3 取值范围：0-7（优化等级） use: [pngquant()] })) .pipe(gulp.dest('./dist/images')))//ejs文件输出为htmlgulp.task('postejs', () => gulp.src(['./src/views/*.ejs']) .pipe(ejs({}, {}, {ext: '.html'})) .pipe(gulp.dest('./dist/')));//css 处理lessgulp.task('postcss', function () { return gulp.src('./src/css/style.less') .pipe(less()) .pipe(autoprefixer({browsers: [ 'ie >= 9', 'ie_mob >= 10', 'ff >= 30', 'chrome >= 34', 'safari >= 7', 'opera >= 23', 'ios >= 7', 'android >= 2.3', 'bb >= 10' ]})) .pipe(cleanCss()) .pipe(rev()) .pipe(gulp.dest('./dist/css')) .pipe(rev.manifest()) .pipe(gulp.dest('rev/css'))});//uglifyjs 压缩jsgulp.task('uglifyjs', () => gulp.src('./src/js/*.js') .pipe(sourcemaps.init()) .pipe(babel({ presets: ['env'] })) .pipe(uglify()) .pipe(rev()) .pipe(sourcemaps.write()) .pipe(gulp.dest('./dist/js')) .pipe(rev.manifest()) .pipe(gulp.dest('rev/js')));//静态资源版本控制gulp.task('rev',() =>gulp.src(['rev/**/*.json','./src/templates/**/*.ejs']) .pipe(revCollector({ replaceReved:true })) .pipe(gulp.dest('./src/views')))/** 执行watch* */gulp.task('execEjs',(cb) => sequence('rev','postejs',cb))gulp.task('execCss',(cb) => sequence('postcss','execEjs',cb))gulp.task('execJs',(cb) => sequence('uglifyjs','execEjs',cb))// watch 监控gulp.task('watch', () => { browserSync.init({ server: "./dist" }); gulp.watch('./src/templates/**/*.ejs',['execEjs']); gulp.watch('./src/css/**/*.less',['execCss']); gulp.watch('./src/js/*.js',['execJs']); gulp.watch('./src/images/**/*',['image']); gulp.watch("dist/*.html").on('change', browserSync.reload);});//buildgulp.task('build', (cb) => sequence('copy', 'image', 'postcss', 'uglifyjs','rev','postejs', cb));//defaultgulp.task('default', (cb) => sequence('clean', 'build', cb));//devgulp.task('dev', ['build', 'watch'], (cb) => (cb));</code></pre><h3 id="执行"><a href="#执行" class="headerlink" title="执行"></a>执行</h3><pre><code>$ cd gulp-practice$ npm install$ gulp dev 开发模式或者$ gulp build模式</code></pre>]]></content>
<summary type="html">
<blockquote>
<p>需要给部门前端组写一个关于使用gulp的文档，所以就写了一个<br>
</summary>
<category term="工具" scheme="https://zqinmiao.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="Gulp" scheme="https://zqinmiao.github.io/tags/Gulp/"/>
</entry>
<entry>
<title>页面布局，body子元素设置固定宽度后溢出body的处理</title>
<link href="https://zqinmiao.github.io/details/45580/"/>
<id>https://zqinmiao.github.io/details/45580/</id>
<published>2017-09-10T03:18:28.000Z</published>
<updated>2018-03-14T09:29:44.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>前段时间只用VUE+UI框架来做后台管理系统了，不用框架写页面竟然突然感到手生的厉害，甚至连布局的不灵便了…….<br><a id="more"></a></p></blockquote><h2 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h2><p>在布局的时候遇到了body里面的元素溢出的问题。按照常理body中的块级元素是会把body自然撑开的</p><hr><p>比如将body中的div子元素的宽度设为1000px，那么当屏幕宽度小于1000时，div并不能将body撑开到1000</p><hr><h3 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h3><pre><code><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ margin: 0; padding: 0; height: 100%; } </style></head><body><div class="box" style="width: 1000px;height: 100%;background-color: black"></div></body></html></code></pre><h3 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h3><p><img src="./1.png" alt="Alt 图片"></p><h2 id="解决办法"><a href="#解决办法" class="headerlink" title="解决办法"></a>解决办法</h2><h3 id="方法一："><a href="#方法一：" class="headerlink" title="方法一："></a>方法一：</h3><p><strong><em>在设置宽的div元素外再增加一个div元素作为父级元素,并设置style=”height:100%;overflow:auto;”</em></strong></p><h4 id="代码-1"><a href="#代码-1" class="headerlink" title="代码"></a>代码</h4><pre><code><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ margin: 0; padding: 0; height: 100%; } </style></head><body><!--新增父级div--><div style="height:100%;overflow:auto;"> <div class="box" style="width: 1000px;height: 100%;background-color: black"></div></div></body></html></code></pre><h3 id="效果-1"><a href="#效果-1" class="headerlink" title="效果"></a>效果</h3><p><img src="./2.png" alt="Alt 图片"></p><h3 id="方法二："><a href="#方法二：" class="headerlink" title="方法二："></a>方法二：</h3><p><strong><em>在html,body上都设置上style=”overflow:auto;”</em></strong></p><h4 id="代码-2"><a href="#代码-2" class="headerlink" title="代码"></a>代码</h4><pre><code><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{ margin: 0; padding: 0; height: 100%; overflow:auto; } </style></head><body><div class="box" style="width: 1000px;height: 100%;background-color: black"></div></body></html></code></pre>]]></content>
<summary type="html">
<blockquote>
<p>前段时间只用VUE+UI框架来做后台管理系统了，不用框架写页面竟然突然感到手生的厉害，甚至连布局的不灵便了…….<br>
</summary>
<category term="其他" scheme="https://zqinmiao.github.io/categories/%E5%85%B6%E4%BB%96/"/>
</entry>
<entry>
<title>喝点小茶，给我这个行走的红烧肉去去油腻</title>
<link href="https://zqinmiao.github.io/details/54662/"/>
<id>https://zqinmiao.github.io/details/54662/</id>
<published>2017-08-26T11:28:11.000Z</published>
<updated>2018-03-15T15:25:18.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>这一年，体态渐宽，发际渐高，越看越好似一块油腻的红烧肉，二十六岁的人生像步入了四十岁一般。真乃大叔是也，哈哈。<br><a id="more"></a></p></blockquote><p>一个月前，看着体重计上又升高两公斤的体重，我决定和帅哥、磊子一起早起晨跑。<br>每天六点起床，刷刷牙，出门跑个三公里，压压腿拉伸完毕，回到家中，冲个澡洗把脸，泡杯茶喝喝，然后出门上班。<br>眼看这跑了一个月，精神面貌好了不少，但是体重却是又涨了一公斤。我感慨，感情这跑步跑的不减反增喽？<br>帅哥说：”这是因为运动量太少。”<br>小惠说：”只跑步不控制饮食，根本减不了肥。”<br>貌似都有些道理。可是增加运动量的话，就要起的更早，本来夜里睡的晚，恐怕睡眠不足更不好。<br>控制饮食呢，像我这么爱吃的人，想必那是万万使不得。<br>想起高中的时候，我也是每天早上会围着操场跑步，然后压腿拉伸。<br>能坚持跑步，这种习惯却是能锻炼一个人的意志，是一个好习惯，那么暂且去尽量的维持下来，先把这个养成，慢慢来，看能不能真的坚持。</p><p>每天跑步完后，我们会泡上一杯茶。虽说网上说，早上空腹喝茶对肠胃不好，茶中的咖啡碱和氟化物容易引起醉茶。<br>不过，喝了差不多一个月，也没感到有什么不舒服。看来还是因人而异，又或者我们的肠胃很健壮，伤不到毫毛。</p><p>于是近来突然对饮茶燃起了兴趣。喝茶，就是泡起来喝。所以除了茶叶外的东西，我感觉是无关紧要的。<br>那么说到茶叶，我也不懂。这个需让我一一尝试下，待将来好让我写下感受。但是茶的种类还是很多，于是上网搜了一下，大致种类在这里复制粘贴一下，权当供自己学习。</p><hr><h3 id="茶叶分类"><a href="#茶叶分类" class="headerlink" title="茶叶分类"></a>茶叶分类</h3><p>中国茶叶按照制作方法分为:<strong>绿茶、红茶、青茶、黑茶、白茶、黄茶</strong>等几大类，各类茶中又包括许多品种</p><h3 id="绿茶"><a href="#绿茶" class="headerlink" title="绿茶"></a>绿茶</h3><p>绿茶是茶叶的一种。未经发酵，经过杀青、揉捻、干燥，大部分白毫脱落，浸泡后为绿汤绿茶。<br>绿茶通过杀青工艺的不同可分为四种：炒青茶，蒸青茶，烘青茶，晒青茶。<br>绿茶是未经发酵制成的茶，保留了鲜叶的天然物质，含有的茶多酚、儿茶素、叶绿素、咖啡碱、氨基酸、维生素等营养成分也较多。<br>其中炒青是当前中国绿茶制作工艺中最广泛使用的一种，即将茶叶鲜叶在120摄氏度左右的铁锅中翻炒，使其水分散失，使其变得绵软，以便做形。<br>传统工艺为徒手翻炒，来到现代为机械翻炒。绿茶没有焙火工序，所以可以称为生茶。<br><br>在清明之前，茶树刚发芽时采摘的，为“明前茶”也称为“莲心”或“银针”；<br>在谷雨前采摘的，为“雨前茶”，茶叶已展开，也称为“旗枪”；<br>在立夏前采摘的为“三春茶”，已经有两片叶展开，也称为“雀舌”；<br>立夏后再采摘，叶片已变厚，为“四春茶”，也可称做“梗片”。<br><br>绿茶我国被誉为“国饮”。现代科学大量研究证实，茶叶确实含有与人体健康密切相关的生化成份。<br>茶叶不仅具有提神清心、清热解暑、消食化痰、去腻减肥、清心除烦、解毒醒酒、生津止渴、降火明目、止痢除湿等药理作用，<br>还对现代疾病，如辐射病、心脑血管病、癌症等疾病，有一定的药理功效。<br><br>主要品种：西湖龙井、洞庭碧螺春、紫阳富硒毛尖、汉中仙毫、黄山毛峰、信阳毛尖、六安瓜片、都匀毛尖、君山银针。</p><hr><h3 id="红茶"><a href="#红茶" class="headerlink" title="红茶"></a>红茶</h3><p>红茶是一种全发酵茶。红茶是经过采摘、萎凋、揉捻、发酵、干燥等步骤生产出来的；比绿茶多了发酵的过程。<br>发酵是指茶叶在空气中氧化，发酵作用使得茶叶中的茶多酚和鞣质酸减少，产生了茶黄素、茶红素等新的成分和醇类、醛类、酮类、酯类等芳香物质。<br>因此，红茶的茶叶呈黑色，或黑色中参杂着嫩芽的橙黄色；茶汤呈深红色；香气扑鼻；由于少了苦涩味，因而味道更香甜、醇厚。<br>红茶与绿茶不同，绿茶会随着时间而失去味道，但红茶能够保存相当长的时间而味道不变，因此红茶能适应长途运输。<br>萎凋是红茶初制的重要工艺，红茶在初制时称为“乌茶”。红茶因其干茶冲泡后的茶汤和叶底色呈红色而得名。<br><br>红茶富含胡萝卜素、维生素A、钙、磷、镁、钾、咖啡碱、异亮氨酸、亮氨酸、赖氨酸、谷氨酸、丙氨酸、天门冬氨酸等多种营养元素。<br>红茶可以帮助胃肠消化、促进食欲，可利尿、消除水肿，并强壮心脏功能。红茶中“富含的黄酮类化合物能消除自由基，具有抗酸化作用，降低心肌梗塞的发病率。<br></p><p><strong>中国红茶品种主要有：</strong></p><ul><li>小种红茶：小种红茶是最古老的红茶，同时也是其它红茶的鼻祖，其他红茶都是从小种红茶演变而来的。它分为正山小种和外山小种，均原产于武夷山地区。</li><li>工夫红茶：包括滇红工夫、坦洋工夫红茶、祁门工夫红茶、白琳工夫红茶。</li><li>红碎茶</li></ul><p><strong>中国是红茶的原产地有：</strong></p><ul><li>正山小种（福建）</li><li>闽红（坦洋工夫、白琳工夫、政和工夫）（福建）</li><li>祁红（安徽）</li><li>滇红（云南）</li><li>英德红茶（广东）</li></ul><hr><h3 id="青茶-乌龙茶"><a href="#青茶-乌龙茶" class="headerlink" title="青茶/乌龙茶"></a>青茶/乌龙茶</h3><p>乌龙茶，亦称青茶、半发酵茶及全发酵茶，品种较多，是中国几大茶类中，独具鲜明中国特色的茶叶品类。<br>乌龙茶是经过采摘、萎凋、摇青、炒青、揉捻、烘焙等工序后制出的品质优异的茶类。<br>乌龙茶为中国特有的茶类，主要产于福建的闽北、闽南及广东、台湾三个省。四川、湖南等省也有少量生产。<br><br>乌龙茶的药理作用，突出表现在分解脂肪、减肥健美等方面。在日本被称之为“美容茶”、“ 健美茶”。<br><br>主要品种：安溪铁观音、武夷岩茶、凤凰水仙</p><hr><h3 id="黑茶"><a href="#黑茶" class="headerlink" title="黑茶"></a>黑茶</h3><p>黑茶，一种中国茶，属后发酵茶，陈放茶叶数个月或数年，让其中的麹菌发酵后制成，泡出的茶汤颜色呈黑褐色且混浊，并因此得名。<br>黑茶的基本工艺流程是杀青、初揉、渥堆、复揉、烘焙。<br><br>黑茶中的咖啡碱、维生素、氨基酸、磷脂等有助于人体消化，调节脂肪代谢，咖啡碱的刺激作用更能提高胃液的分泌量，从而增进食欲，帮助消化。黑茶具有很强的解油腻、消食等功能<br><br>主要品种：湖南黑茶（安化黑茶、黑砖茶、茯砖茶、花砖茶、）、湖北黑茶类（紧压型青砖茶、散装青砖茶）、广西六堡茶类、云南普洱茶类、四川边茶（藏茶）类</p><hr><h3 id="白茶"><a href="#白茶" class="headerlink" title="白茶"></a>白茶</h3><p>白茶是属微发酵茶，指一种采摘后，不经过杀青或揉捻，只经过晒或文火干燥后加工的茶。<br>具有外形芽毫完整，满身披毫，毫香清鲜，汤色黄绿清澈，滋味清淡回甘的的品质特点。因其成品茶多为芽头，满披白毫，如银似雪而得名。<br><br>白茶具有保健功效，已被人们普遍认可。研究表明白茶比绿茶更为具有抗病毒和抗细菌功效，也具有更多的儿茶素、没食子酸、可可碱以及咖啡因。<br>儿茶素具有抗菌、除臭、防蛀等多种功效。而绿茶相比白茶则含有更多的氟化物，这是有损身体健康的。<br><br>主要品种：比较出名的出自福建东北部地区，有白毫银针，白牡丹，贡眉等。</p><hr><h3 id="黄茶"><a href="#黄茶" class="headerlink" title="黄茶"></a>黄茶</h3><p>黄茶是中国特产。其按鲜叶老嫩芽叶大小又分为黄芽茶、黄小茶和黄大茶。<br>黄茶属轻发酵茶类，加工工艺近似绿茶，只是在干燥过程的前或后，增加一道“闷黄”的工艺，促使其多酚叶绿素等物质部份氧化。<br>其加工方法近似于绿茶，其制作过程为：鲜叶杀青揉捻—— 闷黄、干燥。黄茶的杀青、揉捻、干燥等工序均与绿茶制法相似，<br>其最重要的工序在于闷黄，这是形成黄茶特点的关键，主要做法是将杀青和揉捻后的茶叶用纸包好，或堆积后以湿布盖之，<br>时间以几十分钟或几个小时不等，促使茶坯在水热作用下进行非酶性的自动氧化，形成黄色。<br>浸泡后每叶都在杯中立着，“如刀山剑硭”。<br><br>提神醒脑，消除疲劳，消食化滞等。对脾胃最有好处，消化不良，食欲不振、懒动肥胖、都可饮而化之。<br><br>主要品种：君山银针、蒙顶黄芽、北港毛尖、远安黄茶、霍山黄芽、沩江白毛尖、温州黄汤、皖西黄大茶、广东大叶青、海马宫茶等。</p>]]></content>
<summary type="html">
<blockquote>
<p>这一年，体态渐宽，发际渐高，越看越好似一块油腻的红烧肉，二十六岁的人生像步入了四十岁一般。真乃大叔是也，哈哈。<br>
</summary>
<category term="随笔" scheme="https://zqinmiao.github.io/categories/%E9%9A%8F%E7%AC%94/"/>
<category term="茶" scheme="https://zqinmiao.github.io/tags/%E8%8C%B6/"/>
</entry>
<entry>
<title>vim常用命令</title>
<link href="https://zqinmiao.github.io/details/22091/"/>
<id>https://zqinmiao.github.io/details/22091/</id>
<published>2017-08-13T08:37:08.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>据说用vim是一个很好的装逼方式之一。即便是不能精通，但是为了能够在某个时刻偶尔装下逼，那么掌握一下常用的一些命令还是挺不错的，嘎嘎<br><a id="more"></a></p></blockquote><h3 id="打开文件"><a href="#打开文件" class="headerlink" title="打开文件"></a>打开文件</h3><pre><code>vi filename</code></pre><h3 id="按-i-进入编辑模式，此时终端下面会显示"><a href="#按-i-进入编辑模式，此时终端下面会显示" class="headerlink" title="按 i 进入编辑模式，此时终端下面会显示"></a>按 i 进入编辑模式，此时终端下面会显示</h3><pre><code>-- INSERT --</code></pre><p>此时就是进入编辑模式了<br>进入插入模式的其他方式：</p><pre><code>i／I i 为 [从目前光标所在处插入]， I 为[在目前所在行的第一个非空格符处开始插入]a／A a 为[从目前光标所在的下一个字符处开始插入]， A 为[从光标所在行的最后一个字符处开始插入]o／O 这是英文字母 o 的大小写。o 为[在目前光标所在的下一行处插入新的一行]； O 为[在目前光标所在处的上一行插入新的一行]r／R 进入取代模式(Replace mode)：</code></pre><h3 id="按-esc-退出编辑模式，进入命令模式"><a href="#按-esc-退出编辑模式，进入命令模式" class="headerlink" title="按 esc 退出编辑模式，进入命令模式"></a>按 esc 退出编辑模式，进入命令模式</h3><h3 id="命令模式的命令："><a href="#命令模式的命令：" class="headerlink" title="命令模式的命令："></a>命令模式的命令：</h3><pre><code>i 切换到插入模式，以输入字符。x 删除当前光标所在处的字符。: 切换到底线命令模式，以在最底一行输入命令。[Ctrl] + [f] 屏幕『向下』移动一页，相当于 [Page Down]按键[Ctrl] + [b] 屏幕『向上』移动一页，相当于 [Page Up] 按键[Ctrl] + [d] 屏幕『向下』移动半页[Ctrl] + [u] 屏幕『向上』移动半页+ 光标移动到非空格符的下一行- 光标移动到非空格符的上一行n + [空格键] n 表示数字。按下数字后再按空格键，光标会向右移动这一行的 n 个字符n + [<Enter] n 为数字。光标向下移动 n 行0 移动到这一行的最前面字符处$ 移动到这一行的最后面字符处/word 向光标之下寻找一个名称为 word 的字符串。例如要在档案内搜寻 vbird 这个字符串，就输入 /vbird 即可?word 向光标之上寻找一个字符串名称为 word 的字符串nx n 为数字，连续向后删除 n 个字符。举例来说，我要连续删除 10 个字符，10x。dd 删除游标所在的那一整行ndd n为数字。删除光标所在的向下 n 行，例如 20dd 则是删除 20 行yy 复制游标所在的那一行nyy n为数字。复制光标所在的向下 n 行，例如 20yy 则是复制 20 行p/P p为将已复制的数据在光标下一行贴上，P 则为贴在游标上一行u 复原前一个动作[Ctrl] + r 重做上一个动作</code></pre><h3 id="输入-进入底线命令模式，回车退出底线命令模式进入命令模式"><a href="#输入-进入底线命令模式，回车退出底线命令模式进入命令模式" class="headerlink" title="输入 : 进入底线命令模式，回车退出底线命令模式进入命令模式"></a>输入 : 进入底线命令模式，回车退出底线命令模式进入命令模式</h3><h3 id="底线模式命令："><a href="#底线模式命令：" class="headerlink" title="底线模式命令："></a>底线模式命令：</h3><pre><code>:q 离开vim:q! 若曾修改过档案，又不想储存，使用 ! 为强制离开不储存档案:w 保存文件:wq 保存文件并退出:set nu 显示行号:set nonu 取消显示行号</code></pre><p><a href="http://www.runoob.com/linux/linux-vim.html" target="_blank" rel="noopener">参考文档</a></p>]]></content>
<summary type="html">
<blockquote>
<p>据说用vim是一个很好的装逼方式之一。即便是不能精通，但是为了能够在某个时刻偶尔装下逼，那么掌握一下常用的一些命令还是挺不错的，嘎嘎<br>
</summary>
<category term="工具" scheme="https://zqinmiao.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="vim" scheme="https://zqinmiao.github.io/tags/vim/"/>
</entry>
<entry>
<title>git全局/本地配置用户名和邮箱</title>
<link href="https://zqinmiao.github.io/details/1543/"/>
<id>https://zqinmiao.github.io/details/1543/</id>
<published>2017-08-11T15:41:20.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<h2 id="查看用户名和地址"><a href="#查看用户名和地址" class="headerlink" title="查看用户名和地址"></a>查看用户名和地址</h2><h3 id="查看本地的用户名和邮箱"><a href="#查看本地的用户名和邮箱" class="headerlink" title="查看本地的用户名和邮箱"></a>查看本地的用户名和邮箱</h3><pre><code>$ git config user.name$ git config user.email</code></pre><h3 id="查看全局的命令"><a href="#查看全局的命令" class="headerlink" title="查看全局的命令"></a>查看全局的命令</h3><pre><code>$ git config --global user.name$ git config --global user.email</code></pre><h2 id="修改用户名和地址"><a href="#修改用户名和地址" class="headerlink" title="修改用户名和地址"></a>修改用户名和地址</h2><h3 id="全局"><a href="#全局" class="headerlink" title="全局"></a>全局</h3><pre><code>$ git config --global user.name "your name"$ git config --global user.email "your email"</code></pre><h3 id="本地"><a href="#本地" class="headerlink" title="本地"></a>本地</h3><p>进入项目文件夹，.git文件夹是隐藏的</p><pre><code>$ cd .git$ git config user.name "your name"$ git config user.email "your email"</code></pre>]]></content>
<summary type="html">
<h2 id="查看用户名和地址"><a href="#查看用户名和地址" class="headerlink" title="查看用户名和地址"></a>查看用户名和地址</h2><h3 id="查看本地的用户名和邮箱"><a href="#查看本地的用户名和邮箱" class
</summary>
<category term="工具" scheme="https://zqinmiao.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="Git" scheme="https://zqinmiao.github.io/tags/Git/"/>
</entry>
<entry>
<title>Vue之vuex概念-Modules</title>
<link href="https://zqinmiao.github.io/details/30406/"/>
<id>https://zqinmiao.github.io/details/30406/</id>
<published>2017-07-13T08:08:47.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>代码演示vuex中嵌套Modules是如何执行的<br><a id="more"></a></p></blockquote><p><a href="https://vuex.vuejs.org/zh-cn/modules.html" target="_blank" rel="noopener">参考文档</a></p><pre><code class="js">import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({ modules:{ a:{ namespaced: true, state:{ msg:'msg'; }, mutations:{ increment(state){ let m = state.msg+'aa'; console.log(m); } }, //嵌套模块 modules:{ b:{ state:{ msg2:'inner-msg'; }, mutations:{ test(state){ console.log(state.msg2); } } } } } }});/** 情况1: 想要执行模块a中的mutations->increment()：如果模块a中的namespaced:true;那么methods中increment中的写法为this.$store.commit('a/increment');* 情况2: 想要执行模块b中的mutations->test()：如果模块a中的namespaced:true;模块b中的namespaced:false;或者不设置，那么methods中increment中的写法为this.$store.commit('a/test');* 情况3: 想要执行模块b中的mutations->test()：如果模块a中的namespaced:true;模块b中的namespaced:true;，那么methods中increment中的写法为this.$store.commit('a/b/test');* */const app = new Vue({ el:'#app', store, methods:{ increment(){ this.$store.commit('a/increment');//情况1 ,log: msgaa this.$store.commit('a/test');//情况2 ,log: inner-msg this.$store.commit('a/b/test');//情况3 ,log: inner-msg } }, template: ` <div class="app2"> <button v-on:click="increment">按钮</button> </div> `});</code></pre>]]></content>
<summary type="html">
<blockquote>
<p>代码演示vuex中嵌套Modules是如何执行的<br>
</summary>
<category term="框架" scheme="https://zqinmiao.github.io/categories/%E6%A1%86%E6%9E%B6/"/>
<category term="Vue.js" scheme="https://zqinmiao.github.io/tags/Vue-js/"/>
</entry>
<entry>
<title>使用Webpack时遇到的Error和一些疑惑</title>
<link href="https://zqinmiao.github.io/details/26270/"/>
<id>https://zqinmiao.github.io/details/26270/</id>
<published>2017-07-06T14:07:29.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>在用Webpack时遇到了一些问题，和一些概念的疑惑，持续更新…<br><a id="more"></a></p></blockquote><p><strong>webpack版本：2.6.1</strong></p><h1 id="使用-chunkhash-时，Error！"><a href="#使用-chunkhash-时，Error！" class="headerlink" title="使用[chunkhash]时，Error！"></a>使用[chunkhash]时，Error！</h1><p>在webpack.config.js文件中，在output选项里使用{filename:’[name].[chunkhash].js’}时，如：</p><pre><code>output: { filename: '[name].[chunkhash].js', path: path.resolve(__dirname, 'dist')}</code></pre><p>出现报错的情况：</p><pre><code>ERROR in chunk vendor [entry][name].[chunkhash].jsCannot use [chunkhash] for chunk in '[name].[chunkhash].js' (use [hash] instead)</code></pre><p>是因为生产环境build时不能启用HMR，将HMR插件关闭即可。</p><h3 id="详解Webpack2的那些路径"><a href="#详解Webpack2的那些路径" class="headerlink" title="详解Webpack2的那些路径"></a><a href="http://www.qinshenxue.com/article/20170315092242.html" target="_blank" rel="noopener">详解Webpack2的那些路径</a></h3><h3 id="搜罗一切webpack的好文章好工具"><a href="#搜罗一切webpack的好文章好工具" class="headerlink" title="搜罗一切webpack的好文章好工具"></a><a href="https://github.com/webpack-china/awesome-webpack-cn/blob/master/README.md" target="_blank" rel="noopener">搜罗一切webpack的好文章好工具</a></h3>]]></content>
<summary type="html">
<blockquote>
<p>在用Webpack时遇到了一些问题，和一些概念的疑惑，持续更新…<br>
</summary>
<category term="工具" scheme="https://zqinmiao.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="Webpack" scheme="https://zqinmiao.github.io/tags/Webpack/"/>
</entry>
<entry>
<title>MVC、MVP、MVVM</title>
<link href="https://zqinmiao.github.io/details/29197/"/>
<id>https://zqinmiao.github.io/details/29197/</id>
<published>2017-03-28T05:30:12.000Z</published>
<updated>2018-03-14T09:27:41.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>看笔记发现收藏的三张关于介绍MVC、MVP、MVVM模式的三张图片，图片表示的简单明了，特此分享一下。具体来源不记得了，感谢原作者。<br><a id="more"></a></p></blockquote><p><img src="./MVC.png" alt="Alt MVC"></p><p><img src="./MVP.png" alt="Alt MVP"></p><p><img src="./MVVM.png" alt="Alt MVVM"></p><p><a href="https://github.com/livoras/blog/issues/11" target="_blank" rel="noopener">这篇文章介绍的更加详细</a></p>]]></content>
<summary type="html">
<blockquote>
<p>看笔记发现收藏的三张关于介绍MVC、MVP、MVVM模式的三张图片，图片表示的简单明了，特此分享一下。具体来源不记得了，感谢原作者。<br>
</summary>
<category term="框架" scheme="https://zqinmiao.github.io/categories/%E6%A1%86%E6%9E%B6/"/>
<category term="mvc" scheme="https://zqinmiao.github.io/tags/mvc/"/>
<category term="mvp" scheme="https://zqinmiao.github.io/tags/mvp/"/>
<category term="mvvm" scheme="https://zqinmiao.github.io/tags/mvvm/"/>
</entry>
<entry>
<title>mac下webstorm卡顿的解决方法</title>
<link href="https://zqinmiao.github.io/details/41298/"/>
<id>https://zqinmiao.github.io/details/41298/</id>
<published>2017-03-12T02:27:10.000Z</published>
<updated>2018-03-14T09:27:41.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>mac pro上用webstorm出现卡顿的现象，上下滑动代码都卡，这种情况一般是因为webstrom设的内存较小导致的<br><a id="more"></a></p></blockquote><h2 id="解决办法："><a href="#解决办法：" class="headerlink" title="解决办法："></a>解决办法：</h2><p><img src="./1.jpeg" alt="Alt 图片"></p><p>点击并进行编辑，我设置的各项是这样的：</p><pre><code># custom WebStorm VM options-Xms128m-Xmx2048m-XX:ReservedCodeCacheSize=240m-XX:+UseCompressedOops</code></pre>]]></content>
<summary type="html">
<blockquote>
<p>mac pro上用webstorm出现卡顿的现象，上下滑动代码都卡，这种情况一般是因为webstrom设的内存较小导致的<br>
</summary>
<category term="工具" scheme="https://zqinmiao.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="mac" scheme="https://zqinmiao.github.io/tags/mac/"/>
</entry>
<entry>
<title>mac开发环境之nvm</title>
<link href="https://zqinmiao.github.io/details/65137/"/>
<id>https://zqinmiao.github.io/details/65137/</id>
<published>2017-03-11T02:31:06.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<h2 id="安装配置nvm"><a href="#安装配置nvm" class="headerlink" title="安装配置nvm"></a>安装配置nvm</h2><p>Install script</p><p>To install or update nvm, you can use the install script using cURL:</p><pre><code>curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash</code></pre><p>or Wget:</p><pre><code>wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.1/install.sh | bash</code></pre><p>The script clones the nvm repository to ~/.nvm and adds the source line to your profile (~/.bash_profile, ~/.zshrc, ~/.profile, or~/.bashrc).</p><pre><code>export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm</code></pre><p>You can customize the install source, directory, profile, and version using the NVM_SOURCE, NVM_DIR, PROFILE, and NODE_VERSION variables. Eg: curl … | NVM_DIR=/usr/local/nvm bash for a global install.<br>NB. The installer can use git, curl, or wget to download nvm, whatever is available.<br>Note: On OS X, if you get nvm: command not found after running the install script, your system may not have a [.bash_profile file] where the command is set up. Simply create one with touch ~/.bash_profile and run the install script again.<br>If the above doesn’t fix the problem, open your .bash_profile and add the following line of code:</p><pre><code>source ~/.bashrc</code></pre><p>For more information about this issue and possible workarounds, please refer here<br>Verify installation<br>To verify that nvm has been installed, do:</p><pre><code>command -v nvm</code></pre><p>which should output ‘nvm’ if the installation was successful. Please note that which nvm will not work, since nvm is a sourced shell function, not an executable binary.</p><h3 id="安装切换各版本-node-npm"><a href="#安装切换各版本-node-npm" class="headerlink" title="安装切换各版本 node/npm"></a>安装切换各版本 node/npm</h3><pre><code>nvm install stable #安装最新稳定版 node，现在是 5.0.0nvm install 4.2.2 #安装 4.2.2版本nvm install 0.12.7 #安装 0.12.7版本</code></pre><h3 id="特别说明：以下模块安装仅供演示说明，并非必须安装模块"><a href="#特别说明：以下模块安装仅供演示说明，并非必须安装模块" class="headerlink" title="特别说明：以下模块安装仅供演示说明，并非必须安装模块"></a>特别说明：以下模块安装仅供演示说明，并非必须安装模块</h3><pre><code>nvm use 0 #切换至 0.12.7 版本npm install -g mz-fis #安装 mz-fis 模块至全局目录，安装完成的路径是 /Users/<你的用户名>/.nvm/versions/node/v0.12.7/lib/mz-fisnvm use 4 #切换至 4.2.2 版本npm install -g react-native-cli #安装 react-native-cli 模块至全局目录，安装完成的路径是 /Users/<你的用户名>/.nvm/versions/node/v4.2.2/lib/react-native-clinvm alias default 0.12.7 #设置默认 node 版本为 0.12.7</code></pre><p>使用 .nvmrc 文件配置项目所使用的 node 版本<br>如果你的默认 node 版本（通过 nvm alias 命令设置的）与项目所需的版本不同，则可在项目根目录或其任意父级目录中创建 .nvmrc 文件，在文件中指定使用的 node 版本号，例如：</p><pre><code>cd <项目根目录> #进入项目根目录echo > .nvmrc #添加 .nvmrc 文件nvm use #无需指定版本号，会自动使用 .nvmrc 文件中配置的版本node -v #查看 node 是否切换为对应版本</code></pre><p>卸载nvm</p><pre><code>rm -rf $NVM_DIR ~/.npm ~/.bower</code></pre>]]></content>
<summary type="html">
<h2 id="安装配置nvm"><a href="#安装配置nvm" class="headerlink" title="安装配置nvm"></a>安装配置nvm</h2><p>Install script</p>
<p>To install or update nvm, yo
</summary>
<category term="工具" scheme="https://zqinmiao.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="mac" scheme="https://zqinmiao.github.io/tags/mac/"/>
<category term="nvm" scheme="https://zqinmiao.github.io/tags/nvm/"/>
</entry>
<entry>
<title>mac开发环境之redis</title>
<link href="https://zqinmiao.github.io/details/8655/"/>
<id>https://zqinmiao.github.io/details/8655/</id>
<published>2017-03-08T02:33:03.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<h2 id="安装配置redis"><a href="#安装配置redis" class="headerlink" title="安装配置redis"></a>安装配置redis</h2><p>安装命令</p><pre><code>brew install redis</code></pre><p>开机自动启动redis命令：</p><pre><code>$ ln -sfv /usr/local/opt/redis/*.plist ~/Library/LaunchAgents</code></pre><p>You can use launchctl to start and stop redis</p><pre><code>$ launchctl load ~/Library/LaunchAgents/homebrew.mxcl.redis.plist$ launchctl unload ~/Library/LaunchAgents/homebrew.mxcl.redis.plist</code></pre><p>You can also more conveniently use brew to start, stop, and verify service status</p><pre><code>$ brew services list | grep redis$ brew services start redis$ brew services stop redis</code></pre><p>检查是否启动：</p><pre><code>redis-cli ping</code></pre><p>Notes:<br>The default plist provided by homebrew stores the redis configuration at /usr/local/etc/redis.conf.<br>For more about launchctl see:<br><a href="https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man1/launchctl.1.html#//apple_ref/doc/man/1/launchctl" target="_blank" rel="noopener">https://developer.apple.com/library/mac/documentation/Darwin/Reference/ManPages/man1/launchctl.1.html#//apple_ref/doc/man/1/launchctl</a><br><a href="http://launchd.info/" target="_blank" rel="noopener">http://launchd.info/</a></p><h3 id="Note：安装redis-desktop-manager"><a href="#Note：安装redis-desktop-manager" class="headerlink" title="Note：安装redis desktop manager"></a>Note：安装redis desktop manager</h3><p>1、确保安装好了brew、brew-cask<br>2、然后终端输入：brew cask install rdm</p>]]></content>
<summary type="html">
<h2 id="安装配置redis"><a href="#安装配置redis" class="headerlink" title="安装配置redis"></a>安装配置redis</h2><p>安装命令</p>
<pre><code>brew install redis
</c
</summary>
<category term="工具" scheme="https://zqinmiao.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="mac" scheme="https://zqinmiao.github.io/tags/mac/"/>
<category term="redis" scheme="https://zqinmiao.github.io/tags/redis/"/>
</entry>
<entry>
<title>mac开发环境之brew、brew-cask</title>
<link href="https://zqinmiao.github.io/details/38493/"/>
<id>https://zqinmiao.github.io/details/38493/</id>
<published>2017-03-05T02:23:50.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>包管理工具可以让你安装和更新程序变得更方便，目前在 OS X 系统中最受欢迎的包管理工具是 Homebrew.<br><a id="more"></a></p></blockquote><h2 id="安装brew"><a href="#安装brew" class="headerlink" title="安装brew"></a>安装brew</h2><p>包管理工具可以让你安装和更新程序变得更方便，目前在 OS X 系统中最受欢迎的包管理工具是 Homebrew.</p><h3 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h3><p>在安装 Homebrew 之前，需要将 Xcode Command Line Tools 安装完成，这样你就可以使用基于 Xcode Command Line Tools 编译的 Homebrew。<br>在 terminal 中复制以下命令（不包括 $），跟随指引，将完成 Hombrew 安装。</p><pre><code>$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"</code></pre><p>紧接着，我们需要做一件事让通过 Homebrew 安装的程序的启动链接 (在 /usr/local/bin中）可以直接运行，无需将完整路径写出。通过以下命令将 /usr/local/bin 添加至 $PATH 环境变量中:</p><pre><code>$ echo 'export PATH="/usr/local/bin:$PATH"' >> ~/.bash_profile</code></pre><p>Cmd+T 打开一个新的 terminal 标签页，运行以下命令，确保 brew 运行正常。</p><pre><code>$ brew doctor</code></pre><p>译注：<br>安装完成后，Homebrew 会将本地 /usr/local 初始化为 git 的工作树，并将目录所有者变更为当前所操作的用户，将来 brew 的相关操作不需要 sudo 。</p><h3 id="Homebrew基本使用"><a href="#Homebrew基本使用" class="headerlink" title="Homebrew基本使用"></a>Homebrew基本使用</h3><p>安装一个包，可以简单的运行：</p><pre><code>$ brew install <package_name></code></pre><p>更新 Homebrew 在服务器端上的包目录：</p><pre><code>$ brew update</code></pre><p>查看你的包是否需要更新：</p><pre><code>$ brew outdated</code></pre><p>更新包：</p><pre><code>$ brew upgrade <package_name></code></pre><p>Homebrew 将会把老版本的包缓存下来，以便当你想回滚至旧版本时使用。但这是比较少使用的情况，当你想清理旧版本的包缓存时，可以运行：</p><pre><code>$ brew cleanup</code></pre><p>查看你安装过的包列表（包括版本号）：</p><pre><code>$ brew list --versions</code></pre><hr><h2 id="安装brew-cask"><a href="#安装brew-cask" class="headerlink" title="安装brew-cask"></a>安装brew-cask</h2><p>通过Homebrew Cask 优雅、简单、快速的安装和管理 OS X 图形界面程序，比如 Google Chrome 和 Dropbox。</p><h3 id="安装-1"><a href="#安装-1" class="headerlink" title="安装"></a>安装</h3><p>安装 Homebrew-cask 是如此的简单直接，运行以下命令即可完成：</p><pre><code>$ brew install caskroom/cask/brew-cask$ brew cask install google-chrome // 安装 Google 浏览器$ brew update && brew upgrade brew-cask && brew cleanup // 更新</code></pre><h3 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a>搜索</h3><p>如果你想查看 cask 上是否存在你需要的 app，可以到 caskroom.io 进行搜索。</p><h3 id="文件预览插件"><a href="#文件预览插件" class="headerlink" title="文件预览插件"></a>文件预览插件</h3><p>有些 插件 可以让 Mac 上的文件预览更有效，比如语法高亮、markdown 渲染、json 预览等等。</p><pre><code>$ brew cask install qlcolorcode$ brew cask install qlstephen$ brew cask install qlmarkdown$ brew cask install quicklook-json$ brew cask install qlprettypatch$ brew cask install quicklook-csv$ brew cask install betterzipql$ brew cask install webpquicklook$ brew cask install suspicious-package</code></pre><h3 id="OS-X-图形界面程序"><a href="#OS-X-图形界面程序" class="headerlink" title="OS X 图形界面程序"></a>OS X 图形界面程序</h3><p><code>`</code><br>$ brew cask install alfred<br>$ brew cask install appcleaner<br>$ brew cask install cheatsheet<br>$ brew cask install dropbox<br>$ brew cask install google-chrome<br>$ brew cask install onepassword<br>$ brew cask install sublime-text<br>$ brew cask install totalfinder</p>]]></content>
<summary type="html">
<blockquote>
<p>包管理工具可以让你安装和更新程序变得更方便，目前在 OS X 系统中最受欢迎的包管理工具是 Homebrew.<br>
</summary>
<category term="工具" scheme="https://zqinmiao.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="mac" scheme="https://zqinmiao.github.io/tags/mac/"/>
<category term="brew" scheme="https://zqinmiao.github.io/tags/brew/"/>
</entry>
<entry>
<title>软件版本中的Alpha,Beta,RC,Trial是什么意思？</title>
<link href="https://zqinmiao.github.io/details/14198/"/>
<id>https://zqinmiao.github.io/details/14198/</id>
<published>2017-03-05T01:30:00.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>经常会看到一些软件有不同的版本，这些版本代表什么意思呢，搜了一下，转载一篇文章，科普一下<br><a id="more"></a></p></blockquote><p>版本号：<br>V（Version）：即版本，通常用数字表示版本号。(如:EVEREST Ultimate v4.20.1188 Beta )<br>Build：用数字或日期标示版本号的一种方式。(如:VeryCD eMule v0.48a Build 071112)<br>SP：Service Pack，升级包。(如:Windows XP SP 2/Vista SP 1)<br>开发阶段划分：<br>α（Alpha）版：内测版，内部交流或者专业测试人员测试用。Bug较多，普通用户最好不要安装。<br>β（Beta）版：公测版，专业爱好者大规模测试用，存在一些缺陷，该版本也不适合一般用户安装。<br>γ（Gamma）版：相当成熟的测试版，与即将发行的正式版相差无几。<br>RC版：是 Release Candidate 的缩写，意思是发布倒计时，候选版本，处于Gamma阶段，该版本已经完成全部功能并清除大部分的BUG。到了这个阶段只会除BUG，不会对软件做任何大的更改。从Alpha到Beta再到Gamma是改进的先后关系，但RC1、RC2往往是取舍关系。<br>Final：正式版。</p><hr><p>授权和功能划分：<br>Trial：试用版，通常都有时间限制，有些试用版软件还在功能上做了一定的限制。可注册或购买成为正式版。,<br>Unregistered：未注册版，通常没有时间限制，在功能上相对于正式版做了一定的限制。可注册或购买成为正式版。<br>Demo：演示版，仅仅集成了正式版中的几个功能，不能升级成正式版。<br>Lite：精简版。<br>Full version：完整版，属于正式版。</p><hr><p>语言划分：<br>SC：Simplified Chinese简体中文版。<br>CN ： 简体中文版<br>GBK：简体中文汉字内码扩展规范版。<br>TC：Traditional Chinese繁体中文版。<br>CHT ： 繁体中文版<br>BIG5：繁体中文大五码版。<br>EN ： 英文版<br>Multilanguage ： 多语言版<br>UTF8：Unicode Transformation Format 8 bit，对现有的中文系统不是好的解决方案。</p><hr><p>其他版本<br>Enhance ：增强版或者加强版 属于正式版1<br>Free ：自由版<br>Release ：发行版 有时间限制<br>Upgrade ：升级版<br>Retail ：零售版<br>Cardware ：属共享软件的一种，只要给作者回复一封电邮或明信片即可。（有的作者并由此提供注册码等），目前这种形式已不多见。/ S<br>Plus ：属增强版，不过这种大部分是在程序界面及多媒体功能上增强。<br>Preview ：预览版<br>Corporation & Enterprise ：企业版<br>Standard ：标准版<br>Mini ：迷你版也叫精简版只有最基本的功能<br>Premium ： 贵价版<br>Professional ： 专业版<br>Express ： 简易版<br>Deluxe ： 豪华版<br>Regged ： 已注册版</p>]]></content>
<summary type="html">
<blockquote>
<p>经常会看到一些软件有不同的版本，这些版本代表什么意思呢，搜了一下，转载一篇文章，科普一下<br>
</summary>
<category term="概念" scheme="https://zqinmiao.github.io/tags/%E6%A6%82%E5%BF%B5/"/>
</entry>
<entry>
<title>mac开发环境之MySQL</title>
<link href="https://zqinmiao.github.io/details/43582/"/>
<id>https://zqinmiao.github.io/details/43582/</id>
<published>2017-03-03T02:29:16.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<h2 id="安装配置mysql"><a href="#安装配置mysql" class="headerlink" title="安装配置mysql"></a>安装配置mysql</h2><h3 id="安装包安装："><a href="#安装包安装：" class="headerlink" title="安装包安装："></a>安装包安装：</h3><p>1、下载安装包，安装完后<br>2:配置环境变量<br>打开终端,输入： cd ~<br>会进入~文件夹<br>然后输入：</p><pre><code>touch .bash_profile</code></pre><p>回车执行后，再输入：</p><pre><code>open -e .bash_profile</code></pre><p>打开文件后添加：PATH=$PATH:/usr/local/mysql/bin<br>或者：<br>Try adding the following line to your .bash_profile file.</p><pre><code>export PATH="/usr/local/mysql/bin:$PATH"</code></pre><p>You can do this easily with the following command, which will append the line if the file already exists or create a new file with the line if it doesn’t.</p><pre><code>echo 'export PATH="/usr/local/mysql/bin:$PATH"' >> ~/.bash_profile</code></pre><h3 id="安装-MySQL"><a href="#安装-MySQL" class="headerlink" title="安装 MySQL:"></a>安装 MySQL:</h3><pre><code>$ brew update # 这是一个好习惯$ brew install mysql</code></pre><p>在使用 MySQL 前，我们需要做一些设置：</p><pre><code>$ unset TMPDIR$ mkdir /usr/local/var$ mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp</code></pre><h3 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h3><p>启动 MySQL 服务，运行 mysql.server</p><pre><code>$ mysql.server start</code></pre><p>关闭 MySQL，运行：</p><pre><code>$ mysql.server stop</code></pre><p>你可以了解更多 mysql.server 的命令，运行：</p><pre><code>$ mysql.server --help</code></pre><p>登录 MySQL, 运行:</p><pre><code>$ mysql -uroot</code></pre><p>Note: 默认情况下，MySQL 用户 root 没有密码，这对本地开发没有关系，但如果你希望修改密码，你可以运行:</p><pre><code>$ mysqladmin -u root password 'new-password'</code></pre><p>退出mysql服务：</p><pre><code>mysql > quit</code></pre><p>quit不需要分号。</p><p>重启服务：</p><pre><code>mysql.server restart</code></pre><p>Note：如果已经设置过密码，需要修改密码的话：</p><pre><code>mysql -u root -pmysql> SET PASSWORD FOR 'root'@'localhost' = PASSWORD('newpass’);</code></pre><h3 id="如使用brew安装：brew-uninstall-mysql-或者-brew-remove-mysql"><a href="#如使用brew安装：brew-uninstall-mysql-或者-brew-remove-mysql" class="headerlink" title="如使用brew安装：brew uninstall mysql 或者 brew remove mysql"></a>如使用brew安装：brew uninstall mysql 或者 brew remove mysql</h3><p>但是又有点怕某些东西没有卸载完全影响到下一次的安装（我第一次重装就是这样的��）以下是完整一点的手动卸载：</p><ul><li>sudo rm /usr/local/mysql</li><li>sudo rm -rf /usr/local/mysql*</li><li>sudo rm -rf /Library/StartupItems/MySQLCOM</li><li>sudo rm -rf /Library/PreferencePanes/My*</li><li>rm -rf ~/Library/PreferencePanes/My*</li><li>sudo rm -rf /Library/Receipts/mysql*</li><li>sudo rm -rf /Library/Receipts/MySQL*</li><li>sudo rm -rf /var/db/receipts/com.mysql.*</li></ul><h3 id="添加修改mysql配置"><a href="#添加修改mysql配置" class="headerlink" title="添加修改mysql配置"></a>添加修改mysql配置</h3><pre><code>mysqld --help --verbose | more (查看帮助, 按空格下翻)</code></pre><p>你会看到开始的这一行(表示配置文件默认读取顺序)</p><pre><code>Default options are read from the following files in the given order: /etc/my.cnf /etc/mysql/my.cnf /usr/local/etc/my.cnf ~/.my.cnf</code></pre><p>通常这些位置是没有配置文件的, 所以要自己建一个</p><pre><code>ls $(brew --prefix mysql)/support-files/my-* (用这个可以找到样例.cnf)cp /usr/local/opt/mysql/support-files/my-default.cnf /etc/my.cnf (拷贝到第一个默认读取目录)</code></pre><p>按需修改my.cnf</p><h3 id="错误相关："><a href="#错误相关：" class="headerlink" title="错误相关："></a>错误相关：</h3><h4 id="1、ERROR-2002-HY000-Can’t-connect-to-local-MySQL-server-through-socket-‘-tmp-mysql-sock’-61"><a href="#1、ERROR-2002-HY000-Can’t-connect-to-local-MySQL-server-through-socket-‘-tmp-mysql-sock’-61" class="headerlink" title="1、ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’ (61)"></a>1、ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’ (61)</h4><p>解决方法：</p><pre><code>sudo /usr/local/mysql/support-files/mysql.server start</code></pre><h4 id="2、Error-Command-failed-bin-sh-mysql-command-not-found"><a href="#2、Error-Command-failed-bin-sh-mysql-command-not-found" class="headerlink" title="2、Error: Command failed: /bin/sh: mysql: command not found"></a>2、Error: Command failed: /bin/sh: mysql: command not found</h4><p>解决方法：<br>有可能是/user/local/bin目录下缺失mysql导致，需要以下方法来解决：把MYSQLPATH/bin/mysql映射到/usr/local/bin目录下：</p><pre><code>$ cd /usr/local/bin$ ln -fs /MYAQLPATH/bin/mysql mysql</code></pre><p>注意：这里的MYAQLPATH要替换成/usr/local/mysql-5.7.16-osx10.11-x86_64/，即base Directory中的路径</p>]]></content>
<summary type="html">
<h2 id="安装配置mysql"><a href="#安装配置mysql" class="headerlink" title="安装配置mysql"></a>安装配置mysql</h2><h3 id="安装包安装："><a href="#安装包安装：" class="head
</summary>
<category term="工具" scheme="https://zqinmiao.github.io/categories/%E5%B7%A5%E5%85%B7/"/>
<category term="mac" scheme="https://zqinmiao.github.io/tags/mac/"/>
<category term="mysql" scheme="https://zqinmiao.github.io/tags/mysql/"/>
</entry>
<entry>
<title>polyfil和shim</title>
<link href="https://zqinmiao.github.io/details/6682/"/>
<id>https://zqinmiao.github.io/details/6682/</id>
<published>2017-03-01T03:41:57.000Z</published>
<updated>2018-03-14T09:20:06.000Z</updated>
<content type="html"><![CDATA[<p>polyfill 是 shim 的一种。</p><p>shim 是将不同 api 封装成一种，比如 jQuery 的 $.ajax 封装了 XMLHttpRequest 和 IE 用 ActiveXObject 方式创建 xhr 对象；</p><p>polyfill 特指 shim 成的 api 是遵循标准的，其典型做法是在IE浏览器中增加 window.XMLHttpRequest ，内部实现使用 ActiveXObject。</p><p>在实际中为了方便做对比，会特指 shim 的 api 不是遵循标准的，而是自己设计的。</p><p><a href="https://www.zhihu.com/question/22129715/answer/21242550" target="_blank" rel="noopener">原文链接</a></p>]]></content>
<summary type="html">
<p>polyfill 是 shim 的一种。</p>
<p>shim 是将不同 api 封装成一种，比如 jQuery 的 $.ajax 封装了 XMLHttpRequest 和 IE 用 ActiveXObject 方式创建 xhr 对象；</p>
<p>polyfill 特
</summary>
<category term="笔记" scheme="https://zqinmiao.github.io/categories/%E7%AC%94%E8%AE%B0/"/>
<category term="概念" scheme="https://zqinmiao.github.io/tags/%E6%A6%82%E5%BF%B5/"/>
</entry>
<entry>
<title>关于使用Hexo搭建博客的一些问题总结</title>
<link href="https://zqinmiao.github.io/details/5507/"/>
<id>https://zqinmiao.github.io/details/5507/</id>
<published>2017-01-01T02:20:50.000Z</published>
<updated>2018-03-14T09:29:44.000Z</updated>
<content type="html"><![CDATA[<blockquote><p>闲来无事，就使用Hexo也搭建了一个博客。<br>浏览了许多漂亮的主题模版，但是总感觉自己不动手搞一个主题有违极客精神。<br>无奈审美能力有限，看来自己搞出来的主题真是不忍直视。<br>在使用Hexo的过程中遇到了一些问题，<br>通过搜索前人的总结得到了解决，现在将一些自己认为有用的点总结一下，<br>也算是对玩Hexo的一个记录。<br><a id="more"></a></p></blockquote><h1 id="文章目录"><a href="#文章目录" class="headerlink" title="文章目录"></a>文章目录</h1><blockquote><p><a href="#博客网址使用自定义域名">博客网址使用自定义域名</a><br><a href="#设置文章摘要">设置文章摘要</a><br><a href="#添加文章分享功能">添加文章分享功能</a><br><a href="#添加文章评论功能">添加文章评论功能</a></p></blockquote><h2 id="博客网址使用自定义域名">• 博客网址使用自定义域名</h2><h3 id="1-先去域名服务商处购买个喜欢的域名"><a href="#1-先去域名服务商处购买个喜欢的域名" class="headerlink" title="1. 先去域名服务商处购买个喜欢的域名"></a>1. 先去域名服务商处购买个喜欢的域名</h3><p>我是用万网买的域名。买过域名之后在后台找到，如下：<br><img src="./1.jpeg" alt="Alt 万网域名"></p><p>点击解析，并添加两条解析，如下图所示：<br><img src="./2.jpeg" alt="Alt 域名解析"><br>其中A记录的记录值的ip的获取方法，你可以ping一下github上博客仓库的名字，我的仓库名称是：zqinmiao.github.io，所以：</p><pre><code>PING github.map.fastly.net (151.101.88.133): 56 data bytes64 bytes from 151.101.88.133: icmp_seq=0 ttl=53 time=43.529 ms64 bytes from 151.101.88.133: icmp_seq=1 ttl=53 time=43.714 ms64 bytes from 151.101.88.133: icmp_seq=2 ttl=53 time=43.568 ms64 bytes from 151.101.88.133: icmp_seq=3 ttl=53 time=44.236 ms64 bytes from 151.101.88.133: icmp_seq=4 ttl=53 time=44.104 ms64 bytes from 151.101.88.133: icmp_seq=5 ttl=53 time=44.221 ms</code></pre><p>ping出的ip就是：151.101.88.133</p><p>然后在记录类型：CNAME中的记录值上填上仓库名：<code>zqinmiao.github.io.</code>这里注意：仓库名后面要加上一个点”.”</p><h3 id="2-然后回到github的博客仓库"><a href="#2-然后回到github的博客仓库" class="headerlink" title="2.然后回到github的博客仓库"></a>2.然后回到github的博客仓库</h3><p>点击博客仓库的设置，找到如下图所示的选项：<br><img src="./3.jpeg" alt="Alt 域名"></p><h5 id="将自定义的域名填入，保存即可。"><a href="#将自定义的域名填入，保存即可。" class="headerlink" title="将自定义的域名填入，保存即可。"></a>将自定义的域名填入，保存即可。</h5><p>但是上面的方法有一些问题，每次写文章将博客部署后都要部署，比较麻烦。<br>我们可以在主题文件夹下的source文件夹里建一个名字为CNAME的文档，内容是我们的域名，比如我的域名是：yayajiu.com，那么文档的内容就填：yayajiu.com<br>文档所在位置如下：<br><img src="./4.jpeg" alt="Alt 文件夹位置"><br>这样，每次部署的时候仓库里就会存在一个CNAME的文档，就不用每次到设置里再设置了。</p><h2 id="设置文章摘要">• 设置文章摘要</h2><p>在文章中使用</p><pre><code><!--more--></code></pre><p>more上面的就是文章的摘要<br>如下：<br><img src="./5.jpeg" alt="Alt 摘要"></p><h2 id="添加文章分享功能">• 添加文章分享功能</h2><p>文章的分享功能我使用的是百度的一个分享插件，只需增加一段代码即可。<br>还有开发版，可以自己定制，很简单。<a href="http://share.baidu.com/code" target="_blank" rel="noopener">官网链接</a></p><h2 id="添加文章评论功能">• 添加文章评论功能</h2><p>我使用的评论插件，<a href="https://imsun.net/posts/gitment-introduction/#more" target="_blank" rel="noopener">这是插件作者的教程，很详细</a></p><p>如果想使用其他的评论插件，可以参考知乎<a href="https://www.zhihu.com/question/57426274" target="_blank" rel="noopener">如何评价“多说”即将关闭？有什么替代方案？</a>下的回答</p><hr><h4 id="感觉也没什么要总结了，关于Hexo的用法，官方文档看一遍应该就手到擒来了。"><a href="#感觉也没什么要总结了，关于Hexo的用法，官方文档看一遍应该就手到擒来了。" class="headerlink" title="感觉也没什么要总结了，关于Hexo的用法，官方文档看一遍应该就手到擒来了。"></a>感觉也没什么要总结了，关于Hexo的用法，<a href="https://hexo.io/zh-cn/docs/" target="_blank" rel="noopener">官方文档</a>看一遍应该就手到擒来了。</h4>]]></content>
<summary type="html">
<blockquote>
<p>闲来无事，就使用Hexo也搭建了一个博客。<br>浏览了许多漂亮的主题模版，但是总感觉自己不动手搞一个主题有违极客精神。<br>无奈审美能力有限，看来自己搞出来的主题真是不忍直视。<br>在使用Hexo的过程中遇到了一些问题，<br>通过搜索前人的总结得到了解决，现在将一些自己认为有用的点总结一下，<br>也算是对玩Hexo的一个记录。<br>
</summary>
<category term="Hexo" scheme="https://zqinmiao.github.io/categories/Hexo/"/>
<category term="hexo" scheme="https://zqinmiao.github.io/tags/hexo/"/>
</entry>
</feed>