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 ...
随机推荐
- python 定位
#字符串定位 使用str.find() 其结果为如下: #列表中元素的定位 使用list.index() 其结果如下:
- 洛谷P2912 牧场散步Pasture Walking
题目描述 The \(N\) cows (\(2 \leq N \leq 1,000\)) conveniently numbered \(1..N\) are grazing among the N ...
- vue教程6-图表
引入 cnpm install echarts --save #在vue项目目录下安装echarts 静态折线图 linechart.js import echarts from 'echarts' ...
- 题解 P1016 旅行家的预算
题目传送门(以纪念调了两个半小时的单调队列) emmm这题单调队列可海星... 因为每个点有油量无限的,但是油箱容量是无限的(正好反的一道题 SP348 EXPEDI - Expedition) 所以 ...
- Codeforces 140F(坐标系点对称)
要点 结论:如果坐标系一堆点两两对称于某一重心,则排序后第1个和第n个为一对,以此类推. 枚举所有可能的重心点并check.因为隐藏的点不超过k个,所以点1-k+1都可能跟第n个匹配.对右侧同样适用, ...
- 《四 spring源码》利用TransactionManager手写spring的aop
事务控制分类 编程式事务控制 自己手动控制事务,就叫做编程式事务控制. Jdbc代码: Conn.setAutoCommite(false); // 设置手动控制事务 Hibern ...
- C#关键字:yield
yield是C#为了简化遍历操作实现的语法糖.在语句中使用 yield 关键字,表示在该关键字所在的方法.运算符或 get 访问器是迭代器.有两种形式: yield return <expres ...
- java 与 c#的 中 字符串比较“==”与“equals”的差异
.net中,其字符串特有的驻留机制,保证了在同一进程中,相同字符序列的字符串,只有一个实例,这样能避免相同内容的字符串重复实例化,以减少性能开销. 先来回顾一下c#中的代码: public stati ...
- 啊哈算法之宽搜BFS解救小哈
简述 本算法摘选自啊哈磊所著的<啊哈!算法>第四章第三节的题目——BFS算法再次解救小哈.文中代码使用C语言编写,博主通过阅读和理解,重新由Java代码实现了一遍,以此来理解BFS算法.关 ...
- css实现瀑布流
<style> .container{ column-width:250px; -webkit-column-width:250px; ...