前言
官方文档
创建项目
- 创建目录
- 安装VuePress
- 初始化项目
- 创建文档
- - 修改package.json
- 运行项目
- - 修改README.md的编码
显示官方默认主题
- 创建.vuepress文件
- - 创建config.js
  - 修改README.md
  - 补充logo资源
  - 运行效果
  - 更多默认主题配置
开源主题
- vuepress-theme-reco
- - 安装脚手架
  - 初始化项目
  - 安装npm
  - 运行查看
- VuePress Theme Hope
推送
结语

前言

基本学习了和html还有CSS相关的知识，了解了Vue的部署，简单写了个页面发布在自己的云服务器上，现在想要搭建一个更精致的页面，通过搜索了解到还有一个VuePress这个东西，是一个静态网页发布器，基于Vue，学习试一下

官方文档

http://caibaojian.com/vuepress/

官网是最全最详细的介绍

Node.js版本

10.16.3

创建项目

创建目录

第一步我们需要创建一个文件夹，然后用VS Code打开

安装VuePress

npm install -D vuepress

在VS Code里打开命令行，输入npm install -D vuepress,安装vuepress，会在目录下安装相应模块

初始化项目

npm init -y

这将会在目录下创建一个package.json文件

创建文档

mkdir docs echo '# Hello VuePress' > docs/README.md

这会在目录下创建第一个docs文件夹，文件夹下包含一个README.md的markdown文件

修改package.json

{"scripts": {"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"}
}

修改package.json文件，在scripts内补充运行入口和构建入口

运行项目

npm run docs:devhttp://localhost:8080/

在命令行运行项目，成功后，打开内网地址路径，可以看到最简单的一个通过md文件显示的页面

修改README.md的编码

打开页面发现是乱码，原因是README文件的编码格式不对，修改成UTF-8，保存后，页面显示正确

显示官方默认主题

VuePress有一个官方默认的主题，和Vue的主页相似，我们可以设置一下看看

创建.vuepress文件

在docs文件下创建.vuepress文件，这是放置所有 VuePress 特有(VuePress-specific) 文件的地方

创建config.js

module.exports = {title: 'Hello VuePress',description: 'Just playing around'
}

在.vuepress文件下创建config.js文件，内容就上边显示的，他是VuePress 站点的基本文件

修改README.md

home: true
heroImage: /hero.png
actionText: 快速上手 →
actionLink: /zh/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
---

README文件修改成上述内容，这是官方给的结构，具体含义暂不介绍

补充logo资源

在.vuepress文件下创建public文件，该文件夹放置所有静态资源，添加一个图片hero.png，该图片名和README里的heroImage相同

运行效果

重新run后打开网页，看到上图效果和Vue官网类似，图中所有内容都和我们config.js还有README里的配置相关

开源主题

网上有很多优秀的开源主题，向各位无私奉献的大哥致敬，这里我们举例来使用

vuepress-theme-reco

一款简洁而优雅的 vuepress 博客 & 文档主题

官方地址

https://vuepress-theme-reco.recoluan.com/

安装脚手架

npm install @vuepress-reco/theme-cli -g

打开cmd，输入命令，全局安装脚手架工具

初始化项目

theme-cli init sun_blog

用vs code打开一个文件夹，输入命令sun_blog就是项目目录的名字

回车执行后，会输入一系列的需求，最后一个比较重要，博主用的1.x，根据自己版本和需求选择

安装npm

切换目录到sun_blog，安装npm

npm install

运行查看

脚手架已经帮我们把所有必要的东西都安装完成了，在安装完npm后我们就可以运行直接查看效果了

npm run dev

效果很不错

VuePress Theme Hope

一个具有强大功能的 vuepress 主题✨

官方地址

https://vuepress-theme-hope.github.io/v2/zh/

推送

Github

https://github.com/KingSun5

结语

若是觉得博主的文章写的不错，不妨关注一下博主，点赞一下博文，另博主能力有限，若文中有出现什么错误的地方，欢迎各位评论指摘。
本文属于原创文章，转载请著名作者出处并置顶！！

VuePress初学之利用模板theme创建一个个人博客网站相关推荐

PS网页设计教程IV——如何在Photoshop中创建一个专业博客网站布局
向Talk-Mania网站致敬.一年前,在该网站上看过许多不错的网页设计教程.一年后,再回头想看看有没有什么新的教程的时候,蓦然发现该网站已经打不开了.也许是关闭了,也许是改了网站名了.幸好,去年本人 ...
PS网页设计教程VI——在Photoshop中创建一个食物博客布局
作为编码者,美工基础是偏弱的.我们可以参考一些成熟的网页PS教程,提高自身的设计能力.套用一句话,"熟读唐诗三百首,不会作诗也会吟". 本系列的教程来源于网上的PS教程,都是国外的 ...
如何从零搭建一个hexo博客网站01
title: 如何从零搭建一个hexo博客网站01 #文章標題 categories: "Hexo教程" #文章分類目錄可以省略 categories: "Hexo教程 ...
如何从零搭建一个hexo博客网站02
title: 如何从零搭建一个hexo博客网站02 categories: "Hexo教程" #文章分類目錄可以省略简介:此教程分为两部分,云服务器篇和本地pc机篇 tags: ...
如何创建一个个人博客
说明折腾了一个月的嵌入式web开发.从nodejs折腾到ajax再到boa,从事事坚持原创到ctrl+c .ctrl+v.学会了使用已有资源了,???. 刚开始的时候,是先用一个前端做了一个个人 ...
如何快速的搭建一个个人博客网站
经过我几天的沉浸式的研究,发现一款基于Node.js的静态博客程序,可以方便的生成静态网页托管在github和Heroku上. 类似于jekyll.Octopress.WordPress,我们可以 ...
(超详细）15分钟利用coding搭建你的hexo博客网站
一.前期准备工作 1.安装Git 点击下载点击之后即可下载,可能速度会有些慢. 所有的工具我都会打包好放到下方 2.安装Node.js 点击下载安装好在桌面右键git bash here 输入np ...
个人博客前端模板_腾讯前端开发工程师，教你极速搭建一个个人博客网站
作者: bookerzhao,腾讯 CSIG web前端开发工程师 Github 为开源项目提供了用于静态页面展示的 Pages 服务,很多开发者都在上面托管了自己的静态网站和博客,不少开源项目的案例 ...
从零开始创建一个个人博客前端Vue，后端node.js（第一天）
一.前言(具体代码在尾页) 1.创建vue项目可以使用vue ui命令进行快速的搭建 2.由于我是一个新手所以说,前端使用的是element ui快速构造了一个网页(头秃,没有设计稿,ui空白一片), ...

VuePress初学之利用模板theme创建一个个人博客网站

目录

前言

官方文档

创建项目

创建目录

安装VuePress

初始化项目

创建文档

修改package.json

运行项目

修改README.md的编码

显示官方默认主题

创建.vuepress文件

创建config.js

修改README.md

补充logo资源

运行效果

更多默认主题配置

开源主题

vuepress-theme-reco

安装脚手架

初始化项目

安装npm

运行查看

VuePress Theme Hope

推送

结语

VuePress初学之利用模板theme创建一个个人博客网站相关推荐

最新文章

热门文章