VuePress快速踩坑总结

最近有一个开源项目非常受欢迎，那就是游晓友开发的VuePress。vupress可以让你在Markdown文档中编写Vue代码变得非常方便，而且vupress已经为搜索引擎优化了编译后的HTML文件。此外，VuePress还对Markdown文件进行了一些扩展，使其更强大。本文将重点构建一个Github的静态博客。

将VuePress添加到项目中

第一步是为你的项目安装VuePress。如果项目代码中没有package.json文件，请首先执行npm init。

NPM install-D vu press//或纱线add-D vu press//add docs文件夹mkdir docs//新建一个Markdown文件echo ' # Hello VuePress！'Docs/README.md第二步是将这些脚本添加到package.json并运行它们。

//package . JSON ' scripts ' : { ' Docs : dev ' : ' vu Press dev Docs '，Docs : Build ' : ' Vue Press Build Docs ' }//本地运行文档npm运行docs:dev//编译并打包生成静态HTML文件npm运行Docs : Build vu Press扩展了Markdown。它允许我们在Markdown文件中使用YAML语法，而VuePress使用-来隔离Markdown语法。

-//这个语法意味着侧边栏sidbar : auto-vupress基本配置是使用当前页面标题自动生成的

我们可以通过VuePress配置文件使用一些自定义的功能，比如增加侧边栏和导航栏。首先，创建一个新的。在docs目录下创建一个新的config.js目录。

默认情况下，vueperess将文件打包在。vu press/dist目录，我们可以通过dest属性修改文件输出目录，例如，输出文件在项目根目录下的dist文件夹中。通过设置repo属性，VuePress将在导航栏中添加一个指向Github存储库的链接。通过在VuePress中设置title属性来设置网站的标题，它将作为所有页面标题的前缀，并应用于默认主题下的导航栏。使用VuePress写博客并发布到Github页面时，我们可能会遇到下图所示的问题。页面已经存在，但是样式和js没有成功加载。我们可以通过配置默认为/的base属性来解决这个问题。如果您要将代码部署到taoxusheng.github.io/mt-blog/,那么base属性应该设置为/mt-blog/。注意：基本属性的值总是以/开头，以/结尾。

//dcos/。vue press/config . js module . exports={ title : ' my-blog '，//设置网站标题dest: '。/dist '，//设置输出目录base3360'/mt-blog/'，//设置站点根路径repo : ' https://github.com/taoxusheng/mt-blog'//add github link }导航栏和侧栏

在VuePress中，如果你想给网站添加导航栏，可以通过设置themeConfig.nav来添加导航链接，通过设置themeConfig .侧边栏属性来添加侧边栏。如果您的导航是下拉列表，则可以通过items属性进行设置。

//dcos/。vue press/config . js module . exports={ theme config : {//add nav 3360[{ text : ' vue '，link:'/'}，{text:' CSS '，link : '/' blog/'}，{text:' js '，link 3360 '/'胡志/' }，{text:' github '，//下面是下拉列表的呈现形式。items :[{ text: ' focus-out '，link : ' https://github.com/Tao Xu sheng/focus-out ' }，{ text : '手写笔-converter '，link : ' 3359 github.com/Tao Xu sheng/手写笔-converter'}，]}，//添加侧边栏sidebar 3:['/'，'/git '，'/vue']}}有时我们可能需要多级侧边栏，

docsreadme . MDvuereadme . MDtwo . MDCSSreadme . MD

//dcos/。vu press/config . js module . exports={ theme config : { sidbar 3360 } '/vue/' :['一'，'二'，'/CSS/': ['三'，'四'。

在VuePress中编写Vue代码与我们通常编写单个文件的方式是一致的，有时我们可能需要使用Vue的UI组件库。例如元素、薄荷等。通常，当我们在项目中使用这些UI组件库时，我们会在main.js或botostrap.js文件中统一注册它们。幸运的是，vueperess也支持这个功能。我们可以通过创建一个文件来进行一些应用程序级别的配置。vu press/enhanceapp . js，这是一个exprotefault钩子函数。在这个钩子中，您可以做一些特殊的处理，比如添加全局路由钩子和注册外部组件库。

//.vue press/enhanceapp . js//全局注册Element组件库import Vue from ' Vue ' import Element from ' Element-ui ' import ' Element-ui/lib/theme-粉笔/> index.css' export default ({Vue，options，router})={vue.use (element)}在Vue的正常开发中，有时我们可能需要制作一些自定义组件。在vueperess中，我们可以在。vu press/组件目录。编译时，vueperess遍历所有*。vue文件，并看到它们被注册为全局组件。

//注册自定义组件//docs/。vue press/components/hello . vuetemplate div class=' CPT-hello ' hello vue press demo/div/template，这样我们在Markdown文件中写vue代码的时候就不需要注册这些组件了，可以直接在Markdown中使用。

//docs/。vu press/vue/README . mdtemplate div class=' test-demo ' { msg } } my-Hello/my-Hello El-button/El-button/div/templatescript export default { data(){ return { msg : ' Hello vu press！'} } }/脚本部署到Github页面

当我们写文件时，我们到达了我们最关心的地方。如何将打包好的代码推送到远程仓库的gh-pages分支，网上应该有很多文章描述如何做，但是很多方法比较麻烦。幸运的是，工具为我们解决了这个麻烦。

//1.下载gh-pages软件包npm install -D gh-pages//2\。将脚本命令' scripts ' : { ' docs : dev ' 3360 ' vue press dev docs '添加到package.json文件。Docs : Build ' : ' vupress Build Docs '，//我修改了上面VuePress的输出目录，所以如果没有修改vupress/config . js///的dest属性，这里的dist应该改为。vue press/dist ' deploy ' : ' GH-pages-d dist '，' deploy : build' :' NPM运行文档3360 build GH-pages-d dist'}//3 \。打包并推送到gh-pages分支npm运行deploy:build//4。打开你的Github页面，网址是https://your name/Github . io/repo summary

与Hexo相比，VuePress更容易使用，功能更强大。比如可以在vupress中注册自定义组件，在vupress中编写Vue的成本几乎为零。因此，如果您正在打开与Vue相关的库或其他项目，您可以使用VuePress作为文档编辑工具。虽然vu press的内容还没有完全看完，但相信你看完这篇文章就能对vu press有一个大概的了解，至少可以快速建立一个博客。如果您想了解更多关于vupress的信息，请参考vupress的中国原料药。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。