主要是关于一些vue第三方js库的使用
js库在vue的使用
driver.js–github
效果
明：使用js获取dom元素后，创建一个遮罩及指南div(可选是否添加动画),事件(关闭，上一步，下一步)
docsify快速创建api文档
快速生成文档，编写markdown自动在运行时转化为html
创建index.html
引入docsify
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="UTF-8">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| window.$docsify = {
name: '',
repo: '',
search: {
depth: 6,
paths: 'auto',
placeholder: {
'/': '搜索',
'/en/': 'Type to search'
},
noData: {
'/': '找不到结果',
'/en/': 'No Results'
},
},
loadSidebar: true,
subMaxLevel: 3,
loadNavbar: true,
}
|
编写markdown（自动配置路由）
1
2
3
4
5
6
7
8
| -doc
-en(英文文档)
-imgs(自定义图片文件夹)
_coverpage.md(封面)
_navbar.md(导航栏对应路由****每个文件夹下都可以配置导航菜单 对应当前文档的导航)
_slidebar.md(左侧菜单-当开启subMaxLevel会自动将README.md的标题作为菜单)
README.md(文档页面)
other.md(可选，多页配置 https:
|
插件
全文搜索
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
| <script>
window.$docsify = {
search: 'auto',
search : [
'/',
'/guide',
'/get-started',
'/zh-cn/',
],
search: {
maxAge: 86400000,
paths: [],
placeholder: 'Type to search',
placeholder: {
'/zh-cn/': '搜索',
'/': 'Type to search'
},
noData: 'No Results!',
noData: {
'/zh-cn/': '找不到结果',
'/': 'No Results'
},
depth: 2,
hideOtherSidebarContent: false,
namespace: 'website-1',
pathNamespaces: ['/zh-cn', '/ru-ru', '/ru-ru/v1'],
pathNamespaces: /^(\/(zh-cn|ru-ru))?(\/(v1|v2))?/
}
}
</script>
<script src="//polyfill.io/v3/polyfill.min.js?features=String.prototype.normalize"></script>
|
复制到剪贴板
1
| <script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
|
使用第三方库
docsifyV4.xx兼容vue，直接在index内注入vuejs即可使用vue
在使用基于vue的elementUI时，有一个问题就是：注入vue但是未在index使用vue，将导致elementUI不可用
index.html必须使用了关于vue的配置才可以使vue生效 举例：vueGlobalOptions
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="./css/docsify.css">
<link rel="stylesheet" href="./css/element.css">
<style>
table{
margin: 0!important;
}
</style>
</head>
<body>
<nav>
<a href="#/en/">EN</a>
<a href="#/">中文</a>
</nav>
<div id="app"></div>
<script src="./table/test.js"></script>
<script>
window.$docsify = {
vueGlobalOptions: {
data() {
return {
count: 0,
Table
};
},
},
name: '',
repo: '',
search: {
depth: 6,
paths: 'auto',
placeholder: {
'/': '搜索',
'/en/': 'Type to search'
},
noData: {
'/': '找不到结果',
'/en/': 'No Results'
},
},
loadSidebar: './docsifyConfig/_sidebar.md',
subMaxLevel: 3,
loadNavbar: './docsifyConfig/_navbar.md',
}
</script>
<script src="./js/vue.min.js"></script>
<script src="./js/element.js"></script>
<script src="./js/docsify.js"></script>
<script src="./js/search.min.js"></script>
<script src="./js/docsify-copy-code.min.js"></script>
</body>
</html>
|
在markdown中使用script
直接在README.md编写使用，只会执行一个script
1
2
3
| <script>
console.log('执行脚本')
</script>
|
Node.js图片处理库sharp
安装
npm install sharp
tips:在window下安装的sharp正常运行 但是在linux系统下需要安装二进制的sharp
使用
1
2
3
4
5
6
7
| const Sharp = require('sharp')
sharp('input.jpg')
.rotate()
.resize(200)
.toBuffer()
.then( data => {...} )
.catch( err => {...} );
|
