多多彩票,印刷业现状,金三维视频网
使用技术：
vuepress - vue 驱动的静态网站生成器
仓库地址：https://github.com/yinian-r/vuepress-demo
全局安装
## 安装 yarn global add vuepress # 或者：npm install -g vuepress
现有项目
如果你想在一个现有项目中使用 vuepress，同时想要在该项目中管理文档，则应该将 vuepress 安装为本地依赖。
## 没有项目可以初始化 yarn init ## 将 vuepress 作为一个本地依赖安装 yarn add -d vuepress # 或者：npm install -d vuepress ## 新建一个 docs 文件夹 mkdir docs ## 新建一个 markdown 文件 echo # hello vuepress! > docs/readme.md ## 开始写作 npx vuepress dev docs
接着，在 package.json 里加一些脚本:
我要评论
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
基本配置
. ├─ docs │ ├─ readme.md │ └─ .vuepress │ └─ config.js
一个 vuepress 网站必要的配置文件是 .vuepress/config.js，它应该导出一个 javascript 对象：
module.exports = {
title: 'hello vuepress',
description: 'just playing around'
}
静态资源
创建public文件夹，主要用于存放静态资源
. ├─ docs │ └─ .vuepress │ └─ public │ └─ image │ └─ favicon.ico
添加网站 favicon，修改 .vuepress/config.js 内容
module.exports = {
head:[
['link', {rel:'icon', href:'/image/favicon.ico'}]
]
};
导航栏
你可以通过 themeconfig.nav 增加一些导航栏链接:
module.exports = {
themeconfig: {
nav: [
{ text: '主页', link: '/' },
{ text: '指南', link: '/guide/' },
{
text: '语言',
items: [
{ text: '中文', link: '/language/chinese/' },
{ text: 'english', link: '/language/english/' }
]
},
{ text: 'github', link: 'https://github.com' }
]
}
};
首页
需要在dosc/readme.md指定 home: true
--- home: true heroimage: /image/favicon.ico herotext: hero 标题 tagline: hero 副标题 actiontext: 快速上手 → actionlink: /guide/ features: - title: 简洁至上 details: 以 markdown 为中心的项目结构，以最少的配置帮助你专注于写作。 - title: vue驱动 details: 享受 vue + webpack 的开发体验，在 markdown 中使用 vue 组件，同时可以使用 vue 来开发自定义主题。 - title: 高性能 details: vuepress 为每个页面预渲染生成静态的 html，同时在页面被加载的时候，将作为 spa 运行。 footer: mit licensed | copyright © 2018-present evan you ---
侧边栏
想要使 侧边栏（sidebar）生效，需要配置 themeconfig.sidebar，基本的配置，需要一个包含了多个链接的数组：
module.exports = {
themeconfig: {
sidebar: [
'/',
['/hello', 'hello page']
]
}
};
部署
设置部署站点的基础路径。
module.exports = {
base: '/vuepress-demo/',
};
在你的项目中，创建一个如下的 deploy.sh 文件
#!/usr/bin/env bash # 确保脚本抛出遇到的错误 set -e # 生成静态文件 npm run docs:build # 进入生成的文件夹 cd docs/.vuepress/dist # 如果是发布到自定义域名 # echo 'www.example.com' > cname git init git add -a git commit -m 'deploy' # 如果发布到 https://<username>.github.io # git push -f git@github.com:<username>/<username>.github.io.git master # 如果发布到 https://<username>.github.io/<repo> git push -f git@github.com:yinian-r/vuepress-demo.git master:gh-pages cd -
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论