今天来玩一玩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. python入门的基本历程

    Python入门 1.1环境安装 python官网下载,安装之后添加环境变量. 1.2集成开发环境 PyCharm官网下载,安装后:new project-﹥pure python 设置python解 ...

  2. 输入apt-get update时出现Could not open lock file /var/lib/apt/lists/lock - open

    我看了其它的资料发现不够清楚 我只报这些错误 1.1.ps-aux 查出apt-get进程的PID,通常是一个四位数字. 不好找apt-get进程 输入此代码就好找了 ps -aux|grep apt ...

  3. csrf攻击实例

    CSRF 攻击可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击站点,从而在并未授权的情况下执行在权限保护之下的操作.比如说,受害者 Bob 在银行有一笔存款,通过对银行的网站发送请求 ht ...

  4. PHP函数生成随机数

    通常情况下,当我们要生成一个随机字符串时,总是先创建一个字符池,然后用一个循环和mt_rand()或rand()生成php随机数,从字符池中随机选取字符,最后拼凑出需要的长度,代码如下: <?p ...

  5. Mysql系列常见面试题(三)

    1.Mysql数据表在什么情况下容易损坏? 服务器突然断电导致数据文件损坏,强制关机,没有先关闭Mysql服务等. 2.Mysql有关全校的表都有那几个? Mysql服务器通过权限表老控制用户对数据库 ...

  6. Strut2 Action的生命周期

    一般而言,Action都是放在Spring容器中管理的,我会把属性设为prototype,这样,每一个请求,都会创建一个action对象. 今天碰到一个问题,当我用从一个jsp页面中输入一个属性,比如 ...

  7. 如何在CSS中解决长英文单词的页面显示问题?CSS3

    简言 在页面排版中,经常遇到长英文单词溢出段落容器的情况,如何解决该问题?现编制如下对比演示程序: 演示程序 42du.cn-在线演示程序 部分html代码 <div class="b ...

  8. 洛谷 P1202 [USACO1.1]黑色星期五Friday the Thirteenth

    黑色星期五 难度:☆ Code: #include <iostream> #include <cstdio> #include <cstring> using na ...

  9. 织梦dedecms后台登陆密码充值工具

    下载后解压,根据自己语言版本,把文件radminpass.php放入网站根目录下执行即可 点击下载:织梦dedecms后台登陆密码充值工具

  10. Centos安装iptables防火墙

    一.安装说明: 1.因为centos7.0及以上版本就默认安装了firewall防火墙,但有时候根据项目实际所需,服务器上还是需要安装iptables,以下就是具体的安装步骤: 2.因阿里云在服务器外 ...