Site Outcome Style



Project writing procedure

Making address: github.com/xuhuihui/da…

Liverpoolfc.tv: caibaojian.com/vuepress/gu…

Refer to the article: www.javascriptcn.com/read-31206….

Git Clone official Github, run to see the complete effect. Then according to the official website introduction and reference articles, combined with the complete code, step by step configuration content. Finally, reference Element’s design style, modify and add code to form a platform component library website.

(1) Install in the existing project

Install as a local dependency
npm install -D vuepress

Create a docs directory
mkdir docs

Create a markdown file
echo '# Hello VuePress' > docs/README.md

# Add some scripts to package.json: {
  "scripts": {
    "docs:dev": "vuepress dev docs"."docs:build": "vuepress build docs"}}# Run the project
yarn run docs:dev 
Copy the code

Garbled characters appear in the display document, as shown in the figure:



Solution: Change the ENCODING of the MD file to UTF-8



Change the contents of the MD file as follows:

---
home: trueActionText: Go to → actionLink: /baseComponents/ Features: - title: Layout class components Details: Basic components, quick, usable components for commonly used components - title: Knowledge base: Accumulate front-end knowledge, including vUE, React, KOA2, and NodeJSCopy the code

(2) Configuration file

Configuration (see links: caibaojian.com/vuepress/co…). The basic file for the VuePress site is.vuepress/config.js, which exports a JavaScript object:

module.exports = {
  title: 'data Com'// Set the site title description:'Just for fun', // dest:'./dist', // set output directory port: 2233, // themeConfig: {// theme configuration // add navigation bar nav: [{text:'home', link: '/'}, // navigation bar {text:'Component Document', link: '/baseComponents/' },
      { text: 'Knowledge base', link: '/knowledge/' },
      { text: 'github'// Here is a drop-down list. items: [ { text:'focus-outside', link: 'https://github.com/TaoXuSheng/focus-outside' },
          { text: 'stylus-converter', link: 'https://github.com/TaoXuSheng/stylus-converter'},]}], // Add sidebar for the following routes :{'/baseComponents/': [
        {
          title: 'Layout Class Components',
          collapsable: true,
          children: [
            'base/test1'.'base/test2'.'base/test3'.'base/test4',
          ]
        },
        {
          title: 'Visual Components',
          collapsable: true,
          children: [
          ]
        },
        {
          title: 'Utility Class Components',
          collapsable: true,
          children: [
          ]
        },
        {
          title: 'method class function',
          collapsable: true,
          children: [
          ]
        }
      ],
      '/knowledge/': [
        {
          title: CSS Knowledge Base,
          collapsable: false,
          children: [
          ]
        },
        {
          title: 'JS repository ',
          collapsable: false,
          children: [
          ]
        },
        {
          title: 'Node repository',
          collapsable: false,
          children: [
          ]
        },
        {
          title: 'VUE Repository',
          collapsable: false,
          children: [
          ]
        }
      ]
    }
  }
}Copy the code

The theme configuration section: Modify the style in.vuepress/override.styl:

$accentColor = #3EB9C8 // Theme color
$textColor = #2c3e50 // Text color
$borderColor = # eaECef // Border color
$codeBgColor = # 282C34 // Code background color// Read.content pre{margin: 0! important; }Copy the code

(3) Add other extension plug-ins

Plugin NPM installation: element-UI, vue-echarts, vue-highlight.

Introduced at.vuepress/ enhanceapp.js:

/** * Extension VuePress */ import VueHighlightJS from'vue-highlight.js';
import 'highlight.js/styles/atom-one-dark.css';
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import VueECharts from 'vue-echarts'// Register the chart import'./public/css/index.css'// Component CSS fileexportDefault ({Vue, // Vue constructor options being used by VuePress, // some options attached to the root instance router, // currently applied routing instance siteData // site metadata}) => {//... Use (VueHighlightJS) Vue.use(Element) Vue.component('chart', VueECharts)
}

Copy the code

(4) Markdown expansion

Call someone else to write good wheels: www.npmjs.com/package/vue…

  <highlight-code slot="codeText" lang="vue">
    <template>
      <div class="demo-button"> <div> <dt-button> Default button </dt-button> <dt-buttontype="primary"</dt-button> <dt-buttontype="success"</dt-button> <dt-buttontype="info"> Info button </dt-button> <dt-buttontype="warning"</dt-button> <dt-buttontype="danger"</dt-button> </div> </template> </highlight-code>Copy the code

(5) Insert button style in Markdown using Vue—–

Vuepress \docs\.vuepress\components\ SRC \button.vue

<template>
  <button
    class="dt-button"
    @click="handleClick"
    :disabled="disabled"
    :autofocus="autofocus"
    :type="nativeType"
    :class="[ size ? 'dt-button--' + size : '', type ? 'dt-button--' + type : '', { 'is-disabled': disabled, 'is-round': round, 'is-plain': plain } ]">
    <i :class="icon" v-if="icon"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
export default {
  name: 'DtButton',

  props: {
    size: String,
    type: {
      type: String,
      default: 'default'
    },
    nativeType: {
      type: String,
      default: 'button'
    },
    disabled: Boolean,
    round: Boolean,
    plain: Boolean,
    autofocus: Boolean,
    icon: {
      type: String,
      default: ' '
    }
  },
  methods: {
    handleClick (event) {
      this.$emit('click', event)
    }
  },
  mounted () {
    this.$emit('click', event)
  }
}
</script>Copy the code

Vuepress \docs\.vuepress\public\ CSS \button.css

\study\vuepress\docs\.vuepress\public\ CSS \index.css

@import './iconfont.css';
@import './icon.css';

@import './card.css';
@import './button.css'; // Button component @import'./checkbox.css';
Copy the code

# call button under.vuepress\ docs\.vuepress\components\test\test1.vue

<template>
  <div class="demo-button"> <div> <dt-button> Default button </dt-button> <dt-buttontype="primary"</dt-button> <dt-buttontype="success"</dt-button> <dt-buttontype="info"> Info button </dt-button> <dt-buttontype="warning"</dt-button> <dt-buttontype="danger"</dt-button> </div> </div> </template> <script> import DtButton from'.. /src/button'
export default {
  name: 'buttonWrap',
  components: {
    DtButton
  }
}
</script>

<style lang="less" scoped>
.demo-button{
  width: 100%;
  text-align: center;
  div {
    margin: 10px 0;
  }
}
</style>
Copy the code

Vuepress automatically registers the component by path. We can call the component by mapping the file path.

In the. \ vuepress \ docs \ baseComponents \ base \ test1 md

# Test Case 1
---
<Common-Democode title="Basic usage" description="Basic button Usage">
  <test-test1></test-test1>
  <highlight-code slot="codeText" lang="vue">
    <template>
      <div class="demo-button"> <div> <dt-button> Default button </dt-button> <dt-buttontype="primary"</dt-button> <dt-buttontype="success"</dt-button> <dt-buttontype="info"> Info button </dt-button> <dt-buttontype="warning"</dt-button> <dt-buttontype="danger"< / dt > dangerous button - the button > < / div > < / div > < / template > < / highlight - code > < / Common - Democode > | Tables | motorcycle | Cool | | -- -- -- -- -- -- -- -- -- -- -- -- --  |:-------------:| -----:| | col 3 is | right-aligned |The $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    The $1 |Copy the code

# Display effect as shown below: