关于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: '组件库应用办法阐明',
  }

官网文档地址配置参考

这里介绍局部罕用属性：

1. title 题目：

   配置以后文档题目（显示在文档左上角和首页地位）

2. description 形容：

   配置以后文档形容局部（显示在文档首页题目之下）

3. base 网站将在其部署的根本 URL。(Default: ‘/’)

   当你的文档默认须要部署在根目录时无需配置，当须要放在 doc 子门路下时，请配置 base: ‘/doc/’, 请留神：这里前后都须要 /

4. port 端口号: (Default: 8080)

   运行时的端口号

5. theme 自定义主题：(Default: undefined)

   指定此选项来应用自定义主题。

6. themeConfig: (Default: {})

   为应用的主题提供配置选项。这些选项将依据你应用的主题而有所不同。具体应用参见默认主题配置 (default theme config)

7. 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)
 };