Skip to content

Commit 29b9fcb

Browse files
author
daiwanxing
committed
feat: update vuepress 2.0 beta
1 parent f82e092 commit 29b9fcb

File tree

12 files changed

+7516
-22038
lines changed

12 files changed

+7516
-22038
lines changed

‎.gitignore

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
node_modules
2-
/docs/.vuepress/dist
2+
/docs/.vuepress/dist
3+
/docs/.vuepress/.temp
4+
/docs/.vuepress/.cache

‎docs/.vuepress/config.js

+38-45
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,37 @@
1+
2+
const themeConfig = {
3+
darkMode: true,
4+
lastUpdated: true,
5+
lastUpdatedText: "上一次更新时间",
6+
logo: "/logo.png",
7+
repo: "https://github.com/daiwanxing/frontend-notes",
8+
repoLabel: "GitHub",
9+
sidebar: {
10+
'/guide/': [
11+
{
12+
text: 'CSS章节',
13+
link: "/guide/css-doc",
14+
activeMatch: "/"
15+
},
16+
{
17+
text: "浏览器章节",
18+
link: "/guide/broswer-doc"
19+
},
20+
{
21+
text: "JavaScript章节",
22+
link: "/guide/js-doc"
23+
}
24+
]
25+
},
26+
editLink: false
27+
}
28+
129
module.exports = {
230
title: '前端笔记小册',
31+
lang: "zh-CN",
332
base: "/frontend-notes/",
33+
description: '学而不思则罔，思而不学则殆',
434
port: 8088,
5-
description: '用来记录自己平日的学习笔记',
635
locales: {
736
"/": {
837
lang: "zh-CN",
@@ -13,48 +42,12 @@ module.exports = {
1342
['link', { rel: 'icon', href: '/fav.ico'}],
1443
['meta', { name: "viewport", content: "width=device-width, initial-scale=1.0"}]
1544
],
16-
themeConfig: {
17-
search: true,
18-
lastUpdated: '上次更新时间',
19-
logo: "/logo.png",
20-
sidebarDepth: 2,
21-
sidebar: [
22-
{
23-
title: "浏览器笔记",
24-
path: "/broswer-doc/",
25-
},
26-
{
27-
title: "vue-router4 笔记",
28-
path: "/vue-router4-doc/",
29-
},
30-
{
31-
title: "javascript笔记",
32-
path: "/js-doc/",
33-
},
34-
{
35-
title: "css 笔记",
36-
path: "/css-doc/",
37-
},
38-
{
39-
title: "Vue3响应式系统简单实现",
40-
path: "/js-doc/reactive"
41-
},
42-
{
43-
title: "自用封装的简单工具类",
44-
path: "/tool-kit/"
45-
},
46-
{
47-
title: "常用浏览器内核版本",
48-
path: "/tool-kit/core.md"
49-
},
50-
{
51-
title: "Vue笔记",
52-
path: "/vue-doc/"
53-
},
54-
{
55-
title: "业务problem",
56-
path: "/business-doc/"
57-
}
58-
]
59-
}
45+
// themeConfig 的配置项属于主题配置
46+
themeConfig,
47+
plugins: [
48+
['@vuepress/search', {
49+
searchMaxSuggestions: 10
50+
}],
51+
'@vuepress/nprogress'
52+
]
6053
}

‎docs/.vuepress/styles/index.styl ‎docs/.vuepress/styles/index.scss

+19-19
Original file line numberDiff line numberDiff line change
@@ -50,8 +50,8 @@
5050
}
5151

5252
.shadow-loading {
53-
width 10px;
54-
height 10px;
53+
width: 10px;
54+
height: 10px;
5555
border-radius: 50%;
5656
background-color: rgba(0, 0, 0, .7);
5757
animation: shadow-loading-animate 2s steps(1, start) infinite;
@@ -65,51 +65,51 @@
6565
}
6666

6767
.grid-box > div {
68-
line-height 100px;
68+
line-height: 100px;
6969
border-radius: 5px;
7070
background-color: #282c34;
7171
color: #fff;
7272
text-align: center;
7373
}
7474

7575
.start-btn {
76-
text-decoration none;
77-
position relative;
76+
text-decoration: none;
77+
position: relative;
7878
height: 32px;
7979
padding: 15px 35px;
8080
font-size: 24px;
8181
background-color: #1890ff;
8282
border-color: #1890ff;
8383
border-radius: 8px;
84-
color #fff;
84+
color: #fff;
8585
border-color: transparent;
8686
text-shadow: 0 -1px 0 rgb(0 0 0 / 12%);
8787
cursor: pointer;
88-
box-sizing inherit;
88+
box-sizing: inherit;
8989
transition: all .3s linear;
9090
}
9191

9292
.svg-arrow {
93-
position absolute;
94-
right -1px;
93+
position: absolute;
94+
right: -1px;
9595
transform: rotate(180deg) translateX(-100%);
96-
transition transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
96+
transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
9797
}
9898

9999
.start-btn span {
100-
transition transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
100+
transition: transform .4s cubic-bezier(0.165, 0.84, 0.44, 1);
101101
}
102102

103103
.start-btn:hover span {
104-
transform translateX(-15px)
104+
transform: translateX(-15px)
105105
}
106106

107107
.start-btn:hover .svg-arrow {
108-
transform translateX(-10px) rotate(180deg);
108+
transform: translateX(-10px) rotate(180deg);
109109
}
110110

111111
.home {
112-
margin-top 0.5rem !important;
112+
margin-top: 0.5rem !important;
113113
}
114114

115115
.home-top {
@@ -121,13 +121,13 @@
121121
}
122122

123123
.home-top .website {
124-
display flex;
125-
justify-content center;
126-
align-items center;
124+
display: flex;
125+
justify-content: center;
126+
align-items: center;
127127
margin: 3rem 0;
128128
}
129129

130130
.home-top .start-btn {
131-
display flex;
132-
margin auto
131+
display: flex;
132+
margin: auto
133133
}

‎docs/README.md

+9-31
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,9 @@
1-
<div class="home">
2-
<div class="home-top" style="text-align: center;">
3-
<div class="website">
4-
<img :src="$withBase('/logo.png')" alt="logo" width="80" height="80">
5-
<h3>前端笔记小册</h3>
6-
</div>
7-
<div class="main-button">
8-
<button class="start-btn" onclick="location.assign('/frontend-notes/broswer-doc/')">
9-
<span>阅读小册</span>
10-
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 40 40" class="svg-arrow">
11-
<g id="箭头" transform="translate(-370 -298)">
12-
<circle id="椭圆_4" data-name="椭圆 4" cx="20" cy="20" r="20" transform="translate(370 298)" fill="#fff" opacity="0.4"/>
13-
<path id="箭头-2" data-name="箭头" d="M293.171,268a1.992,1.992,0,0,1-1.414-.586l-5.292-5.293a3,3,0,0,1,0-4.242l5.292-5.293a2,2,0,0,1,2.828,2.828L290,260l4.585,4.586A2,2,0,0,1,293.171,268Z" transform="translate(99.621 58)" fill="#fff"/>
14-
</g>
15-
</svg></button>
16-
</div>
17-
</div>
18-
<div class="appenidx">
19-
<p>
20-
<blockquote>学而不思则罔，思而不学则怠 - 孔子</blockquote>
21-
</p>
22-
<ul>
23-
<li>
24-
<a href="https://www.bilibili.com/read/cv11408693">Vue3 2021 Conf - 杭州</a>
25-
</li>
26-
<li>
27-
<a href="https://www.bilibili.com/video/BV1kh411Q7WN">下一代前端工具Vite介绍 中英双语字幕</a>
28-
</li>
29-
</ul>
30-
</div>
31-
</div>
1+
---
2+
home: true
3+
heroImage: /logo.png
4+
actions:
5+
- text: 立即阅读
6+
link: /guide/css-doc
7+
type: primary
8+
footer: ISC Licensed | Copyright © 2021-Present wonder_dai
9+
---

‎docs/guide/README.md

Whitespace-only changes.

‎docs/broswer-doc/index.md ‎docs/guide/broswer-doc/index.md

File renamed without changes.

‎docs/css-doc/index.md ‎docs/guide/css-doc/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ grid-auto-flow指明了grid-item的放置顺序（是先行后列row，还是先
172172
```html
173173
<img srcset="1x.png 128w, 2x.png 256">
174174
<!-- 表示当img的宽度为128是展示1x.png 宽度为256时展示2x.png -->
175-
<img srcset="https://www.hetianlab.com/img/home/10.jpg?e5a1f659 256w, https://www.hetianlab.com/img/home/6.jpg?e6b206e9 512w"
175+
<img srcset="https://www.hetianlab.com/img/home/10.jpg?e5a1f659 256w, https://www.hetianlab.com/img/home/6.jpg?e6b206e9 512w"
176176
src="https://www.hetianlab.com/img/home/12.jpg?7db3a17a"
177177
sizes="(max-width: 360px) 512px, 128px"
178178
>

‎docs/js-doc/index.md ‎docs/guide/js-doc/index.md

File renamed without changes.

‎docs/js-doc/reactive.md ‎docs/guide/js-doc/reactive.md

File renamed without changes.

‎docs/vue-doc/index.md

+19-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Vue2 源码
1+
# Vue2
22

33
## Vue2 数组是如何实现数据侦测的
44

@@ -52,4 +52,21 @@ function def (target, key ,val) {
5252

5353
相同点：都是Watcher构造出来的实例
5454

55-
Vue有三个watch， 组件watch，用户watch，computed watch
55+
Vue有三个watch， 组件watch，用户watch，computed watch
56+
57+
## 组件的data为什么必须是一个函数 而且 需要return一个对象
58+
59+
一个组件就是一个vue的实例，即便引入了多个相同的组件，那么也会生成多个实例，倘若data定义为一个普通的原始对象，那么其他组件引入该组件并进行操作时，更改了引入组件的状态，进而会影响到同样也引入了该组件的组件状态。
60+
61+
本质就是就是相当于，data对象如果直接放到原型上进行操作，那么其他变量操作了原型上的数据会造成数据污染
62+
63+
## key
64+
65+
使用v-for循环生成一个列表时，通常需要给每一个item绑定一个key，这是便于在更新DOM时，找出只需要比较上次生成的VDOM不同的key那一个进行更细粒度的更新。
66+
67+
68+
## diff
69+
70+
Vue3 在diff算法中相比vue2增加了静态标记，作用于是给将来会发生变化的地方添加一个flag标记
71+
72+
## diff

0 commit comments

Comments
 (0)