使用VuePress快速搭建博客、在线文档、静态网站(VuePress项目创建)
VuePress介绍
VuePress
是Vuejs官方提供的一个是Vue驱动的静态网站生成器,基于Markdown语法生成网页。简单的说它就是一个快速建设文档站点的工具,在简单配置好功能后,需要做的事情就剩下写好一个个 Markdown文档。
文章图片
VuePress官网
https://www.vuepress.cn
VuePress指南
https://www.vuepress.cn/guide...
VuePress安装
安装前请安装 Node.js
Node.js下载地址
http://www.nodejs.com.cn
你可以在一个硬盘创建一个目录,例如我再D盘的根目录下创建一个VuePress目录,然后双击进入这个目录,在这个目录的路径栏(将 D:\VuePress
替换为 cmd
然后按回车)输入CMD启动cmd来执行命令。
文章图片
就会在这个目录下启动cmd命令行工具。
文章图片
VuePress安装命令
npm install -D vuepress
国内请使用
cnpm
安装会更快,可执行以下命令安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
再执行以下命令安装
VuePress
cnpm install -D vuepress
文章图片
直接粘贴命令按回车就可以开始安装,只要命令还在跑,都还没完成安装,需要耐心等待。
创建VuePress文档以上写得如此详细,就是为了照顾新手,大神请不要嫌弃。如果新手连以上的操作都不懂,建议还是要现学习一下Vue项目的创建、配置、运行、打包等基础知识。
mkdir docs && echo '# Hello VuePress' > docs/README.md
配置VuePress 在你的VuePress项目目录下的
package.json
文件添加以下代码。{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
启动VuePress项目
npm run docs:dev
文章图片
启动后,将会在你的本地开启一个http服务
文章图片
然后就可以通过
Markdown
语法来编写你的文档、博客、文章等内容了!文章图片
VuePress进一步配置 如果想要进一步完善你的
VuePress
文档,甚至是让 VuePress
像博客一样去使用,那么你可以根据 VuePress
官网提供的指南去进一步配置 VuePress
的导航栏、搜索、logo、侧边栏、代码高亮等,这样可以让你很快地学会使用 VuePress
来编写你的文章。本文作者 【使用VuePress快速搭建博客、在线文档、静态网站(VuePress项目创建)】TANKING
推荐阅读
- mybatis-plus|mybatis-plus 主键自增问题
- springboot|mybatis-plus代码生成器的使用
- mybatis|mybatis plus使用雪花算法_(傲娇的白狐)mybatis-plus初入门雪花算法
- “鲜+1”纯花水喷雾,超鲜的使用方法大公开
- iOS笔记之使用贝塞尔曲线给View/Layer添加圆角
- 极致体验!基于阿里云|极致体验!基于阿里云 Serverless 快速部署 Function
- 内卷时代下的前端技术-使用JavaScript在浏览器中生成PDF文档
- 聊聊使用@RefreshScope与nacos2整合踩到的坑
- React组件实例三大属性state|React组件实例三大属性state props refs使用详解
- Android|Android ViewBinding使用介绍