Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Vuepress can use md syntax to quickly generate document blogs. Here only record the process of generating vUE component library documents with vuepress and the problems encountered in using it.

Initialization and configuration

Install dependencies on existing projects (global installation is not recommended)
yarn add -D vuepress # npm install -D vuepress
Copy the code
Create directory files (adjust them for the project)
Project ├── docs │ ├─.Vuepress │ ├─ Components// Vue component files will be automatically registered as global components│ ├─ ├─ exercises// Style file│ ├─ ├─ public// Static resources (images, font ICONS, etc.)│ ├── ├─ favicon// The entry file of the configuration file│ ├ ─ ─ views// md page file│ ├ ─ ├ ─ garbageCopy the code
Add the following command to package.json
{"scripts": {"dev": "vuepress dev docs", // Run "build" locally: "vuepress build docs" // pack}}Copy the code
Edit the config.js file as follows :(note the file named readme.md here)
module.exports = {
    base:'/'.If you want to deploy your site to a subpath, append the corresponding path to the '/' (if this is not set correctly, the CSS and JS paths will be wrong after the deployment).
    title: 'xxx'.// The title of the site, which will be used as a prefix for all page titles and will also be displayed in the navigation bar by default
    description: 'Vue2.X based Component Library'.// A description of the site, which will be rendered to the HTML of the current page with a '
      ' tag
    head: [ // Additional tags that need to be injected into the HTML '' of the current page
      ['link', { rel: 'icon'.href: '/favicon.ico'}]],themeConfig: {
      nav: [ // Top navigation
        { text: 'Home'.link: '/' },
        { text: 'Gitee'.link: 'https://gitee.com'},].sidebar: [ / / the menu
          {
              title: 'components'./ / the menu title
              collapsable: false.// Whether the menu collapses
              children: [ // Corresponding submenu
                {
                    title: 'base'.collapsable: false.children:[
                      {
                        title: 'Button'.collapsable: false.// If the file is readme. md, just write 'views/components/basic/', otherwise it will not be loaded
                        path: 'views/components/basic/Button.md'}, {title: 'Icon'.collapsable: false.path: 'views/components/basic/Icon.md',},]},}]},scss: {// Configure the SCSS root directory
         includePaths: [path.join(__dirname, './style')]}}Copy the code

For more details, see the official website of Vuepress

Home Page Configuration (docs/ readme.md file)
Home: true heroImage: /hero.png heroText: Hero Tagline: Hero Subtitle actionText: Get started → actionLink: /zh/ Guide/Features: - Title: title1 details: here is the details - title: title2 details: here is the details - title: title3 details: here is the details - footer: here is the text at the bottom of the home pageCopy the code
Use vUE in md files, use files defined in Components in tags,Vue files in.vuepress/ Components are automatically registered as global components,Therefore, you can use the named component without importing it again.
// Button.MD
<ClientOnly>
  <xxx-button/>
</ClientOnly>
Copy the code
Use Alibaba vector map in Vuepress

willPlace the static vector files in the.vuepress/public/ Fonts folder(otherwise the font files will be lost after packaging), which is usually introduced in main.js when using vueThe CSS file in publicImport the corresponding CSS file in config via require or in vue style via @import ().#####- Run and package using the configuration in package.jsonnpm run docs:devRun locally,npm run docs:buildTo package, the packaged file in.vuepress/distUnder the