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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
Apr 12 Javascript
jquery数据验证插件(自制,简单,练手)实例代码
Oct 24 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
浅谈jquery的map()和each()方法
Jun 12 Javascript
微信小程序使用Socket的实例
Sep 19 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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中使用Oracle数据库(6)
2006/10/09 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
PHP后门隐藏的一些技巧总结
2020/11/04 PHP
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
JavaScript中的闭包
2016/02/24 Javascript
基于JS实现省市联动效果代码分享
2016/06/06 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
Javascript中类式继承和原型式继承的实现方法和区别之处
2017/04/25 Javascript
原生js实现简单的链式操作
2017/07/04 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
Element中的Cascader(级联列表)动态加载省\市\区数据的方法
2019/03/27 Javascript
详解微信小程序胶囊按钮返回|首页自定义导航栏功能
2019/06/14 Javascript
jQuery实现弹幕特效
2019/11/29 jQuery
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
JavaScript判断数据类型有几种方法及区别介绍
2020/09/02 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
python中enumerate的用法实例解析
2014/08/18 Python
Python复制目录结构脚本代码分享
2015/03/06 Python
Django框架中的对象列表视图使用示例
2015/07/21 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python hashlib模块用法实例分析
2018/06/12 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
python中re模块知识点总结
2021/01/17 Python
Unix如何在一行中运行多个命令
2015/05/29 面试题
实习生自荐信范文分享
2013/11/27 职场文书
简历中的自我评价范文
2014/02/05 职场文书
后备干部培训方案
2014/05/22 职场文书
心理咨询专业自荐信
2014/07/07 职场文书
法院授权委托书范文
2014/08/02 职场文书
世界读书日的活动方案
2014/08/20 职场文书
辞职信怎么写
2015/02/27 职场文书
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript