VuePress 搭建站点

2022-10-05 16:51:15 浏览数 (1)

VuePress 是静态站点生成框架之一，界面简介优雅，本文记录使用方法。

简介

  • VuePress 是尤雨溪（vue.js 框架作者）发布的一个全新的基于 vue 的静态网站生成器，实际上就是一个 vue 的 spa 应用，内置 webpack，可以用来写文档。
  • VuePress 有很多优点：
    • 界面简洁优雅，不同于 Hexo，个人觉得更适合作为说明文档页
    • 容易上手（半小时能搭好整个项目）
    • 更好的兼容、扩展 Markdown 语法
    • 响应式布局，PC端、手机端
    • Google Analytics 集成
    • 支持 PWA
  • 中文官网：https://vuepress.docschina.org/

安装

nodejs
  • VuePress 需要安装 Node.js，且版本要求 >= 8。
vuepress
  • 在 nodejs 平台下安装 vuepress
代码语言：javascript复制
npm install -g vuepress
# 或
yarn global add vuepress

使用方法

创建框架
  • 以 Cellink 项目的说明文档为例，创建 cellink-docs 文件夹
代码语言：javascript复制
mkdir cellink-docs
  • 初始化项目
代码语言：javascript复制
npm init -y
  • 在 VueDemo 文件夹中创建 docs 文件夹，在其中加入 README.md 文件，写入 hello world!
  • 在 docs 中创建 .vuepress 文件夹，在.vuepress中创建 public 文件夹和 config.js 文件，最终项目结构如下所示：
代码语言：javascript复制
VueDemo 
├─── docs
│   ├── README.md
│   └── .vuepress
│       ├── public
│       └── config.js
└── package.json
  • 添加 vue-template-compiler 模块
代码语言：javascript复制
npm install vue-template-compiler
配置站点信息
  • 在 config.js 文件中配置网站标题、描述、主题等信息
代码语言：javascript复制
module.exports = {
  locales: {
    // 键名是该语言所属的子路径
    // 作为特例，默认语言可以使用 '/' 作为其路径。
    '/': {
      lang: 'zh-CN', // 将会被设置为 <html> 的 lang 属性
      title: 'Cellink 用户手册',
      description: '一款可视化代码流程管理框架',
    },
  },
  title: 'Cellink',
  base: '/cellink-docs/',
  head: [
    ['link', { rel: 'icon', href: '/imgs/icon.png' }],
    ['meta', { name: 'keywords', content: 'cellink,可视化,流程管理,cellink文档,用户文档'}]
  ],
  themeConfig: {
    locales: {
      '/': {
        // 多语言下拉菜单的标题
        selectText: 'Languages',
        // 该语言在下拉菜单中的标签
        label: '


	


vue.js https http github 网络安全 




	






	

 0 人点赞