心得技巧
手把手教你用 VuePress 快速搭建个人技术博客~
发布时间：2022-07-01 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了手把手教你用 VuePress 快速搭建个人技术博客~，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
一、什么是 VuePress ?
VuePress 是基于 vue 的极简静态网站生成器，实际上就是一个 vue 的单页应用，内置 webpack，可以用来写文档。详见 VuePRess中文网
VuePress 可用于将 markdown 文件展示为 WEB 页面
二、展示效果
首页
文档页
三、开始搭建
目标F1a;记录我学习HTML、CSS、JavaScript的笔记。创建含有三篇文章（HTML、CSS、JavaScript）的项目
前提条件
使用 VuePress 需要先安装 Node.js，版本号要在 8.6 以上
1.创建项目目录并进入
mkdir my-vuepress
cd my-vuepress
2.初始化
yarn inIT -y
# 或者使用 npm init -y
以下都将使用 yarn 包管理器
3.将 VuePress 安装为本地依赖
yarn add -D vuepress # 安装为开发依赖
4.创建文件夹和文件
基本文件夹结构
my-vuepress
├─── docs
│ ├── README.md
│ └── .vuepress
│ ├── public
│ ├── LOGo.png
│ └── config.js
└── package.json
文档文件夹结构
my-vuepress
├─── docs
│ ├── css
│ ├── JavaScript
│ ├── html
│ ├── assets
│ ├── REMDME.md
│ ├── HTML01.md
│ ├── HTML02.md
│ ├── HTML03.md
│ ├── HTML04.md
│ ├── HTML05.md
其中，每个文章的文件夹内都需要有一个 README.md 文件，该文件是每篇文章的首页。剩余的md文件是子页面。assets 存放图片等内容，md 文件中不要使用一级标题，引用资源时路径使用相对路径
5.在 package.JSON 中添加 scripts
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
效果如下：
{
"name": ";my-vuepress",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDePEndencies": {
"vuepress": "^1.8.2"
},
"scripts": {
"dev": "vuepress dev docs",
"build": "vuepress build docs"
}
}
6.配置 README.md
README.md 是项目首页的内容，如果想快速看到效果，可以直接在里面写一段内容，例如：
## 欢迎访问我的第一个页面
然后运行
yarn dev
即可看到页面效果：
推荐的用法
推荐在 README.md 文件中使用 YAML 语法添加内容生成首页
示例
---
home: true
heROImage: logo.png
tagline: HTML + CSS + JavaScript
actionText: 开始学习 →
actionLink: /HTML/
features:
- title: HTML
details: 超文本标记语言
- title: CSS
details: 层叠样式表
- title: JavaScript
details: JS脚本
footer: 静夜聆雨 © 2021
---
actionText: 开始学习 → actionLink: /HTML/
点击开始学习，会先进入“HTML”的页面
效果
7.配置 config.js
module.exports = {
title: '我的vuepress', //网站标题
description: '我的个人网站', //网站描述
head: [ //注入到当前HTMl页面 <head> 中的标签
['link', {
rel: 'icon',
href: '/logo.png' //图片应存放在Public目录下
}], // 增加一个自定义的 favicon(网页标签的图标)
],
markdown: {
lineNumbers: false // 代码块显示行号
},
themeConfig: {
nav: [{ //导航栏
text: 'HTML笔记',
link: '/html/'
},
{
text: 'CSS笔记',
link: '/css/'
},
{
text: 'JS笔记',
link: '/JavaScript/'
}
],
sidebar: {
//sidebar: 'auto', // 侧边栏配置,设置auto是自动配置
//sidebarDepth: 2, // 侧边栏显示2级
'/html/': [{
title: 'HTML笔记',
sidebarDepth: 2,
collapsable: true, //可折叠
children: ['', 'HTML01', 'HTML02', 'HTML03', 'HTML04', 'HTML05'] //2级页面，第一个设置为空字符串时，显示的是README.md的内容
}],
'/css/': [{
title: 'CSS笔记',
sidebarDepth: 2,
collapsable: true,
}],
'/JavaScript/': [{
title: 'JS笔记',
sidebarDepth: 2,
collapsable: true,
}]
}
},
/**
* Apply plugins，ref：https://v1.vuepress.vuejs.org/zh/plugin/
*/
// 插件，安装后才能使用 ，安装方法 yarn add -D 插件名称
plugins: [
'@vuepress/plugin-back-to-top', //返回顶部的插件
'@vuepress/plugin-medium-zoom', //图片放大的插件
[
'one-click-copy',
{
copyMessage: '复制成功'
}
],
['vuepress-plugin-code-copy', true] //一键复制的插件
]
}
8.配置完成，查看效果
运行 yarn dev，启动服务器
个人博客就搭建好啦！
脚本宝典总结
以上是脚本宝典为你收集整理的手把手教你用 VuePress 快速搭建个人技术博客~全部内容，希望文章能够帮你解决手把手教你用 VuePress 快速搭建个人技术博客~所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
猜你在找的心得技巧相关文章
- clion结合vcpkg以及GTest的使用 2022-07-07
- EGF 2022-06-06
- ExtJS 布局-Column布局（Column layout） 2022-06-05
- 颜色之ARGB与RGB、RGBA的区别与介绍 2022-04-15
- rgba中的a是什么意思 CSS之RGBA颜色指南 2022-04-15
- rootfs -根文件系统制作 2022-07-07
- 网页简单布局之结构与表现原则分享 2022-04-15
- 小项目中怎么防止Vue的闪现画面效果 2022-04-15
- 隐藏 Web 中的元素方法及优缺点教程详解 2022-04-15
- 告别硬编码让你的前端表格自动计算的实例代码 2022-04-15
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程