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 相关文章推荐
jQuery Ajax请求状态管理器打包
May 03 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
jQuery实现可高亮显示的二级CSS菜单效果
Sep 01 Javascript
基于javascript实现图片左右切换效果
Jan 25 Javascript
jquery easyUI中ajax异步校验用户名
Aug 19 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
vue把输入框的内容添加到页面的实例讲解
Nov 11 Javascript
用js编写留言板
Mar 17 Javascript
原生JavaScript实现拖动校验功能
Sep 29 Javascript
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
上海地方志办公室-上海电子仪表工业志
2021/03/04 无线电
PHP网站安装程序制作的原理、步骤、注意事项和示例代码
2010/08/01 PHP
php中session使用示例
2014/03/29 PHP
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
PHP中如何防止外部恶意提交调用ajax接口
2016/04/11 PHP
深入解析PHP底层机制及相关原理
2020/12/11 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
flash 得到自身url参数的代码
2009/11/15 Javascript
onkeydown事件解决按回车键直接提交数据的需求
2013/04/11 Javascript
原生JavaScript生成GUID的实现示例
2014/09/05 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
js中对函数设置默认参数值的3种方法
2015/10/23 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
JS验证字符串功能
2017/02/22 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
js获取css的各种样式并且设置他们的方法
2017/08/22 Javascript
js中如何完美的解析数据
2018/03/18 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
微信小程序转化为uni-app项目的方法示例
2020/05/22 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
通过C++学习Python
2015/01/20 Python
python调用c++返回带成员指针的类指针实例
2019/12/12 Python
pytorch查看torch.Tensor和model是否在CUDA上的实例
2020/01/03 Python
Python3 元组tuple入门基础
2020/02/09 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
幼儿园教师培训制度
2014/01/16 职场文书
小学五年级学生评语
2014/04/22 职场文书
小学中等生评语
2014/12/29 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL