VuePress博客网站搭建
vuePress
vuePress 由两部分组成：一个以 Vue 驱动的主题系统的简约静态网站生成工具，和一个为编写技术文档而优化的默认主题。它是为了支持 Vue 子项目的文档需求而创建的。
由 VuePress 生成的每个页面，都具有相应的预渲染静态 html，它们能提供出色的加载性能，并且对 seo 友好。然而，页面加载之后，Vue 就会将这些静态内容，接管为完整的单页面应用程序(SPA)。当用户在浏览站点时，可以按需加载其他页面。VuePress中文网
环境搭建
安装
Node.js版本需要>=8才可以。
npm install -g vuepress 或者在已有项目中安装
npm install vuepress -D安装完成检测是否安装成功
vuepress -v
//vuepress v1.0.3其他信息：
vuepress v1.0.3
Usage:
$ 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 environment
For more info, run any command with the `--help` flag:
$ vuepress dev --help
$ vuepress build --help
$ vuepress eject --help
$ vuepress info --help
Options:
-v, --version Display version number
-h, --help Display this message 创建项目
mkdir VuePress
cd VuePress初始化项目
通过npm init快速创建项目的pageage.json文件
npm init -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文件夹
docs文件夹作为项目文档根目录，主要放置Markdown类型的文章和.vuepress文件夹。
mkdir docs设置package.json
在script中添加dev启动和build打包脚本命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "vuepress dev docs",
"build": "vuepress build docs"
},创建README.md
在docs里面创建README.md
cd docs
echo "## Hello VuePress" > README.md创建.vuepress目录
npm run build可直接打包构建README.md文件 并生成.vuepress
.vuepress 目录这是放置所有 VuePress 特有(VuePress-specific) 文件的地方。
创建config.js
不做任何配置的话，页面会显得过于简单，用户也无法方便地浏览网站；
配置 VuePress 站点的基本文件是 .vuepress/config.js，其中导出一个 JavaScript 对象：
touch config.js目录结构
├── docs # 文档目录
│ ├── .vuepress //存放所有资源和打包结果
│ │ ├── dist //打包结果
│ │ ├── public //公共资源文件
│ │ ├── ...
│ │ └── config.js //配置文件
│ ├── demo //分类文档存储
│ │ ├── demo1.md
│ │ ├── ...
│ │ └── demon.md
│ └── README.md
└── package.json//项目启动配置资源搜索网站大全 https://www.renrenfan.com.cn 广州VI设计公司https://www.houdianzi.com
基本配置
module.exports = {
title: '文档管理',
description: '呵呵博客',
head: [
['link', { rel: 'icon', href: '/logo.ico' }]
]
}title
- Type: string
- Default: undefined
网站的标题。这将是所有页面标题的前缀，并显示在默认主题的导航栏中。
description
- Type: string
- Default: undefined
网站描述。这将在页面 html 中表现为一个 <meta> 标签。
head
- Type: Array
- Default: []
被注入页面 HTML <head> 额外的标签。每个标签可以用 [tagName, { attrName: attrValue }, innerHTML?] 的形式指定。例如，要添加自定义图标：
port
- Type: number
- Default: 8080
指定用于 dev 服务器的端口。
dest
- Type: string
- Default: .vuepress/dist
指定 vuepress build 的输出目录。
