VuePress 静态网站生成方法步骤


Posted in Javascript onFebruary 14, 2019

使用技术:

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 -

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
js异步加载的三种解决方案
Mar 04 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
基于react框架使用的一些细节要点的思考
May 31 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
React 全自动数据表格组件——BodeGrid的实现思路
Jun 12 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 jQuery
extract-text-webpack-plugin用法详解
Feb 14 #Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 #Javascript
快速了解Node中的Stream流是什么
Feb 13 #Javascript
vue2.0+vue-router构建一个简单的列表页的示例代码
Feb 13 #Javascript
vue实现点击隐藏与显示实例分享
Feb 13 #Javascript
JS+canvas画布实现炫酷的旋转星空效果示例
Feb 13 #Javascript
JavaScript实现的拼图算法分析
Feb 13 #Javascript
You might like
如何用php获取文件名后缀
2013/06/09 PHP
php分页代码学习示例分享
2014/02/20 PHP
php中mkdir函数用法实例分析
2014/11/15 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
PHP微商城开源代码实例
2019/03/27 PHP
YII框架模块化处理操作示例
2019/04/26 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
2010/04/20 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
JavaScript实现将文本框的值插入指定位置的方法
2015/08/13 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
Angular2中监听数据更新的方法
2018/08/31 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vue实现Excel文件的上传与下载功能的两种方式
2019/06/28 Javascript
微信小程序实现侧边分类栏
2019/10/21 Javascript
VUE兄弟组件传值操作实例分析
2019/10/26 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
python自动12306抢票软件实现代码
2018/02/24 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
纽约市的奢华内衣目的地:Anya Lust
2019/08/02 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
采购主管的岗位职责
2013/12/17 职场文书
个人评语大全
2014/05/04 职场文书
水电站项目建议书
2014/05/12 职场文书
自主招生学校推荐信范文
2015/03/26 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
python tqdm用法及实例详解
2021/06/16 Python