VuePress

Apr 11, 2019 Eric Guo    1190

摘要：介绍一下vuepress的搭建及node.js的一些简单知识

阅读之前

常说的npm与node.js的关系其实类似php和composer的关系
下面是网上及菜鸟教程中的解释：
Node.js是一个构建在谷歌V8引擎的js运行环境。Node.js的事件驱动、非阻塞IO模型使其轻量、高效。npm是Node.js的包管理系统，是全世界最大的开发库生态系统。
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种： 1. 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 
2. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 
3. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
查看node.js版本 node -v 查看npm版本 npm -v

安装node.js

vuepress要求node>8 （下面给出一个网址可以直接下载，使用的现在最新的 11.13.0 (includes npm 6.7.0)）
链接: https://pan.baidu.com/s/1L7ikpoNiVd53owp_ikShvw 提取码: uu2s 
windows下可以直接官网下载http://nodejs.cn/download/ 下载.msi即可
node在国内卡顿
你可以使用淘宝 NPM 镜像定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$ cnpm install [name]

实例

安装 Express 开发框架：

$ cnpm install express

其他镜像

    开源镜像: http://npm.taobao.org/mirrors
    Node.js 镜像: http://npm.taobao.org/mirrors/node
    alinode 镜像: http://npm.taobao.org/mirrors/alinode
    phantomjs 镜像: http://npm.taobao.org/mirrors/phantomjs
    ChromeDriver 镜像: http://npm.taobao.org/mirrors/chromedriver
    OperaDriver 镜像: http://npm.taobao.org/mirrors/operadriver
    Selenium 镜像: http://npm.taobao.org/mirrors/selenium
    Node.js 文档镜像: http://npm.taobao.org/mirrors/node/latest/docs/api/index.html
    NPM 镜像: https://npm.taobao.org/mirrors/npm/
    electron 镜像: https://npm.taobao.org/mirrors/electron/
    node-inspector 镜像: https://npm.taobao.org/mirrors/node-inspector/

VuePress 安装

安装本地依赖vuepress(这里安装了淘宝镜像所以之后的都使用cnpm代替npm使用)
cnpm install -D vuepress （# 全局安装 cnpm install -g vuepress）

创建一个 docs 目录
mkdir docs

创建一个 markdown 文件
echo '# Hello VuePress' > docs/README.md

给 package.json 添加一些 scripts 脚本
{
  "scripts": {
    "docs:dev": "vuepress dev docs",
    "docs:build": "vuepress build docs"
  }
}

编写文档
cnpm run docs:dev
可以看到启动成功 默认的地址是  localhost:8080,打开看到有对应的Hello 说明已经成功

生成静态文件
cnpm run docs:build
默认情况下，构建的文件会位于 .vuepress/dist 中，该文件可以通过 .vuepress/config.js 中的 dest 字段进行配置。构建的文件可以部署到任何静态文件服务器。
配置
  • 文档目录中创建一个 .vuepress 目录
mkdir .vuepress
  • 创建对应js配置
.vuepress/config.js 创建对应文件
内容
module.exports = {
  title: 'Vuepress',
  description: 'Just playing around'
}
此时可以在服务器看到已经显示了搜索框与页面标题（查看的时候最好在Chrome查看，因为Firefox缓存太厉害，影响查看）
  • 导航及侧边栏配置
module.exports = {
  title: 'Vuepress',
  description: 'Just playing around',
    themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Guide', link: '/foo/' },
      { text: 'External', link: 'https://google.com' },
      {
        text: 'Languages',
        items: [
          { text: 'Chinese', link: '/language/chinese' },
          { text: 'Japanese', link: '/language/japanese' }
        ]
      },   
    ],
    sidebar: [
        {
                title: 'foo',
                  children: [
                    '/foo/one',
                    '/foo/two',
                  ]
        },
        {
                title: 'bar',
                  children: [
                    '/foo/one',
                    '/foo/two',
                  ]
        }
    ]
  }
}
  • 目录结构如下图所示
.
├─ README.md
├─ foo
│  ├─ README.md
│  ├─ one.md
│  └─ two.md
└─ bar
   ├─ README.md
   ├─ one.md
   └─ two.md
生成静态文件
cnpm run docs:build
文件将生成在docs/.vuepress/dist目录下，需要配置完域名后就可以直接访问该静态文件
评论