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 ...
随机推荐
- python2与python3 版本区别
目录 编码 输入输出 中文 除法 长整形 内置函数map xrange init reduce 字符串类型 dict字典 经典类 新式类 未完待补充 编码 python2默认编码器为ascii码(只支 ...
- mysql联合查询(UNION)
SECLET USER_NAME FROM USERS UNION [ALL] SECLET GNAME FROM SCORES 可以把多条查询语句所产生的结果纵向连接为一体 ALL关键字可以显示全部 ...
- css各种水平垂直居中
css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...
- vue中做出购物车的功能
效果展示: 一:html结构 <div id="buyButton" class="btn-buy"> <button onclick=&qu ...
- ES6新特性使用小结(四)
十一.Proxy .Reflect ①.Proxy 的概念和常用方法 { let obj = { //1.定义原始数据对象 对用户不可见 time: '2017-09-20', name: 'net' ...
- Linux —— awk命令
- 作用: 强大的文本分析工具,对于文本分析来说绝对是一把利器 - 语法: awk '{pattern + action}' {filenames} pattern需要查找的内容 action 查找到 ...
- poj3264_Balanced Lineup
Balanced Lineup Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 42349 Accepted: 19917 ...
- Selenium 开源书(一): Selenium历史
Selenium历史 Selenium最初由Jason Huggins于2004年开发,作为ThoughtWorks的内部工具.Huggins后来加入了ThoughtWorks的其他程序员和测试人员, ...
- 050 Pow(x, n)
实现 pow(x, n).示例 1:输入: 2.00000, 10输出: 1024.00000示例 2:输入: 2.10000, 3输出: 9.26100详见:https://leetcode.com ...
- reaver 破解wifi
1. 无线网卡设置为监控模式 airmon-ng start wlan0 2. 获取附近路由信息 airodump-ng wlan0mon 3. 使用reaver破解wifi reaver -i wl ...