vuepress 是一款 vue 驱动的静态网站生成器，可用于产品使用手册的用途！
https://github.com/vuejs/vuepress
在开发目录下（\vuepress-master\packages\docs\docs）安装 webpack，命令为：
npm install webpack-dev-server --save-dev
进入开发目录下（\vuepress-master\packages\docs\docs）执行：
npm install
npm run dev
npm run-script build
位置：\vuepress-master\vuepress
将一下目录文件上传至服务器即可访问
# install
yarn global add vuepress
# or npm install -g vuepress
# create a markdown file
echo '# hello vuepress' > readme.md
# start writing
vuepress dev docs
# build to static files
vuepress build docs
如果想设置中文为默认国际化语言，只需要修改图中两个文件，并把 zh 目录下面的文件放到 docs 根目录，把根目录下的文件放到 en 目录即可：
config.js
const { fs, path } = require('@vuepress/shared-utils')
module.exports = ctx => ({
dest: '../../vuepress',
locales: {
'/': {
lang: 'zh-cn',
title: 'vuepress',
description: 'vue 驱动的静态网站生成器'
},
'/en/': {
lang: 'en-us',
title: 'vuepress',
description: 'vue-powered static site generator'
}
},
head: [
['link', { rel: 'icon', href: `/logo.png` }],
['link', { rel: 'manifest', href: '/manifest.json' }],
['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' }],
['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
['meta', { name: 'msapplication-tileimage', content: '/icons/msapplication-icon-144x144.png' }],
['meta', { name: 'msapplication-tilecolor', content: '#000000' }]
],
theme: '@vuepress/vue',
themeconfig: {
repo: 'vuejs/vuepress',
editlinks: true,
docsdir: 'packages/docs/docs',
// #697 provided by the official algolia team.
algolia: ctx.isprod ? ({
apikey: '3a539aab83105f01761a137c61004d85',
indexname: 'vuepress'
}) : null,
smoothscroll: true,
locales: {
'/': {
label: '简体中文',
selecttext: '选择语言',
arialabel: '选择语言',
editlinktext: '在 github 上编辑此页',
lastupdated: '上次更新',
nav: require('./nav/zh'),
sidebar: {
'/api/': getapisidebar(),
'/guide/': getguidesidebar('指南', '深入'),
'/plugin/': getpluginsidebar('插件', '介绍', '官方插件'),
'/theme/': getthemesidebar('主题', '介绍')
}
},
'/en/': {
label: 'english',
selecttext: 'languages',
arialabel: 'select language',
editlinktext: 'edit this page on github',
lastupdated: 'last updated',
nav: require('./nav/en'),
sidebar: {
'/en/api/': getapisidebar(),
'/en/guide/': getguidesidebar('guide', 'advanced'),
'/en/plugin/': getpluginsidebar('plugin', 'introduction', 'official plugins'),
'/en/theme/': getthemesidebar('theme', 'introduction')
}
}
}
},
plugins: [
['@vuepress/back-to-top', true],
['@vuepress/pwa', {
serviceworker: true,
updatepopup: true
}],
['@vuepress/medium-zoom', true],
['@vuepress/google-analytics', {
ga: 'ua-128189152-1'
}],
['container', {
type: 'vue',
before: '<pre class="vue-container"><code>',
after: 'code>pre>'
}],
['container', {
type: 'upgrade',
before: info => `` ,
after: 'upgradepath>'
}],
['flowchart']
],
extrawatchfiles: [
'.vuepress/nav/en.js',
'.vuepress/nav/zh.js'
]
})
function getapisidebar () {
return [
'cli',
'node'
]
}
function getguidesidebar (groupa, groupb) {
return [
{
title: groupa,
collapsable: false,
children: [
'',
'getting-started',
'directory-structure',
'basic-config',
'assets',
'markdown',
'using-vue',
'i18n',
'deploy'
]
},
{
title: groupb,
collapsable: false,
children: [
'frontmatter',
'permalinks',
'markdown-slot',
'global-computed'
]
}
]
}
const officalplugins = fs
.readdirsync(path.resolve(__dirname, '../plugin/official'))
.map(filename => 'official/' filename.slice(0, -3))
.sort()
function getpluginsidebar (plugintitle, pluginintro, officialplugintitle) {
return [
{
title: plugintitle,
collapsable: false,
children: [
['', pluginintro],
'using-a-plugin',
'writing-a-plugin',
'life-cycle',
'option-api',
'context-api'
]
},
{
title: officialplugintitle,
collapsable: false,
children: officalplugins
}
]
}
function getthemesidebar (groupa, introductiona) {
return [
{
title: groupa,
collapsable: false,
sidebardepth: 2,
children: [
['', introductiona],
'using-a-theme',
'writing-a-theme',
'option-api',
'default-theme-config',
'blog-theme',
'inheritance'
]
}
]
}
.vuepress\nav\zh.js
module.exports = [
{
text: '指南',
link: '/guide/'
},
{
text: '配置',
link: '/config/'
},
{
text: '插件',
link: '/plugin/'
},
{
text: '主题',
link: '/theme/'
},
{
text: '了解更多',
arialabel: '了解更多',
items: [
{
text: 'api',
items: [
{
text: 'cli',
link: '/api/cli.html'
},
{
text: 'node',
link: '/api/node.html'
}
]
},
{
text: '开发指南',
items: [
{
text: '本地开发',
link: '/miscellaneous/local-development.html'
},
{
text: '设计理念',
link: '/miscellaneous/design-concepts.html'
},
{
text: 'faq',
link: '/faq/'
},
{
text: '术语',
link: '/miscellaneous/glossary.html'
}
]
},
{
text: '其他',
items: [
{
text: '从 0.x 迁移',
link: '/miscellaneous/migration-guide.html'
},
{
text: 'changelog',
link: 'https://github.com/vuejs/vuepress/blob/master/changelog.md'
}
]
}
]
},
{
text: '0.x',
link: 'https://v0.vuepress.vuejs.org/'
}
]
.vuepress\nav\en.js
module.exports = [
{
text: 'guide',
link: '/en/guide/'
},
{
text: 'config reference',
link: '/en/config/'
},
{
text: 'plugin',
link: '/en/plugin/'
},
{
text: 'theme',
link: '/en/theme/'
},
{
text: 'learn more',
arialabel: 'learn more',
items: [
{
text: 'api',
items: [
{
text: 'cli',
link: '/en/api/cli.html'
},
{
text: 'node',
link: '/en/api/node.html'
}
]
},
{
text: 'contributing guide',
items: [
{
text: 'local development',
link: '/en/miscellaneous/local-development.html'
},
{
text: 'design concepts',
link: '/en/miscellaneous/design-concepts.html'
},
{
text: 'faq',
link: '/en/faq/'
},
{
text: 'glossary',
link: '/en/miscellaneous/glossary.html'
}
]
},
{
text: 'miscellaneous',
items: [
{
text: 'migrate from 0.x',
link: '/en/miscellaneous/migration-guide.html'
},
{
text: 'changelog',
link: 'https://github.com/vuejs/vuepress/blob/master/changelog.md'
}
]
}
]
},
{
text: '0.x',
link: 'https://v0.vuepress.vuejs.org/'
}
]