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定义类和对象的几种方式
Nov 09 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
easyui validatebox验证
Apr 29 Javascript
JS简单随机数生成方法
Sep 05 Javascript
基于jQuery实现中英文切换导航条效果
Sep 18 Javascript
微信小程序图表插件(wx-charts)实例代码
Jan 17 Javascript
Bootstrap模态窗口源码解析
Feb 08 Javascript
简单谈谈Javascript函数中的arguments
Feb 09 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
JavaScript 常见的继承方式汇总
Sep 17 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
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP Imagick完美实现图片裁切、生成缩略图、添加水印
2016/02/22 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
json 定义
2008/06/10 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
jQuery中的select操作详解
2016/11/29 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
Vue中的Vux配置指南
2017/12/08 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
跟老齐学Python之编写类之三子类
2014/10/11 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
python正则表达式的使用
2017/06/12 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
Python数据分析matplotlib设置多个子图的间距方法
2018/08/03 Python
在tensorflow下利用plt画论文中loss,acc等曲线图实例
2020/06/15 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
微型企业创业投资计划书
2014/01/10 职场文书
高校教师自荐信范文
2014/03/13 职场文书
大三学习计划书范文
2014/05/02 职场文书
食堂标语大全
2014/06/11 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
村党支部书记四风问题个人对照检查材料思想汇报
2014/10/06 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js