0
点赞
收藏
分享

微信扫一扫

VuePress的简单实用

sin信仰 2022-09-16 阅读 99


VuePress 由两部分组成:第一部分是一个极简静态网站生成器 (opens new window),它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

安装

VuePress 需要 Node.js (opens new window)>= 8.6

本文会帮助你从头搭建一个简单的 VuePress 文档。如果你想在一个现有项目中使用 VuePress 管理文档,从步骤 3 开始。

  1. 创建并进入一个新目录

mkdir vuepress-starter && cd

  1. 初始化

init

  1. 将 VuePress 安装为本地依赖
    我们已经不再推荐全局安装 VuePress

npm install -D vuepress

注意

如果你的现有项目依赖了 webpack 3.x,我们推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress。因为在这种情形下,npm 会生成错误的依赖树。

  1. 创建你的第一篇文档

mkdir docs && echo '# Hello VuePress'

  1. 在​​package.json​​ 中添加一些 scripts(opens new window)这一步骤是可选的,但我们推荐你完成它。在下文中,我们会默认这些 scripts 已经被添加。

{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}

  1. 在本地启动服务器

npm run docs:dev

VuePress 会在 http://localhost:8080 启动一个热重载的开发服务器。

现在,你应该已经有了一个简单可用的 VuePress 文档。

首先来到config.json修改自己所需要的文件

// .vuepress/config.js
module.exports = {
title:'《Ts教程》',
dest:'docs',
markdown: {
lineNumbers: true
},
head: [
['link', { rel: 'icon', href: '/logo.png' }]
],
sidebarDepth: 2,
themeConfig: {
logo:'/logo.png',
nav: [
// { text: '和作者做同事', link: '/join_us' },
{ text: 'OpenHarmony仓库', link: 'https://gitee.com/openharmony/' },
{ text: '视频教程', link: 'https://space.bilibili.com/480883651' },
{ text: '关于我', link: 'http://jianguojs.cn/' },
],
sidebar: [
{
title:"序",
path:"/preface"
},
{
title:"第一章:起步",
path:"/chapter1/index",
collapsable: false,
children:[
'/chapter1/mobile_development_intro',
'/chapter1/flutter_intro',
'/chapter1/install_flutter',
'/chapter1/dart'

然后修改summary.md,等文件,

要运行的话

npm run dev就可以了

运行效果:

VuePress的简单实用_ide

举报

相关推荐

0 条评论