使用技术:
VuePress - Vue驱动的静态网站生成器
仓库地址:https://github.com/yinian-R/vuepress-demo
# #安装
纱全球添加vuepress #或者:npm安装- g vuepress
如果你想在一个现有项目中使用VuePress,同时想要在该项目中管理文档,则应该将VuePress安装为本地依赖。
# #没有项目可以初始化
纱init
# #将VuePress作为一个本地依赖安装
纱添加- d vuepress #或者:npm安装- d vuepress
# #新建一个文档文件夹
mkdir文档
# #新建一个减价文件
回声#你好VuePress !比;文档/README.md
# #开始写作
npx vuepress开发文档
之前
接着,在包中。json里加一些脚本:
{
"脚本":{
“文档:dev”:“vuepress dev文档”,
:“文档:构建vuepress构建文档”
}
}
之前
基本配置
．
├─文档
│├─README.md
│└─.vuepress
│└─config.js
之前
一个VuePress网站必要的配置文件是.vuepress/配置。js,它应该导出一个JavaScript对象:
模块。出口={
标题:“你好VuePress”,
描述:“只是玩耍'
}
之前
创建公共文件夹,主要用于存放静态资源
．
├─文档
│└─.vuepress
│└─公共
│└─形象
│└─favicon.ico
之前
添加网站图标,修改.vuepress/配置。js内容
模块。出口={
头:“
(“链接”,{rel:“图标”,href:“/图像/ico的位于}]
］
};
之前
你可以通过themeConfig。nav增加一些导航栏链接:
模块。出口={
themeConfig: {
导航:[
{文本:“主页”链接:'/'},
{文本:“指南”链接:“/指导/眪,
{
文本:“语言”,
项目:(
{文本:“中文”,链接:“/语言/中国/眪,
{文本:“英语”,链接:“/语言/英语/'}
］
},
{文本:“GitHub”链接:“https://github.com”}
］
}
};
之前
需要在dosc/README。医学指定:真正的
---
:真正的
heroImage:/图像/ico。位于
heroText:英雄标题
口号:英雄副标题
actionText:快速上手→
actionLink://指南
特点:
——标题:简洁至上
细节:以减价为中心的项目结构,以最少的配置帮助你专注于写作。
——标题:Vue驱动
细节:享受Vue + webpack的开发体验,在减价中使用Vue组件,同时可以使用Vue来开发自定义主题。
——标题:高性能
细节:VuePress为每个页面预渲染生成静态的HTML,同时在页面被加载的时候,将作为水疗运行。
页脚:麻省理工学院|版权许可软件是2018年至今埃文
---
之前
想要使侧边栏(侧边栏)生效,需要配置themeConfig.sidebar,基本的配置,需要一个包含了多个链接的数组:
模块。出口={
themeConfig: {
侧边栏:(
“/?
['/你好','你好页面']
］
}
};
之前
设置部署站点的基础路径。
模块。出口={
基础:/vuepress-demo/,
};
之前
在你的项目中,创建一个如下的部署。上海文件
#?usr/bin/env bash
#确保脚本抛出遇到的错误
设置- e
#生成静态文件
npm运行文档:构建
#进入生成的文件夹
cd docs/.vuepress/dist
#如果是发布到自定义域名
#回声“www.example.com”比;CNAME
git init
git添加一
git commit - m“部署”
#如果发布到https:// .github.io.git主人
#如果发布到https://
