今天来玩一玩vuePress的使用,用markdown来编辑一个页面网站,这里谈论到了简单使用,细节可以去官网上去查看

开始安装

项目依赖

// package.json

{
"name": "jkl",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"vuepress": "^0.14.10"
},
"dependencies": {
"webpack-dev-middleware": "^3.6.0"
}
}  

  这里运行:

npm i

  这里webpack一定要有,我开始安装的时候,一直报错,项目起不来。如果项目还是有问题,请查看vuepress的npm

这些东西是否全有。

接下来创建docs的文件夹,来存放你的项目文件

运行:

echo '# Hello VuePress' > docs/README.md

  来创建你的根文件

在package.json文件中添加

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

  上边的是启动项目,下边的是构建项目目录(静态打包)

开始的时候启动静态打包,出现的目录结构

config相当于vue中的路由一样的东西(配置文件)主要的东西全在这里面

配置了下标题,和地址端口号

module.exports = {
title:"武宏岩官网", host:"0.0.0.0",
port:8080,
}

  配置nav

themeConfig: {
nav: [
{ text: '主页', link: '/' },
{ text: '博文',
items: [
{ text: 'Android', link: './android' },
{ text: 'ios', link: './ios' },
{ text: 'Web', link: './web' }
]
},
{ text: '关于', link: '/about/' },
]
}

  配置侧边栏

sidebar: [
{
title: '统一页',
collapsable: false,
children: [
['../android/Android.md', '验证码登录'],
['../ios/ios.md', '账号密码登录-找回密码'],
['../web/web.md', '个人中心/我的-关于'],
]
},]

  配置页面下的跳转的方式

sidebarDepth: 2,
lastUpdated: 'Last Updated',

  完整配置

module.exports = {
title:"武宏岩官网", host:"0.0.0.0",
port:8080,
themeConfig: {
nav: [
{ text: '主页', link: '/' },
{ text: '博文',
items: [
{ text: 'Android', link: './android' },
{ text: 'ios', link: './ios' },
{ text: 'Web', link: './web' }
]
},
{ text: '关于', link: '/about/' },
],
sidebar: [
{
title: '统一页',
collapsable: false,
children: [
['../android/Android.md', '验证码登录'],
['../ios/ios.md', '账号密码登录-找回密码'],
['../web/web.md', '个人中心/我的-关于'],
]
},]
},
sidebarDepth: 2,
lastUpdated: 'Last Updated',
}

  这里面的“/”就是最外层创建的markdown,它就相当于一个页面的主页。

  咱们写的页面样式可以全部都用markdown要进行编写。

来看最后的效果(左侧黑色边框不是不小心多截一块)

是不是感觉挺简单,可以开始你的配置文件之旅了,去吧皮卡丘!!!!

可能细节不是太详细,哪不明白可以回消息。不一定什么时候回你

vuePress的使用的更多相关文章

  1. 通过VuePress管理项目文档(二)

    通过vue组件实现跟:Element相似的效果.需要在VuePress网站中将自己的项目中的Vue组件运行结果展示在页面中. 至于如何将组件在VuePress网站中展示请参考:https://segm ...

  2. 通过VuePress管理项目文档(一)

    VuePress 相关链接 完整的Vue组件代码以及完整的文档,仅适用于个人参考学习: 文档预览地址:预览链接 使用VuePress编辑文档的代码访问:组件文档 完整代码:组件代码 Vue组件开发 这 ...

  3. vuepress 学习心得

    vuepress是一个静态网站生成器,在我看来就是写博客和教程的好工具.教程请见官网:https://www.vuepress.cn 安装方法建议局部安装:node8.0以上,新建vue项目,可能会出 ...

  4. VuePress

    VuePress 这篇文章主要是记录自己在使用VuePress过程中所遇到的问题以及如何一步一步的解决问题. 安装vuepress前,请确保你的 Node.js 版本 >= 8 全局安装 # 安 ...

  5. 超详细动手搭建一个Vuepress站点及开启PWA与自动部署

    超详细动手搭建一个Vuepress站点及开启PWA与自动部署 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:http ...

  6. 在centos7 上部署 vuepress

    vuepress是一款十分优秀简洁的文档生成器,可以根据目录下的md文档自动生成对应的html文件,界面简洁大方.每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加 ...

  7. VuePress从零开始搭建自己的博客

    VuePress是什么? VuePress是以Vue驱动的静态网站生成器,是一个由Vue.Vue Router和webpack驱动的单页应用.在VuePress中,你可以使用Markdown编写文档, ...

  8. 手把手教你使用 VuePress 搭建个人博客

    手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...

  9. 使用laravel快速构建vuepress管理器

    使用laravel快速构建vuepress管理器 介绍 刚刚学了下laravel感觉很方便,最近也在用vuepress做个人博客,但是感觉每次写文章管理文章不是特别方便,就使用laravel写了这个v ...

随机推荐

  1. Linux命令 查看Linux版本和是否联网

    1.查看Linux内核版本 1.1 $ cat /proc/version [heima01@heima01 ~]$ cat /proc/version Linux version 2.6.32-57 ...

  2. centos 创建 logrotate 进行日志分割

    这里就不赘述logrotate了,具体是什么,有什么作用,自行百度. 我们先说下,如何进行nginx的日志切割: 比如:日志目录为:/usr/local/nginx/logs/access.log按照 ...

  3. Python中输出字体的颜色设置

    1.实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.控制字符颜色的转义序列是以ESC开头,即用\033来完成 2.书写过程 开头部分: \033[显示方式;前 ...

  4. 转 AIX filesystemcache引发的Oracle事故

    http://blog.itpub.net/26015009/viewspace-1806629/

  5. SpringBoot---Web开发---WebSocket

    [广播式] 1. <?xml version="1.0" encoding="UTF-8"?> <project xmlns="ht ...

  6. GPIO的翻转操作方法

    STM32在进行IO翻转操作的时候可以使用以下方法:以PE.5为例 GPIO_WriteBit(GPIOE,GPIO_Pin_5,(BitAction)(1-(GPIO_ReadOutputDataB ...

  7. Zepto核心模块源代码分析

    一.Zepto核心模块架构 Zepto核心模块架构图 该图展示了Zepto核心模块架构代码的组织方式.主要分为私有变量.函数和暴露给用户的所有api. Zepto核心模块架构代码 该图展示了Zepto ...

  8. 《javascript设计模式》笔记之第十章 和 第十一章:门面模式和适配器模式

    第十章:门面模式 一:门面模式的作用 简化已有的api,使其更加容易使用 解决浏览器的兼容问题 二:门面模式的本质 门面模式的本质就是包装已有的api来简化操作   三:门面模式的两个简单例子 下面这 ...

  9. EF批量插入数据耗时对比

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. [转]使用 HTML5 WebSocket 构建实时 Web 应用

    HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例 ...