Vuepress Doc Template

Vuepress Docs Template

LANGUAGES

# 😚 Welcome

Welcome to the Vuepress Docs Template

# 🎮 TL;DR

🔨 Usage

# ✍ Why am I doing this?

Easy to write documents for someone.

# 🔨 Usage

# Pure Document

git clone git@github.com:Rain120/vuepress-docs-template.git

yarn install # or npm install

1
2
3

Deploy

We are auto deploy when you are commit by the pre-commit of the husky hooks. So you just need to add, commit, push. Etc:

git add .
git commit -m 'feat: vuepress docs template commit'

# if you need to pulls
# git pull origin master

git push origin master

1
2
3
4
5
6
7

提示

We can also deploy by yourself, but we also deploy it when you commit, if you want to deploy by yourself, you can modify the pre-commit of the husky hooks, remove the command with npm run deploy.

npm run deploy

# Project Document

Let me see our template folders.

tree . -al 3 -I "node_modules|dist|images|.git|.DS_Store"

.
├── .github
│   └── ISSUE_TEMPLATE
│       ├── bug_report.md
│       ├── custom.md
│       └── feature_request.md
├── .gitignore
├── LICENSE
├── README.md
├── commitlint.config.js
├── deploy.sh # copy to your project root
├── docs # copy to your project root
│   ├── .vuepress
│   │   ├── components
│   │   │   └── MySWUpdatePopup.vue
│   │   ├── config.js
│   │   ├── enhanceApp.js
│   │   ├── public
│   │   │   ├── logo.png
│   │   │   └── manifest.json
│   │   ├── styles
│   │   │   └── index.styl
│   │   ├── theme
│   │   └── utils
│   │       ├── alias.json
│   │       ├── copy.js
│   │       ├── nav.js
│   │       ├── plugins.js
│   │       └── sidebarHelper.js
│   ├── README.md
│   └── zh
│       ├── guide
│       │   └── README.md
│       ├── how-to-config-docs
│       │   └── README.md
│       └── how-to-write-docs
│           └── README.md
├── package-lock.json
├── package.json
├── wechat-zhifubao-pay.png
└── yarn.lock
3 [error opening dir]

13 directories, 27 files

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

提示

First copy the docs folder and the deploy.sh file to your project root, and then we need to copy something in package.json. Let's do it.

{
  "name": "vuepress-docs-template",
  "author": "Rain120",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Rain120/vuepress-docs-template.git"
  },
  "version": "1.0.0",
  "description": "Awesome code implementation for Javascript",
  "main": "index.js",
  "scripts": {
    "lint-staged": "lint-staged",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add .",
    "plop": "./node_modules/.bin/plop",
    "docs": "npm run plop docs",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash ./scripts/deploy.sh",
    "remote": "bash ./scripts/add-remote.sh"
  },
  "keywords": [
    "docs",
    "vuepress",
    "template",
    "vuepress-docs",
    "docs-template",
    "vuepress-docs-template"
  ],
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Rain120/vuepress-docs-template/issues"
  },
  "homepage": "https://github.com/Rain120/vuepress-docs-template#readme",
  "lint-staged": {
    "{src}/**/**.ts": [
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run changelog && lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "devDependencies": {
    "@vuepress/plugin-back-to-top": "^1.5.3",
    "@vuepress/plugin-blog": "^1.9.2",
    "@vuepress/plugin-google-analytics": "^1.5.3",
    "@vuepress/plugin-medium-zoom": "^1.5.3",
    "@vuepress/plugin-pwa": "^1.5.3",
    "conventional-changelog-cli": "^2.0.35",
    "husky": "^3.0.9",
    "lint-staged": "^9.4.3",
    "markdown-it-imsize": "^2.0.1",
    "markdown-it-katex": "^2.0.3",
    "markdown-it-task-lists": "^2.1.1",
    "moment": "^2.27.0",
    "plop": "^2.7.4",
    "vuepress": "^1.5.3",
    "vuepress-plugin-awesome-gitalk": "^0.0.4",
    "vuepress-plugin-container": "^2.1.4",
    "vuepress-plugin-mathjax": "^1.2.8"
  }
}

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

提示

Now we had seen all things about package.json. We just need devDependencies, if you had someone of devDependencies, you needn't all of that.

# devDependencies

{
  "devDependencies": {
    "@vuepress/plugin-back-to-top": "^1.2.0",
    "@vuepress/plugin-blog": "^1.9.2",
    "@vuepress/plugin-google-analytics": "^1.2.0",
    "@vuepress/plugin-medium-zoom": "^1.0.0-rc.1",
    "@vuepress/plugin-pwa": "^1.3.0",
    "conventional-changelog-cli": "^2.0.27",
    "husky": "^3.0.9",
    "lint-staged": "^9.4.3",
    "markdown-it-imsize": "^2.0.1",
    "markdown-it-katex": "^2.0.3",
    "markdown-it-task-lists": "^2.1.1",
    "moment": "^2.24.0",
    "vuepress": "^1.3.1",
    "vuepress-plugin-awesome-gitalk": "^0.0.4"
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

提示

If you don't want to format your commit and changelog, there 3 package you can remove it. But if you need it and you have not config it, please go to husky

{
  "devDependencies": {
    "conventional-changelog-cli": "^2.0.27",
    "husky": "^3.0.9",
    "lint-staged": "^9.4.3"
  }
}

1
2
3
4
5
6
7

# scripts

{
  "scripts": {
    "lint-staged": "lint-staged",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0",
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs",
    "deploy": "bash ./scripts/deploy.sh",
    "remote": "bash ./scripts/add-remote.sh"
  }
}

1
2
3
4
5
6
7
8
9
10

提示

If you don't want to format your commit and changelog, there 2 scripts you can remove it. But if you need it and you have not config it, please go to husky

{
  "scripts": {
    "lint-staged": "lint-staged",
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
  }
}

1
2
3
4
5
6

# husky

{
  "lint-staged": {
    "{src}/**/**.ts": [
      "git add"
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run changelog && npm run deploy && git add . && lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
}

1
2
3
4
5
6
7
8
9
10
11
12
13

More Config Detail Please Goto the Links.

how-to-config-docs

how-to-write-docs

Now you have all mine, Enjoy yourself!! 😉😉😉

# 🤝 Contributing

We welcome all contributions. You can submit any ideas as pull requests or as a GitHub issue.

# 🔗 Links

# 👨‍🏭 Author

Front-End development engineer, technology stack: React + Typescript + Mobx, also used Vue + Vuex for a while

# 📝 License

MIT

# ☕ Coffee or Tea

如何配置文档? →