Business Component documentation

Build using VuePress

Mkdir docs // Create a project directory NPM init-y // initialize the NPM environment NPM I vuepress // install dependency NPM element-ui highlight-js NPM I less less-loader -DCopy the code

Highlight.js is for code highlighting.

Entrance to the file

The entry file doc/ readme. md readme. md of the vuepress project must be in uppercase, otherwise it cannot be identified

The configuration file

Create the.vuepress folder in the root directory, then create the config.js file in that directory, and set up the navigation bar and the sidebar. See the official website for more configurations

module.exports = {
  title: 'Business Component Library'.description: 'Common Business Components'.dest: './build'.port: 1234.themeConfig: {
    nav: [{text: 'home'.link: '/'},].sidebar: {
      '/components/': [{
        collapsable: true.children: [
          'card']}]}}Copy the code

Modify the default styleFor detailed class name description, see the official website

Create vuepress/style/palette. Styl file

/ / color
$codeBgColor = #fafafa // Code background color

$accentColor = #3eaf7c
$textColor = #2c3e50

$borderColor = #eaecef
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564.35%)
$badgeErrorColor = #DA5961

.content pre {
  margin: 0! important;
}

.theme-default-content:not(.custom) {
  max-width: 1000px ! important;
}
Copy the code

Creating a document file

Create the Components folder under the root of your project, where you will create the MD file. components/card.md

Add a component to make it interactive to see the effect of the componentSee using vUE components in MD for details

All *. Vue files found in.vuepress/ Components are automatically registered as global asynchronous components, such as:

.└ ─.exercises ─ exercises -1.Vue ├─ ├─ vue ├─ vue ├─ vue ├─ vue ├─ vueCopy the code

core-js not found

You can use these components directly in any Markdown file (component names are retrieved by filename).

<demo-1/>
<OtherComponent/>
<Foo-Bar/>
Copy the code

After importing the component, you may encounter code-js not found errors like this:

There may be an error when installing dependencies. Just reinstall code-js. If it still doesn’t work, you can remove node-modules and reinstall it.

less: this.getOptions is not a function

The less syntax used by my component is already built into Vuepress, so you just need to install the dependencies

npm i less less-loader -D
Copy the code

This. GetOptions is not a function error. The latest version of the less-loader does not have getOptions. Solve this problem by installing the specified version

NPM [email protected] - I DCopy the code

Get everything ready and restart the NPM run dev project. I wanted to make it look like the element-UI component document

Above is the display component, in the middle is the component description, below is the demo code of three parts, I wrote an additional Vue component block. Vue, this component has three slots corresponding to these three parts.

Then continue to flesh out your business components