Vuepress不止可以这样
还可以是这样
运行环境需要依赖 node ，所以在安装之前，请确保 *** 作系统已经安装了node，我运行时的版本为 v14.17.3
在此 blog-demo 文件夹内，进入 cmd 窗口中，运行下面两个命令
在 docs/.vuepress/config.js 下，添加下面内容( docs,.vuepress,config.js都需要你自己创建 )
运行
恭喜你，你已经搭建成功了，是不是很简单!!
接下来，你可以简单的发布第一篇文章
因为 Vuepress 会自动将 docs/xx.md 文件，解析成 xx.html ，在此 docs 文件夹下，创建 .md 文件就可以了
然后在此 我的第一篇Vuepress文章.md 中，随便写点什么
然后你便可以在站点首页看到这篇文章了
我从github中，复制下来之后，在浏览器中看到的最终效果为
在 config.js 内，找到 navbar 项，此项便是修改导航栏的，具体配置，可以查看 Vuepress navbar 的配置
成功修改
使用Vuepress搭建博客，只需要简单的几步便可以了，下面是用到的所有链接
关于如何部署，我改天的时候，再写一篇关于部署的文章，你也可以看一下这篇 部署
，如果你有任何疑问，可以在我博客中，联系我
VuePress 由两部分组成：第一部分是一个极简静态网站生成器 (opens new window)，它包含由 Vue 驱动的主题系统和插件 API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue 将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。
事实上，一个 VuePress 网站是一个由 Vue、Vue Router和 webpack驱动的单页应用。如果你以前使用过 Vue 的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用 Vue DevTools 去调试你的自定义主题。
在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于 Nuxt (opens new window)的 nuxt generate 命令，以及其他的一些项目，比如 Gatsby
1、创建并进入一个新目录
2、使用你喜欢的包管理器进行初始化
3、将 VuePress 安装为本地依赖
我们已经不再推荐全局安装 VuePress
4、创建你的第一篇文档
5、在 package.json 中添加一些 scripts
这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些 scripts 已经被添加。
6、在本地启动服务器
VuePress 会在 http://localhost:8080 (opens new window)启动一个热重载的开发服务器。
现在，你应该已经有了一个简单可用的 VuePress 文档。接下来，了解一下推荐的 目录结构 和 VuePress 中的 基本配置。
VuePress 遵循 “约定优于配置” 的原则，推荐的目录结构如下：
如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个 .vuepress 目录，所有 VuePress 相关的文件都将会被放在这里。你的项目结构可能是这样：
一个 VuePress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 JavaScript 对象：
对于上述的配置，如果你运行起 dev server，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress 内置了基于 headers 的搜索 —— 它会自动为所有页面的标题、h2 和 h3 构建起一个简单的搜索索引。
你也可以使用 YAML (.vuepress/config.yml) 或是 TOML (.vuepress/config.toml) 格式的配置文件。
一个 VuePress 主题应该负责整个网站的布局和交互细节。在 VuePress 中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、 侧边栏（sidebar）和 首页（homepage） 等，
由于 VuePress 是一个标准的 Vue 应用，你可以通过创建一个 .vuepress/enhanceApp.js 文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp.js 应该 export default 一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的 Vue 插件、注册全局组件，或者增加额外的路由钩子等：
觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧
2.1 新建文件夹docs
配置package.json，添加下述两行
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}}
进入docs文件夹 创建 README.md文件
此时运行命令
npm run docs:dev
此时文件夹结构
study
+--docs
+----README.md
+--package.json
运行访问http://localhost:8080/
image.png
结束运行 ，执行命令
npm run docs:build
然后看文件变化 多了个node_modules
docs 多了个 .vuepress文件夹
study+--docs+----.vuepress+------ dist //打包后的文件夹+----README.md+--package.json+--node_modules
我们在.vuepress 创建
config.js 文件
添加
module.exports = {
title: 'Adroi媒体API 接口文档', // 设置网站标题
description : 'Adroi',
base : '/v1/adroi-h5/adroiapi/',
themeConfig : {
nav : [
{ text: '接口定义', link: '/apiword' },
{ text: '接口字段定义', link: '/api' },
{ text: '附录：错误码', link: '/error' }
],
sidebar: {
'/' : [
"/", //指的是根目录的md文件 也就是 README.md 里面的内容
"apiword", 根目录创建 apiword.md文件 "api",根目录创建 api.md文件 "error" 根目录创建 error.md文件 ]
},
sidebarDepth : 2
}}
image.png
3）添加静态图片
4)添加指定样式
添加样式 分两种 一种不用预编译处理、一种使用
//不使用预编译处理//直接在md文件底部添上<style></style>
//使用预编译处理
首先需要安装所需的模块 举例：stylus
npm i stylus stylus-loader -D<style lang="stylus"></style>
5)vuePress可添加js代码
既然是尤大大的作品 那肯定是支持vue语法的
在MD文件中直接写入js的语法
<script>
export default{
//...do something
}</script>
6)代码发布或上传至服务器
关于发布问题：首先我们知道在打包后的文件都是静态文件之前的MD文件都被打包成html静态文件了,其次在文件config.js中 base至关重要
6-1发布在云盘中如百度云盘 github上可直接通过链接访问
在云盘上创建根目录如vuepress，然后在config中 bese这部分就填写/vuepress,然后进行打包 *** 作，再然后把打包后的文件上传至云盘上的vuepress文件中
6-2 通过服务器发布
在服务器上安装Apache或者nginx 这里拿nginx举例：
至于nginx 安装 以及配置文件的解读使用 我这里就不详述了，不了解的童鞋可以自己查阅相关文件
同样base的填写很重要
//为了简单明了 我们把打包好的文件放入nginx中html文件下 之前的文件可以清空server {
listen 8081 //监听8081端口
server_name localhost//localhost:8081即可指向也可写别名如local.vuepress.com.cn 那我们访问这个端口的别名加端口就可以
location / {
root /nginx/nginx-1.9.15/html//至关重要你的入口文件在本机的位置
index index.html index.htm//入口文件
}
}
转载于：https://www.jianshu.com/p/7a2cc8a7f40c
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）