云顶集团官网手机版-云顶集团网站

热门关键词: 云顶集团官网手机版,云顶集团网站
这是VuePress的官方文档,由 VuePress 生成的每个页
分类:web前端

VuePress

VuePress

VuePress 由两部分组成:一个以 Vue 驱动的主题系统的简约静态网站生成工具,和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。

vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档。

由 VuePress 生成的每个页面,都具有相应的预渲染静态 HTML,它们能提供出色的加载性能,并且对 SEO 友好。然而,页面加载之后,Vue 就会将这些静态内容,接管为完整的单页面应用程序(SPA)。当用户在浏览站点时,可以按需加载其他页面。VuePress中文网

一个基于 Vue SSR 的静态站生成器,本来的目的是爽爽的写文档,但是我发现用来撸一个人博客也非常不错。

环境搭建安装

这是VuePress的官方文档

Node.js版本需要=8才可以。

上手搭建

npm install -g vuepress 或者在已有项目中安装npm install vuepress -D

你可以跟着文档上的例子自己玩一玩,不过由于VuePress的文档也是用VuePress来实现的,所以我取巧直接拿VuePress仓库中的docs目录拿来玩耍。

安装完成检测是否安装成功

1.首先安装VuePress到全局

vuepress -v//vuepress v1.0.3

npm install -g vuepress

其他信息:

2.然后把VuePress仓库克隆到你的电脑

vuepress v1.0.3Usage: $ vuepress command [options]Commands: dev [targetDir] start development server build [targetDir] build dir as static site eject [targetDir] copy the default theme into .vuepress/theme for customization. info Shows debugging information about the local environmentFor more info, run any command with the `--help` flag: $ vuepress dev --help $ vuepress build --help $ vuepress eject --help $ vuepress info --helpOptions: -v, --version Display version number -h, --help Display this message 

git clone git@github.com:docschina/vuepress.git

创建项目

在docs文件中执行(请确保你的 Node.js 版本 >= 8)

mkdir VuePresscd VuePress
cd vuepresscd docsvuepress dev

初始化项目

当你看到这一行就说明已经成功了:

通过npm init快速创建项目的pageage.json文件

 VuePress dev server listening at http://localhost:8080/
npminit-y

{ "name": "VuePress", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo "Error: no test specified"  exit 1" }, "keywords": [], "author": "", "license": "ISC"}

下面我们打开

新建docs文件夹

发现真的打开了vuepress文档:

docs文件夹作为项目文档根目录,主要放置Markdown类型的文章和.vuepress文件夹。

下面的工作就是数据的替换了,但我们应该先看一下docs的目录结构:

mkdirdocs
├─.vuepress│ ├─components│ └─public│ └─icons│ └─config.js // 配置文件├─config // Vuepress文档的配置参考内容├─default-theme-config // Vuepress文档的默认主题配置内容├─guide // Vuepress文档的指南内容└─zh // 中文文档目录 ├─config ├─default-theme-config └─guide└─README.md // 首页配置文件

设置package.json

文档分成了两部分,中文文档在/zh/目录下,英文文档在根目录下。

在script中添加dev启动和build打包脚本命令

其实目录里面的东西都挺好看懂的,首先guide 、default-theme-config、config 这三个目录中的都是Vuepress文档的主要内容,从中文文档里也可以看到只有这三个目录被替换了。

"scripts": { "test": "echo "Error: no test specified"  exit 1", "dev": "vuepress dev docs", "build": "vuepress build docs" },

首页配置

创建README.md

默认主题提供了一个主页布局,要使用它,需要在你的根目录README.md的YAML front matter中指定home:true,并加上一些其他的元数据。

在docs里面创建README.md

我们先看看根目录下的README,md:

cd docsecho "## Hello VuePress"  README.md
home: true // 是否使用Vuepress默认主题heroImage: /hero.png // 首页的图片actionText: Get Started → // 按钮的文字actionLink: /guide/ // 按钮跳转的目录features: // 首页三个特性- title: Simplicity First details: Minimal setup with markdown-centered project structure helps you focus on writing.- title: Vue-Powered details: Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue.- title: Performant details: VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.footer: MIT Licensed | Copyright © 2018-present Evan You // 页尾

创建.vuepress目录

实在看不懂,官网有比我更详细的配置说明。

npmrun build

导航配置

可直接打包构建README.md文件 并生成.vuepress

导航配置文件在.vuepress/config.js中

.vuepress目录这是放置所有 VuePress 特有(VuePress-specific) 文件的地方。

在导航配置文件中nav是控制导航栏链接的,你可以把它改成自己的博客目录。

创建config.js

nav: [ { text: 'Guide', link: '/guide/', }, { text: 'Config Reference', link: '/config/' }, { text: 'Default Theme Config', link: '/default-theme-config/' }]

不做任何配置的话,页面会显得过于简单,用户也无法方便地浏览网站;

剩下的默认主题配置官方文档都有很详细的文档说明这里就不在啰嗦了。

配置 VuePress 站点的基本文件是.vuepress/config.js,其中导出一个 JavaScript 对象:

更改默认主题色

touchconfig.js

你可以在.vuepress/目录下创建一个override.styl文件。

目录结构

vuepress提供四个可更改的颜色:

├── docs # 文档目录│ ├── .vuepress //存放所有资源和打包结果│ │ ├── dist //打包结果│ │ ├── public //公共资源文件│ │ ├── ...│ │ └── config.js //配置文件│ ├── demo //分类文档存储│ │ ├── demo1.md│ │ ├── ...│ │ └── demon.md│ └── README.md └── package.json//项目启动配置
$accentColor = #3eaf7c // 主题色$textColor = #2c3e50 // 文字颜色$borderColor = #eaecef // 边框颜色$codeBgColor = #282c34 // 代码背景颜色

基本配置

侧边栏的实现

module.exports = { title: '文档管理', description: '呵呵博客', head: [ ['link', { rel: 'icon', href: '/logo.ico' }] ]}

由于评论区里问的人较多,所以在这里更新一下,其实我就算在这里写的再详细也不如大家去看官方文档。

titleType:stringDefault:undefined

侧边栏的配置也在.vuepress/config.js中:

网站的标题。这将是所有页面标题的前缀,并显示在默认主题的导航栏中。

sidebar: [ { title: 'JavaScript', // 侧边栏名称 collapsable: true, // 可折叠 children: [ '/blog/JavaScript/学会了ES6,就不会写出那样的代码', // 你的md文件地址 ] }, { title: 'CSS', collapsable: true, children: [ '/blog/CSS/搞懂Z-index的所有细节', ] }, { title: 'HTTP', collapsable: true, children: [ '/blog/HTTP/认识HTTP-Cookie和Session篇', ] },]

├─blog // docs目录下新建一个博客目录│ ├─CSS│ ├─HTTP│ └─JavaScript

descriptionType:stringDefault:undefined

我的博客:brownhu

网站描述。这将在页面 HTML 中表现为一个meta标签。

部署

headType:ArrayDefault:[]

在配置好你博客之后,命令行执行:

被注入页面 HTMLhead额外的标签。每个标签可以用[tagName, { attrName: attrValue }, innerHTML?]的形式指定。例如,要添加自定义图标:

Vuepress build

portType:numberDefault:8080

当你看到这一行就说明成功了:

指定用于 dev 服务器的端口。

Success! Generated static files in vuepress.

destType:stringDefault:.vuepress/dist

将打包好的vuepress目录上传到你的github仓库,和github page配合,就可以配置好你的博客网站了。

指定vuepress build的输出目录。

本文由云顶集团官网手机版发布于web前端,转载请注明出处:这是VuePress的官方文档,由 VuePress 生成的每个页

上一篇:又大概是别的什么来头,须要认识她的两大语法 下一篇:的移动端组件库,开辟公司在选拔Vue.js框架和U
猜你喜欢
热门排行
精彩图文