VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
node -v
npm install -g vuepress
# npm
npx create-vuepress-site 目录名称
# yarn
yarn create vuepress-site 目录名称
项目名称
描述
维护者电子邮件
维护者名称
存储库网址
# npm
cd docs
npm install
npm run dev
# yarn
cd docs
yarn install
yarn dev
.
├── docs
│ ├── .vuepress (用于存储全局配置、组件、静态资源等。)
│ │ ├── components (此目录中的 Vue 组件将自动注册为全局组件。)
│ │ ├── theme (用于存储本地主题)
│ │ │ └── Layout.vue
│ │ ├── public (静态资源目录)
│ │ ├── styles (存储样式相关文件)
│ │ │ ├── index.styl (在 CSS 文件末尾生成的自动应用的全局样式文件的优先级高于默认样式)
│ │ │ └── palette.styl (调色板用于覆盖默认颜色常量和设置手写笔的颜色常量)
│ │ ├── templates (存储 HTML 模板文件)
│ │ │ ├── dev.html (用于开发环境的 HTML 模板文件)
│ │ │ └── ssr.html (构建时基于 Vue SSR 的 HTML 模板)
│ │ ├── config.js (配置的入口文件,也可以是或。ymltoml)
│ │ └── enhanceApp.js (应用级别增强)
│ │
│ ├── config (页面1)
│ │ └── README.md (内容页)
│ ├── guide (页面2)
│ │ ├── README.md (内容页)
│ │ └── using-vue.md (内容页)
│ └── index.md (首页)
│
└── package.json (全局配置文件)
---
home: true
heroImage: https://v1.vuepress.vuejs.org/hero.png
tagline: 项目描述:技术博客分享!!!
actionText: Quick Start →
actionLink: /guide/
features:
- title: Feature 1 Title
details: Feature 1 Description
- title: Feature 2 Title
details: Feature 2 Description
- title: Feature 3 Title
details: Feature 3 Description
footer: Made by 蜜桃先生 with ❤️
---
{
"name": "我的博客",
"version": "0.0.1",
"description": "项目描述:技术博客分享!!!",
"main": "index.js",
"authors": {
"name": "蜜桃先生",
"email": "[email protected]"
},
"repository": "www.baidu.com/我的博客",
"scripts": {
"dev": "vuepress dev src",
"build": "vuepress build src"
},
"license": "MIT",
"devDependencies": {
"vuepress": "^1.5.3"
}
}
const { description } = require('../../package')
module.exports = {
/**
* Ref:https://v1.vuepress.vuejs.org/config/#title
*/
title: 'Vuepress Docs Boilerplate',
/**
* Ref:https://v1.vuepress.vuejs.org/config/#description
*/
description: description,
/**
* Extra tags to be injected to the page HTML ``
*
* ref:https://v1.vuepress.vuejs.org/config/#head
*/
head: [
['meta', { name: 'theme-color', content: '#3eaf7c' }],
['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }]
],
/**
* Theme configuration, here is the default theme configuration for VuePress.
*
* ref:https://v1.vuepress.vuejs.org/theme/default-theme-config.html
*/
themeConfig: {
repo: '',
editLinks: false,
docsDir: '',
editLinkText: '',
lastUpdated: false,
nav: [
{
text: 'Guide',
link: '/guide/',
},
{
text: 'Config',
link: '/config/'
},
{
text: 'VuePress',
link: 'https://v1.vuepress.vuejs.org'
}
],
sidebar: {
'/guide/': [
{
title: 'Guide',
collapsable: false,
children: [
'',
'using-vue',
]
}
],
}
},
/**
* Apply plugins,ref:https://v1.vuepress.vuejs.org/zh/plugin/
*/
plugins: [
'@vuepress/plugin-back-to-top',
'@vuepress/plugin-medium-zoom',
]
}