VuePressVue驱动的静态网站生成器入门教程

　　特点简洁至上，以Markdown为中心的项目结构，以最少的配置帮助你专注于写作。Vue驱动，享受Vuewebpack的开发体验，可以在Markdown中使用Vue组件，又可以使用Vue来开发自定义主题。高性能，VuePress会为每个页面预渲染生成静态的HTML，同时，每个页面被加载的时候，将作为SPA运行。介绍
　　VuePress由两部分组成：第一部分是一个极简静态网站生成器（opensnewwindow），它包含由Vue驱动的主题系统和插件API，另一个部分是为书写技术文档而优化的默认主题，它的诞生初衷是为了支持Vue及其子项目的文档需求。
　　每一个由VuePress生成的页面都带有预渲染好的HTML，也因此具有非常好的加载性能和搜索引擎优化（SEO）。同时，一旦页面被加载，Vue将接管这些静态内容，并将其转换成一个完整的单页应用（SPA），其他的页面则会只在用户浏览到的时候才按需加载。它是如何工作的？
　　事实上，一个VuePress网站是一个由Vue、VueRouter和webpack驱动的单页应用。如果你以前使用过Vue的话，当你在开发一个自定义主题的时候，你会感受到非常熟悉的开发体验，你甚至可以使用VueDevTools去调试你的自定义主题。
　　在构建时，我们会为应用创建一个服务端渲染（SSR）的版本，然后通过虚拟访问每一条路径来渲染对应的HTML。这种做法的灵感来源于Nuxt（opensnewwindow）的nuxtgenerate命令，以及其他的一些项目，比如Gatsby快速上手
　　1、创建并进入一个新目录mkdirvuepressstartercdvuepressstarter
　　2、使用你喜欢的包管理器进行初始化yarninitnpminit
　　3、将VuePress安装为本地依赖
　　我们已经不再推荐全局安装VuePressyarnaddDvuepressnpminstallDvuepress
　　4、创建你的第一篇文档mkdirdocsechoHelloVuePressdocsREADME。md
　　5、在package。json中添加一些scripts
　　这一步骤是可选的，但我们推荐你完成它。在下文中，我们会默认这些scripts已经被添加。｛scripts：｛docs：dev：vuepressdevdocs，docs：build：vuepressbuilddocs｝｝
　　6、在本地启动服务器yarndocs：devnpmrundocs：dev
　　VuePress会在http：localhost：8080（opensnewwindow）启动一个热重载的开发服务器。
　　现在，你应该已经有了一个简单可用的VuePress文档。接下来，了解一下推荐的目录结构和VuePress中的基本配置。目录结构
　　VuePress遵循约定优于配置的原则，推荐的目录结构如下：。docs。vuepress（可选的）components（可选的）theme（可选的）Layout。vuepublic（可选的）styles（可选的）index。stylpalette。styltemplates（可选的，谨慎配置）dev。htmlssr。htmlconfig。js（可选的）enhanceApp。js（可选的）README。mdguideREADME。mdconfig。mdpackage。jsondocs。vuepress：用于存放全局的配置、组件、静态资源等。docs。vuepresscomponents：该目录中的Vue组件将会被自动注册为全局组件。docs。vuepresstheme：用于存放本地主题。docs。vuepressstyles：用于存放样式相关的文件。docs。vuepressstylesindex。styl：将会被自动应用的全局样式文件，会生成在最终的CSS文件结尾，具有比默认样式更高的优先级。docs。vuepressstylespalette。styl：用于重写默认颜色常量，或者设置新的stylus颜色常量。docs。vuepresspublic：静态资源目录。docs。vuepresstemplates：存储HTML模板文件。docs。vuepresstemplatesdev。html：用于开发环境的HTML模板文件。docs。vuepresstemplatesssr。html：构建时基于VueSSR的HTML模板文件。docs。vuepressconfig。js：配置文件的入口文件，也可以是YML或toml。docs。vuepressenhanceApp。js：客户端应用的增强。配置文件
　　如果没有任何配置，这个网站将会是非常局限的，用户也无法在你的网站上自由导航。为了更好地自定义你的网站，让我们首先在你的文档目录下创建一个。vuepress目录，所有VuePress相关的文件都将会被放在这里。你的项目结构可能是这样：。docsREADME。md。vuepressconfig。jspackage。json
　　一个VuePress网站必要的配置文件是。vuepressconfig。js，它应该导出一个JavaScript对象：module。exports｛title：HelloVuePress，description：Justplayingaround｝
　　对于上述的配置，如果你运行起devserver，你应该能看到一个页面，它包含一个页头，里面包含一个标题和一个搜索框。VuePress内置了基于headers的搜索它会自动为所有页面的标题、h2和h3构建起一个简单的搜索索引。其他配置格式
　　你也可以使用YAML（。vuepressconfig。yml）或是TOML（。vuepressconfig。toml）格式的配置文件。主题配置
　　一个VuePress主题应该负责整个网站的布局和交互细节。在VuePress中，目前自带了一个默认的主题（正是你现在所看到的），它是为技术文档而设计的。同时，默认主题提供了一些选项，让你可以去自定义导航栏（navbar）、侧边栏（sidebar）和首页（homepage）等，应用级别的配置
　　由于VuePress是一个标准的Vue应用，你可以通过创建一个。vuepressenhanceApp。js文件来做一些应用级别的配置，当该文件存在的时候，会被导入到应用内部。enhanceApp。js应该exportdefault一个钩子函数，并接受一个包含了一些应用级别属性的对象作为参数。你可以使用这个钩子来安装一些附加的Vue插件、注册全局组件，或者增加额外的路由钩子等：使用异步函数也是可以的exportdefault（｛Vue，VuePress正在使用的Vue构造函数options，附加到根实例的一些选项router，当前应用的路由实例siteData，站点元数据isServer当前应用配置是处于服务端渲染或客户端｝）｛。。。做一些其他的应用级别的优化｝官网：https：vuepress。vuejs。orgzh
　　觉得效果不错的请帮忙加个关注点个赞，经常分享前端实用开发技巧