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 相关文章推荐
JavaScript 快捷键设置实现代码
Mar 13 Javascript
xheditor与validate插件冲突的解决方案
Apr 15 Javascript
详解JS函数重载
Dec 04 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
jquery仿百度百科底部浮动导航特效
Aug 08 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
jQuery实现百度登录框的动态切换效果
Apr 21 jQuery
PHP7新特性简述
Jun 11 Javascript
js使用xml数据载体实现城市省份二级联动效果
Nov 08 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
Jan 23 Javascript
解决iView Table组件宽度只变大不变小的问题
Nov 13 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
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/17 PHP
解析php通过cookies获取远程网页的指定代码
2013/06/25 PHP
PHP中的socket_read和socket_recv区别详解
2015/02/09 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP内部实现打乱字符串顺序函数str_shuffle的方法
2019/02/14 PHP
Confirmer JQuery确认对话框组件
2010/06/09 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
JS中Location使用详解
2015/05/12 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
原生JS轮播图插件
2017/02/09 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
JavaScript数组排序reverse()和sort()方法详解
2017/12/24 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
js中DOM事件绑定分析
2018/03/18 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
Python多线程编程(五):死锁的形成
2015/04/05 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
pytorch使用tensorboardX进行loss可视化实例
2020/02/24 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
python 装饰器的实际作用有哪些
2020/09/07 Python
CSS3实现莲花绽放的动画效果
2020/11/06 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
美国最大点评网站:Yelp
2018/02/14 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
七一党建活动方案
2014/01/28 职场文书
nginx之queue的具体使用
2022/06/28 Servers