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 相关文章推荐
JScript的条件编译
May 29 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
Windows 系统下安装和部署Egret的开发环境
Jul 31 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
js 定位到某个锚点的方法
Nov 19 Javascript
jQuery插件HighCharts绘制的基本折线图效果示例【附demo源码下载】
Mar 07 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
Sep 25 Javascript
vue中keep-alive,include的缓存问题
Nov 26 Javascript
5个实用的JavaScript新特性
Jun 16 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
php+Mysqli利用事务处理转账问题实例
2015/02/11 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
php实现复制移动文件的方法
2015/07/29 PHP
Laravel使用Caching缓存数据减轻数据库查询压力的方法
2016/03/15 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
PHP7 新增功能
2021/03/09 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
关于递归运算的顺序测试代码
2011/11/30 Javascript
一个js控制的导航菜单实例代码
2013/12/03 Javascript
初识Node.js
2014/09/03 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
JavaScript中eval()函数用法详解
2015/12/14 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
2016/11/22 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
详解超简单的react服务器渲染(ssr)入坑指南
2019/02/28 Javascript
vue学习笔记之slot插槽基本用法实例分析
2020/02/01 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
微信小程序之高德地图多点路线规划过程示例详解
2021/01/18 Javascript
python写入中英文字符串到文件的方法
2015/05/06 Python
Python线程条件变量Condition原理解析
2020/01/20 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
浅谈python 类方法/静态方法
2020/09/18 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
出纳员的岗位职责
2014/02/22 职场文书
小学生中国梦演讲稿
2014/04/23 职场文书
离职证明标准格式
2014/09/15 职场文书
追悼会悼词大全
2015/06/23 职场文书
导游词之西安骊山
2019/12/03 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP