关于vuepress:Vuepress记录文档

在已有我的项目中装置

  // 装置：  npm install -D vuepress  // 创立一个docs 目录  mkdir docs  // 创立一个 markdown 文件(相当于入口页)  echo '# Hello VuePress' > docs/README.md  // package.json添语句  "scripts": {    "docs:dev": "vuepress dev docs",    "docs:build": "vuepress build docs"  }

运行

npm run docs:dev

打包

npm run docs:build

运行后呈现乱码问题：

解决形式：批改md文件编码为UTF-8, 即可失常显示

如何应用：

目录构造

.├── docs│   ├── .vuepress (可选的)│   │   ├── components (可选的)│   │   ├── theme (可选的)│   │   │   └── Layout.vue│   │   ├── public (可选的)│   │   ├── styles (可选的)│   │   │   ├── index.styl│   │   │   └── palette.styl│   │   ├── templates (可选的, 审慎配置)│   │   │   ├── dev.html│   │   │   └── ssr.html│   │   ├── config.js (可选的)│   │   └── enhanceApp.js (可选的)│   │ │   ├── README.md│   ├── guide│   │   └── README.md│   └── config.md│ └── package.json

docs/.vuepress: 用于寄存全局的配置、组件、动态资源等。
docs/.vuepress/components: 该目录中的 Vue 组件将会被主动注册为全局组件。
docs/.vuepress/theme: 用于寄存本地主题。
docs/.vuepress/styles: 用于寄存款式相干的文件。
docs/.vuepress/styles/index.styl: 将会被主动利用的全局款式文件，会生成在最终的 CSS 文件结尾，具备比默认款式更高的优先级。
docs/.vuepress/styles/palette.styl: 用于重写默认色彩常量，或者设置新的 stylus 色彩常量。
docs/.vuepress/public: 动态资源目录。
docs/.vuepress/templates: 存储 HTML 模板文件。
docs/.vuepress/templates/dev.html: 用于开发环境的 HTML 模板文件。
docs/.vuepress/templates/ssr.html: 构建时基于 Vue SSR 的 HTML 模板文件。
docs/.vuepress/config.js: 配置文件的入口文件，也能够是 YML 或 toml。
docs/.vuepress/enhanceApp.js: 客户端利用的加强。

首页docs/README.md

该页为我的项目的首页，反对配置：

---home: true // 是否actionText: 疾速上手 →actionLink: /guide/features:- title: 简洁至上  details: 以 Markdown 为核心的我的项目构造，以起码的配置帮忙你专一于写作。- title: Vue驱动  details: 享受 Vue + webpack 的开发体验，在 Markdown 中应用 Vue 组件，同时能够应用 Vue 来开发自定义主题。- title: 高性能  details: VuePress 为每个页面预渲染生成动态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。footer: MIT Licensed | Copyright © 2018-present xxxxxx---

配置`config.js`

构造：

  module.exports = {    title: '组件库文档',    description: '组件库应用办法阐明',  }

官网文档地址配置参考

这里介绍局部罕用属性：

title题目：
配置以后文档题目（显示在文档左上角和首页地位）
description形容：
配置以后文档形容局部（显示在文档首页题目之下）
base网站将在其部署的根本 URL。(Default: '/')
当你的文档默认须要部署在根目录时无需配置，当须要放在doc子门路下时，请配置base: '/doc/', 请留神：这里前后都须要/
port端口号: (Default: 8080)
运行时的端口号
theme自定义主题：(Default: undefined)
指定此选项来应用自定义主题。
themeConfig: (Default: {})
为应用的主题提供配置选项。这些选项将依据你应用的主题而有所不同。具体应用参见默认主题配置(default theme config)

plugins: 插件扩大

间接引入js：

  module.exports = {    plugins: [      require('./my-plugin.js')    ]  }

应用npm上的插件：

  module.exports = {    plugins: [ 'vuepress-plugin-xx' ]  }

更多属性请参照官网文档

palette.styl款式变量批改项：

// 色彩$accentColor = #283eb2$textColor = #2c3e50$borderColor = #eaecef$codeBgColor = #282c34$arrowBgColor = #ccc$badgeTipColor = #42b983$badgeWarningColor = darken(#ffe564, 35%)$badgeErrorColor = #DA5961// 布局$navbarHeight = 3.6rem$sidebarWidth = 20rem$contentWidth = 740px$homePageWidth = 960px// 响应式变动点$MQNarrow = 959px$MQMobile = 719px$MQMobileNarrow = 419px

`enhanceApp.js`利用加强

相似vue中的mian.js的作用，用于加强利用的性能，如element-ui将在此处进行注册引入。

构造：

import Element from 'element-ui';import 'element-ui/lib/theme-chalk/index.css'; export default ({   Vue, // the version of Vue being used in the VuePress app   options, // the options for the root Vue instance   router // the router instance for the app }) => {   // ...apply enhancements to the app   Vue.use(Element); }

留神：引入某些库时会呈现运行时没任何问题，而打包时报window is not defined或者document is not defined导致打包时失败的话，这是因为vuepress采纳的是服务端渲染所以此时找不到对应的window，请批改为

 import ElementUI from 'element-ui'; import XXX from "XXX";   export default ({   Vue, // VuePress 正在应用的 Vue 构造函数 }) => {   // ...做一些其余的利用级别的优化   Vue.use(ElementUI);   Vue.mixin({     mounted(){       Vue.component(XXX.name, XXX);     }   }) };

或者改为

 // 扩大写这里 import Element from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; export default async ({   Vue,   options,   router,   isServer }) => {   const components = await import('XXX')   Vue.use(Element);   Vue.use(components.default) };