作者：南宫__
转发链接：https://www.jianshu.com/p/37509da5a020
只听过vue，没听过vuepress？它可是新的vue百口桶成员之一，尤雨溪大神于2018年4月12日推出。 不信？请看Evan You github。star数已过万，并不少。 vuepress用于迅速搭建技能文档网站与个人博客，大略快捷，下面和我一起开始学习吧！
（想直接coding的同学可从第三节开始）
一、模块概述1. 定义Vue 驱动的静态网站天生器
2. 亮点自己总结的vuepress优点
3. 同类模块横向比拟①. Nuxt:
Nuxt: VuePress 能做的事情，Nuxt 理论上确实能够胜任，但Nuxt 是为构建运用程序而生的VuePress: 专注在以内容为中央的静态网站上，同时供应了一些为技能文档定制的开箱即用的特性②. Docsify / Docute: 同样都是基于 Vue，然而它们都是完备的运行时驱动，因此对 SEO 不足友好
③. Hexo: 主题系统太过于静态以及过度地依赖纯字符串, 而不是基于Vue。同时，Hexo 的 Markdown 渲染的配置也不是最灵巧的
④. GitBook：
当文件很多时，每次编辑后的重新加载韶光长得令人无法忍受默认主题导航构造也比较有限定性主题系统也不是 Vue 驱动的GitBook 团队更专注于将其打造为一个商业产品而不是开源工具二、成品展示1. 技能文档网站：vue百口桶官网：vue、vuex、vue-cli、vue-router以及vuepress本身
2. 个人博客：博客1（默认主题）、博客2（自定义主题）
三、开始搭建coding之前，建议大家先理解markdown语法，为之后的文档撰写做铺垫：传送门
1. 全局安装 VuePressnpm install -g vuepress
2. 创建并进入项目mkdir vuepress-demo && cd vuepress-demo
3. 初始化项目npm init -y // 默认配置yes 在天生的package.json中，添加如下两个启动命令：
"scripts": { "dev": "vuepress dev docs", "build": "vuepress build docs"}4. 创建基本项目构造
官方只有推举目录构造，并没有现成的cli，以是须要通过命令行或手动创建如下构造：
vuepress-demo├─package.json├─docs| ├─README.md| ├─.vuepress| | ├─config.js| | ├─public| | | └avatar.png| | | └spider.png
个中有后缀的是文件，没后缀的是文件夹
5. 配置config.js该文件为项目最主要的配置文件，险些所有配置项都是在此进行。 我们先来一个最大略的配置看看效果：
module.exports = { title: '南宫的博客', head: [ // 注入到当前页面的 HTML <head> 中的标签 ['link', { rel: 'icon', href: '/avatar.png' }], // 增加一个自定义的 favicon(网页标签的图标) ], themeConfig: { logo: '/avatar.png', // 左上角logo nav:[ // 导航栏配置 {text: '首页', link: '/' }, {text: '技能文档', link: '/tech/interview/' }, {text: '简书主页', link: 'https://www.jianshu.com/u/c455567c7f50'} ], sidebar: 'auto', // 侧边栏配置 } };
想看详细配置的同学可直接查询官网-config配置。 把稳：路由根路径为docs文件夹，静态资源（图片）根路径为public文件夹
6. 启动项目npm run dev 默认做事启动在了http://localhost:8080/，效果如下：
demo初版
我们配置的title、nav、sidebar、logo全都生效了！
恭喜，你完成了第一个极简版demo！
这里利用的官方默认主题：
左上角的logo与title右上角的全局搜索框与nav导航栏左侧的sidebar导航栏（自动将md一级标题设置为导航文案）右侧的markdown内容把稳：项目自带热更新; 但config.js有时可能会热更新失落败，须要重启项目
7. 配置首页（可选）：一样平常的技能文档网站都须要一个首页作为该技能的简介，个人博客也须要这样的欢迎页。vuepress供应了一个默认格式的简洁首页，须要在你的根级（docs下）README.md添加home: true，格式如下：
---home: trueheroImage: /spider.pngheroText: 我的主页tagline: My homepageactionText: 技能文档 →actionLink: /tech/interview/features:- title: 简洁至上 details: 以 Markdown 为中央的项目构造，以最少的配置帮助你专注于写作。- title: Vue驱动 details: 享受 Vue + webpack 的开拓体验，在 Markdown 中利用 Vue 组件，同时可以利用 Vue 来开拓自定义主题。- title: 高性能 details: VuePress 为每个页面预渲染天生静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。footer: 南宫的个人博客---
效果如下：
首页
8. 变更主题（可选）① 改换主题： 对默认主题不满意，想换个别的主题？安排！
在config.js中设置：
module.exports = { theme: 'vuepress-theme-xx'}
可以在npm中探求自己喜好的主题，个中以 @vuepress/theme- 开头的主题是官方掩护的主题：
npm主题
② 开拓主题： npm上也没有得当的主题？安排！
那咱们就自己开拓一个主题，篇幅缘故原由就不先容细节了，感兴趣的同学可以自行查看官方文档-开拓主题
③ 修正默认主题： 不想那么麻烦，但默认主题又不知足需求？安排！
那就在默认主题根本上做一些修正，以知足需求。 实行如下命令，可将默认主题的各功能组件开释出来： vuepress eject docs 你会创造，在根目录下，多了一个theme文件夹，如下：
默认主题文件
上图列出了紧张的布局组件，只需在个中做适量修正以知足业务需求即可。
9. md文件中利用vue组件（可选）
vuepress项目中的md文件，可以直策应用vue组件。 我们可以在.vuepress文件夹下新建一个components文件夹，个中的vue组件会自动注册到全局，如下：
md文件利用vue组件
页面效果如下：
点击按钮
10. 客户端增强（可选）如果你想对自己的运用做一些优化，比如利用router做登录拦截、给vue实例挂载全局变量或注册其他组件等，可以在.vuepress下新建文件enhanceApp.js：
export default ({ Vue, // VuePress 正在利用的 Vue 布局函数 options, // 附加到根实例的一些选项 router, // 当前运用的路由实例 siteData // 站点元数据}) => { // ...做一些其他的运用级别的优化}
这个文件类似于vue-cli脚手架中的main.js文件
四、支配上线通过上面的事情，我们已经节制了vuepress的基本用法，大家可以添补更多的md文件去丰富你的网页。 但这些都还只是跑在本地，想要所有人都能通过互联网访问你的网站，须要申请一个域名以及做事器，并将你的项目支配上去：
1. 选择你的做事器做事器有免费和收费两种，各有利害： ① 免费： 利用 Github Pages 。即 Github 供应的、用于搭建个人网站的静态站点托管做事。很多人用它搭建个人博客。这种办法的好处是免费、方便，坏处是速率可能会有些慢、不能被海内的搜索引擎收录。 ② 收费： 海内做的比较好的云做事有阿里云、腾讯云，好处是速率有担保、可以被搜索引擎收录，坏处是要费钱，土豪请忽略。 这里我们选择方案①
2. github创建仓库① 登录 github ② 新建仓库一：username.github.io （必须为你的github账户的username，而不是昵称啥的） ③ 新建仓库二，名称随意如vuepress-demo 二者的关系是：仓库一卖力显示网站内容，我们不须要改动它；日常开拓和新增内容，都在仓库二中，并通过 npm run deploy 命令，将代码发布到仓库一
3. 关联本地项目与github仓库// 先cd到你的democd vuepress-demo// git初始化git init// 关联github仓库git remote add origin git@github.com:nan-gong/vuepress-demo.git4. 新建支配文件
①根目录下新建deploy.sh:
#!/usr/bin/env sh# 确保脚本抛出碰着的缺点set -e# 天生静态文件npm run build# 进入天生的文件夹cd docs/.vuepress/dist# 如果是发布到自定义域名# echo 'www.yourwebsite.com' > CNAMEgit initgit add -Agit commit -m 'deploy'# 如果你想要支配到 https://USERNAME.github.iogit push -f git@github.com:nan-gong/nan-gong.github.io.git master# 如果发布到 https://USERNAME.github.io/<REPO> REPO=github上的项目# git push -f git@github.com:USERNAME/<REPO>.git master:gh-pagescd -
② 根目录新建README.md 此文件为你的项目描述或用法，一样平常的git项目都会有此文件，和项目中的md文件无关。
5. git提交git提交前，先确保你确当地登录了git账号，否则没有权限提交到远端。 如果本地未登录，可参考git初次登录教程。 其余，可以在根目录下添加.gitignore文件，以防止不必要的提交：
.gitignore
// 提交到暂存区git add .// 提交到本地仓库git commit -m '基本搭建完毕'// push到github仓库git push --set-upstream origin master
检讨你的github仓库，创造已经上传成功：
github仓库
6. 新建deploy指令并实行package.json 文件夹中添加发布命令：
"scripts": { "deploy": "bash deploy.sh"}
npm run deploy
7. 发布成功！查看自己的博客域名：https://nan-gong.github.io/ 这样所有的人都能访问到你的博客了！
PWA，即progressive web apps，以web的形式给你原生app的体验。 VuePress 默认支持 PWA，配置方法如下： ① config.js添加配置：
head: [ // 注入到当前页面的 HTML <head> 中的标签 ['link', { rel: 'manifest', href: '/photo.jpg' }], ['link', { rel: 'apple-touch-icon', href: '/photo.jpg' }],],serviceWorker: true // 是否开启 PWA
② public 文件夹下新建 manifest.json 文件，添加：
{ "name": "南宫", "short_name": "南宫", "start_url": "index.html", "display": "standalone", "background_color": "#2196f3", "description": "南宫的个人主页", "theme_color": "blue", "icons": [ { "src": "./avatar.png", "sizes": "144x144", "type": "image/png" } ], "related_applications": [ { "platform": "web" }, { "platform": "play", "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb" } ] }
③ 重新支配：npm run deploy ④ 移动端操作：
PWA操作流程
完结撒花！推举Vue学习资料文章：
《10个Vue开拓技巧「实践」》
《是什么导致尤大大选择放弃Webpack？【vite 事理解析】》
《带你理解 vue-next（Vue 3.0）之 小试牛刀【实践】》
《带你理解 vue-next（Vue 3.0）之 初入茅庐【实践】》
《实践Vue 3.0做JSX(TSX)风格的组件开拓》
《一篇文章教你并列比较React.js和Vue.js的语法【实践】》
《手拉手带你开启Vue3天下的鬼斧神工【实践】》
《深入浅出通过vue-cli3构建一个SSR运用程序【实践】》
《若何为你的 Vue.js 单页运用提速》
《聊聊昨晚尤雨溪现场针对Vue3.0 Beta版本新特性知识点汇总》
《【新】Vue 3.0 Beta 版本发布，你还学的动么？》
《Vue真是太好了 壹万多字的Vue知识点 超详细!》
《Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5》
《深入浅出Vue3 随着尤雨溪学 TypeScript 之 Ref 【实践】》
《手把手教你深入浅出vue-cli3升级vue-cli4的方法》
《Vue 3.0 Beta 和React 开拓者分别杠上了》
《手把手教你用vue drag chart 实现一个可以拖动 / 缩放的图表组件》
《Vue3 尝鲜》
《总结Vue组件的通信》
《手把手让你成为更好的Vue.js开拓职员的12个技巧和窍门【实践】》
《Vue 开源项目 TOP45》
《2020 年，Vue 受欢迎程度是否会超过 React？》
《尤雨溪：Vue 3.0的设计原则》
《利用vue实现HTML页面天生图片》
《实现全栈收银系统（Node+Vue）（上）》
《实现全栈收银系统（Node+Vue）（下）》
《vue引入原生高德舆图》
《Vue合理配置WebSocket并实现群聊》
《多年vue项目实战履历汇总》
《vue之将echart封装为组件》
《基于 Vue 的两层吸顶踩坑总结》
《Vue插件总结【前端开拓必备】》
《Vue 开拓必须知道的 36 个技巧【近1W字】》
《构建大型 Vue.js 项目的10条建议》
《深入理解vue中的slot与slot-scope》
《手把手教你Vue解析pdf(base64)转图片【实践】》
《利用vue+node搭建前端非常监控系统》
《推举 8 个俊秀的 vue.js 进度条组件》
《基于Vue实现拖拽升级（九宫格拖拽）》
《手摸手，带你用vue撸后台 系列二(登录权限篇)》
《手摸手，带你用vue撸后台 系列三(实战篇)》
《前端框架用vue还是react？清晰比拟两者差异》
《Vue组件间通信几种办法，你用哪种？【实践】》
《浅析 React / Vue 跨端渲染事理与实现》
《10个Vue开拓技巧助力成为更好的工程师》
《手把手教你Vue之父子组件间通信实践讲解【props、$ref 、$emit】》
《1W字长文+多图，带你理解vue的双向数据绑定源码实现》
《深入浅出Vue3 的相应式和以前的差异到底在哪里？【实践】》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《基于Vue/VueRouter/Vuex/Axios登录路由和接口级拦截事理与实现》
《手把手教你D3.js 实现数据可视化极速上手到Vue运用》
《吃透 Vue 项目开拓实践｜16个方面深入前端工程化开拓技巧【上】》
《吃透 Vue 项目开拓实践｜16个方面深入前端工程化开拓技巧【中】》
《吃透 Vue 项目开拓实践｜16个方面深入前端工程化开拓技巧【下】》
《Vue3.0权限管理实现流程【实践】》
《后台管理系统，前端Vue根据角色动态设置菜单栏和路由》
作者：南宫__
转发链接：https://www.jianshu.com/p/37509da5a020
