vuePress的使用
今天来玩一玩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的使用的更多相关文章
- 通过VuePress管理项目文档(二)
通过vue组件实现跟:Element相似的效果.需要在VuePress网站中将自己的项目中的Vue组件运行结果展示在页面中. 至于如何将组件在VuePress网站中展示请参考:https://segm ...
- 通过VuePress管理项目文档(一)
VuePress 相关链接 完整的Vue组件代码以及完整的文档,仅适用于个人参考学习: 文档预览地址:预览链接 使用VuePress编辑文档的代码访问:组件文档 完整代码:组件代码 Vue组件开发 这 ...
- vuepress 学习心得
vuepress是一个静态网站生成器,在我看来就是写博客和教程的好工具.教程请见官网:https://www.vuepress.cn 安装方法建议局部安装:node8.0以上,新建vue项目,可能会出 ...
- VuePress
VuePress 这篇文章主要是记录自己在使用VuePress过程中所遇到的问题以及如何一步一步的解决问题. 安装vuepress前,请确保你的 Node.js 版本 >= 8 全局安装 # 安 ...
- 超详细动手搭建一个Vuepress站点及开启PWA与自动部署
超详细动手搭建一个Vuepress站点及开启PWA与自动部署 五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了. 记得最后一定要看注意事项! Vuepress介绍 官网:http ...
- 在centos7 上部署 vuepress
vuepress是一款十分优秀简洁的文档生成器,可以根据目录下的md文档自动生成对应的html文件,界面简洁大方.每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加 ...
- VuePress从零开始搭建自己的博客
VuePress是什么? VuePress是以Vue驱动的静态网站生成器,是一个由Vue.Vue Router和webpack驱动的单页应用.在VuePress中,你可以使用Markdown编写文档, ...
- 手把手教你使用 VuePress 搭建个人博客
手把手教你使用 VuePress 搭建个人博客 有阅读障碍的同学,可以跳过第一至四节,下载我写好的工具包: git clone https://github.com/zhangyunchencc/vu ...
- 使用laravel快速构建vuepress管理器
使用laravel快速构建vuepress管理器 介绍 刚刚学了下laravel感觉很方便,最近也在用vuepress做个人博客,但是感觉每次写文章管理文章不是特别方便,就使用laravel写了这个v ...
随机推荐
- Linux命令 查看Linux版本和是否联网
1.查看Linux内核版本 1.1 $ cat /proc/version [heima01@heima01 ~]$ cat /proc/version Linux version 2.6.32-57 ...
- centos 创建 logrotate 进行日志分割
这里就不赘述logrotate了,具体是什么,有什么作用,自行百度. 我们先说下,如何进行nginx的日志切割: 比如:日志目录为:/usr/local/nginx/logs/access.log按照 ...
- Python中输出字体的颜色设置
1.实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.控制字符颜色的转义序列是以ESC开头,即用\033来完成 2.书写过程 开头部分: \033[显示方式;前 ...
- 转 AIX filesystemcache引发的Oracle事故
http://blog.itpub.net/26015009/viewspace-1806629/
- SpringBoot---Web开发---WebSocket
[广播式] 1. <?xml version="1.0" encoding="UTF-8"?> <project xmlns="ht ...
- GPIO的翻转操作方法
STM32在进行IO翻转操作的时候可以使用以下方法:以PE.5为例 GPIO_WriteBit(GPIOE,GPIO_Pin_5,(BitAction)(1-(GPIO_ReadOutputDataB ...
- Zepto核心模块源代码分析
一.Zepto核心模块架构 Zepto核心模块架构图 该图展示了Zepto核心模块架构代码的组织方式.主要分为私有变量.函数和暴露给用户的所有api. Zepto核心模块架构代码 该图展示了Zepto ...
- 《javascript设计模式》笔记之第十章 和 第十一章:门面模式和适配器模式
第十章:门面模式 一:门面模式的作用 简化已有的api,使其更加容易使用 解决浏览器的兼容问题 二:门面模式的本质 门面模式的本质就是包装已有的api来简化操作 三:门面模式的两个简单例子 下面这 ...
- EF批量插入数据耗时对比
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- [转]使用 HTML5 WebSocket 构建实时 Web 应用
HTML5 WebSocket 简介和实战演练 本文主要介绍了 HTML5 WebSocket 的原理以及它给实时 Web 开发带来的革命性的创新,并通过一个 WebSocket 服务器和客户端的案例 ...