Vuempress documentation

。。 2021-02-23 16:32:06
vuempress documentation


Install... In an existing project

 // install :
npm install -D vuepress
// Create a docs Catalog
mkdir docs
// Create a markdown file ( Equivalent to the entry page )
echo '# Hello VuePress' > docs/README.md
// package.json Add statement
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}

function

npm run docs:dev

pack

npm run docs:build

Garbled after running :

Solution : modify md The file code is UTF-8, It will display normally

How to use :

Directory structure

.
├── docs
│ ├── .vuepress ( Optional )
│ │ ├── components ( Optional )
│ │ ├── theme ( Optional )
│ │ │ └── Layout.vue
│ │ ├── public ( Optional )
│ │ ├── styles ( Optional )
│ │ │ ├── index.styl
│ │ │ └── palette.styl
│ │ ├── templates ( Optional , Be careful with your configuration )
│ │ │ ├── dev.html
│ │ │ └── ssr.html
│ │ ├── config.js ( Optional )
│ │ └── enhanceApp.js ( Optional )
│ │
│ ├── README.md
│ ├── guide
│ │ └── README.md
│ └── config.md
│
└── package.json
  • docs/.vuepress: For storing global configuration 、 Components 、 Static resources, etc .
  • docs/.vuepress/components: In this catalog Vue Components will be automatically registered as global components .
  • docs/.vuepress/theme: For storing local themes .
  • docs/.vuepress/styles: Used to store style related documents .
  • docs/.vuepress/styles/index.styl: Global style files that will be automatically applied , Will be generated in the final CSS End of file , Has a higher priority than the default style .
  • docs/.vuepress/styles/palette.styl: Used to override the default color constant , Or set up a new stylus Color constant .
  • docs/.vuepress/public: Static resource directory .
  • docs/.vuepress/templates: Storage HTML Template file .
  • docs/.vuepress/templates/dev.html: For the development environment HTML Template file .
  • docs/.vuepress/templates/ssr.html: Build on Vue SSR Of HTML Template file .
  • docs/.vuepress/config.js: The entry file for the configuration file , It can also be YML or toml.
  • docs/.vuepress/enhanceApp.js: Client application enhancements .

home page docs/README.md

This page is the first page of the project , The supporting configuration :

---
home: true // whether
actionText: Quick start →
actionLink: /guide/
features:
- title: Simplicity first
details: With Markdown The project structure for the center , With minimal configuration to help you focus on writing .
- title: Vue drive
details: enjoy Vue + webpack Development experience , stay Markdown Use in Vue Components , At the same time, you can use Vue To develop custom themes .
- title: High performance
details: VuePress Generate static... For each page pre render HTML, At the same time, when the page is loaded , Will serve as a SPA function .
footer: MIT Licensed | Copyright 2018-present xxxxxx
---

To configure config.js

structure :

 module.exports = {
title: ' Component library documentation ',
description: ' How to use component library ',
}

Official document address Configure the reference

Here are some common properties :

  1. title title :

    Configure the current document title ( Displayed in the upper left corner of the document and on the front page )

  2. description describe :

    Configure the current document description section ( Displayed under the title of the first page of the document )

  3. base The site will be deployed in its basic URL.(Default: '/')

    When your documents need to be deployed in the root directory by default, there is no need to configure , When you need to put doc In the sub path , Please configure base: '/doc/', Please note that : You need to be here before and after /

  4. port Port number : (Default: 8080)

    Port number at runtime

  5. theme Custom theme :(Default: undefined)

    Specify this option to use custom themes .

  6. themeConfig: (Default: {})

    Provide configuration options for the theme you use . These options will vary depending on the theme you use . For specific use, see Default theme configuration (default theme config)

  7. plugins: Plug in extensions

    • Directly introducing js:

       module.exports = {
      plugins: [
      require('./my-plugin.js')
      ]
      }
    • Use npm Plugins on :

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

      Please refer to the official document for more properties

palette.styl Style variable modifier :

// Color
$accentColor = #283eb2
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961
// Layout
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px
// Responsive change point
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

enhanceApp.js Application enhancement

similar vue Medium mian.js The role of , To enhance the functionality of the application , Such as element-ui Will register here to introduce .

structure :

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

Be careful : There will be no runtime problems when some libraries are introduced , And the times window is not defined perhaps document is not defined If the packaging fails , This is because vuepress Server side rendering is adopted So we can't find the corresponding window, Please amend it to

 import ElementUI from 'element-ui';
import XXX from "XXX";
export default ({
Vue, // VuePress In use Vue Constructors
}) => {
// ... Do some other application level optimizations
Vue.use(ElementUI);
Vue.mixin({
mounted(){
Vue.component(XXX.name, XXX);
}
})
};

Or change to

 // The extension is written here
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)
};
版权声明
本文为[。。]所创,转载请带上原文链接,感谢
https://qdmana.com/2021/02/20210223163138798l.html

  1. RxHttp - 轻量级、可扩展、易使用、完美兼容MVVM、MVC架构的网络封装类库
  2. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  3. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  4. 前端面试常考题:JS垃圾回收机制
  5. Frequently asked questions in front end interview: JS garbage collection mechanism
  6. Rxhttp - lightweight, extensible, easy to use, perfectly compatible with MVVM, MVC architecture network encapsulation class library
  7. Java之HTTP网络编程(一):TCP/SSL网页下载
  8. HTTP network programming in Java (1): TCP / SSL web page download
  9. Java之HTTP网络编程(一):TCP/SSL网页下载
  10. HTTP network programming in Java (1): TCP / SSL web page download
  11. 使用vite搭建vue项目
  12. 在组件中展示pdf文件:vue-pdf (由于未找到方法滑动加载下一页,只能点击加载下一页pdf文件)
  13. 在 vue 中通过 express 连接数据库
  14. Using vite to build Vue project
  15. Display PDF file in component: Vue pdf
  16. Connecting database through express in Vue
  17. 2021届秋招哈啰出行前端面经(一面)
  18. vue使用sdk进行七牛云上传
  19. Javascript性能优化【内联缓存】 V8引擎特性
  20. Small true wireless smart headset evaluation: put intelligence into the ear
  21. The front end experience of the 2021 autumn recruitment
  22. Vue uses SDK to upload Qi Niu cloud
  23. 深入理解 Web 协议 (三):HTTP 2
  24. dhtmlxGantt如何重新排序任务
  25. JavaScript performance optimization [inline cache] V8 engine features
  26. 深入理解 Web 协议 (三):HTTP 2
  27. Deep understanding of Web protocol (3): http 2
  28. 深入理解 Web 协议 (三):HTTP 2
  29. How dhtmlxgantt reorders tasks
  30. 深入理解 Web 协议 (三):HTTP 2
  31. JavaScriptBOM操作
  32. JavaScriptBOM操作
  33. Deep understanding of Web protocol (3): http 2
  34. Deep understanding of Web protocol (3): http 2
  35. dhtmlxGantt甘特图重新排序任视频教程
  36. vue实现七牛云上传图片功能
  37. vue.js环境配置步骤及npm run dev报错解决方案
  38. Deep understanding of Web protocol (3): http 2
  39. JavaScript BOM operation
  40. JavaScript BOM operation
  41. Dhtmlxgantt reordering video tutorial
  42. Vue to achieve seven cattle cloud upload image function
  43. vue.js Environment configuration steps and NPM run dev error reporting solution
  44. 什么是HTTPS以及如何实施HTTPS?
  45. vue使用sdk进行七牛上传
  46. JavaScript 邮箱验证 - 正则验证
  47. Codeless development platform cloud watch sets off a "new revolution" in enterprise Digitalization
  48. Codeless development of cloud watch for enterprise digital solution
  49. What is HTTPS and how to implement it?
  50. Vue uses SDK to upload seven cows
  51. JavaScript mailbox verification - regular verification
  52. JavaScriptBOM操作
  53. JavaScript BOM operation
  54. How to create a new NPM package and publish it to the NPM community
  55. vue --tinymce 解决上传图片的方法
  56. Vue development
  57. A simple solution for vite to batch introduce SVG symbol
  58. Building 3D rendering engine from scratch with JS (2)
  59. Vue -- tinymece solution to upload pictures
  60. Common configuration of nginx