This is the first day of my participation in the August Challenge. For details, see:August is more challenging

Preface ✍ ️

  • Recently build their own component library, about the document is usedVuepress
  • There are various ways to present component examples documented on the website, but none of them are desirable
  • By looking at the Internet andElementSource code to find out what I think is an optimal solution, take this opportunity to share
  • This article mainly analyzes and summarizes the ideas. If you want to see the specific operation directly, you can see how to write an example of components using Vuepress gracefully (below).

Actual effect ✔️

Let’s send out the final product for you to see

  • Before optimization

  • The optimized

Maybe it doesn’t make a difference in terms of the effect but if you put the markdown code out there it makes a big difference, right

As you can see, the page is not only a little more beautiful, the code can be said to be very concise, how do you do it, please listen to me carefully

Get started ✊

Document selection

  • For a component library, there is a proper documentation to show the componentsdemoIs the most basic thing, so I chose itVuepressI think it’s simple and easy
  • VuepressWas born to supportVueAnd its subproject documentation requirements so his style is similar toVueThe documentation is similar to

Set out to show

  • inVuepressIn, originally support inmarkdownFile to write a matchVueSyntax code
  • VuepressInternal willmarkdownGrammar intovueAnd then through internal integrationvue-loaderTo get to the finalHTML
  • So we’re looking at.mdIt can be entered in the filemdSyntax can also be enteredVueCode. That makes it easy.

  • Pa! Pretty soon, I wrote my own components on it, which was a bit of a hassle, but the end result was the way I wanted it to be (I didn't realize how serious it was at this point)

Feel trouble

  • When I wrote the second component example, it felt like something was wrong
  • I’m going to do it the way I did itdemoI found that there was a big problem with this method
  1. Style writing troubleThe style for the document component example is basically the same: one box under one code, but with the above rendering style each time the style has to be rewritten (plusmdFile without code hints too uncomfortable)
  2. Code duplicationYou know from the figure above let me write onebuttonThe same code is written twice for the demodemoAnd show the code
  3. Page clutterFrom the figure above we can see that in amdIt’s in the file againmdGrammar andvueThe grammar is a mess
  4. No centralized managementEach example would presumably have a universal thing (e.gstyle) There is no centralized management, a change will be all change

To choose

The first method is 🙅♂️

The syntax for writing Vue+md directly in the MD file (obsolete! This method requires too much code to be reused.)

The second method 🙅♂️

Each demo encapsulates a Vue component and maintains it separately, rendering it directly by Vuepress, and importing the style in a unified CSS. However, this method still makes the document exist the syntax of components, and it is difficult to maintain more pages

# Button < BTN ></ BTN > ## HTML <l-button> default Button </l-button> < L-button type="primary"> </l-button> <l-button Type ="success"> Success button </l-button> < L-button type="info"> Prompt button </ L-button > <l-button type="warning"> Warning button </ L-button > <l-button Type ="danger"> </l-button> ' 'Copy the code

The third way is 🙅♂️

On top of that, import the code blocks via Vuepress’s built-in <<< @/filepath

# # Button Button < BTN > < / BTN > # # use ` ` ` HTML < < < @ / docs /. Vuepress/components/BTN. Vue ` ` `Copy the code
  • After trying the above three methods, I still feel that I need to not only write code in components, but also inmdThe document also has to write, still feel a bit troublesome, there is no better way to let me only inmdIf you edit the file, the page changes directly?
  • Just as I was about to go baldelementI see this uniform style and I think how are these UI libraries managed
  • Open theelementThe source suddenly enlightened 😋

The fourth method 🙆♂️

Really is to see an enterprise source code for ten years, how can there be such a simple way to write, through the custom container to edit, unified style management, document clean and concise, decided to be him!! 🍧

### Disabled Status Indicates that the button is unavailable. :::demo You can define whether the button is available by using the 'disabled' property, which accepts a 'Boolean' value. HTML <el-row> <el-button disabled> Default button </el-button> <el-button type="primary" disabled> Main button </el-button> <el-button Type ="success" disabled> Success button </el-button> <el-button type="info" disabled> Information button </el-button> <el-button type="warning" Disabled > Warning button </el-button> <el-button type="danger" disabled> Danger button </el-button> </el-row> <el-row> < El-button plain Disabled > Plain button </el-button> <el-button type="primary" plain disabled> Main button </el-button> <el-button type="success" plain Disabled > Success button </el-button> <el-button type="info" plain Disabled > Information button </el-button> <el-button type="warning" plain Disabled > Warning button </el-button> <el-button type="danger" plain disabled> Danger button </el-button> </el-row> :::Copy the code

Fumble fumble 🧠

  • To be honest, just opened it.elementThe source code is still a little unclear about this:::demoHow did it come about
  • So watchelementDocument discovery through this custom container is automatically compiled to havedemo-blockComponents of a class
::: demo
xxx
:::
Copy the code

  • Find the corresponding file after searching the source code

  • And then you just have to figure out how did he compile this little piece of code into this component
  • Compile? When will it compile?webpackTo deal with? !!!!!!!!!
{
        test: /\.md$/,
        use: [
          {
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                preserveWhitespace: false
              }
            }
          },
          {
            loader: path.resolve(__dirname, './md-loader/index.js')
          }
        ]
      }
Copy the code
  • I see. As you can see from the configuration file,MarkdownThrough the firstmd-loaderAnd then I’ll turn it over tovue-loaderTo deal with. So we go through these twoloaderThe processing,MarkdownwithVueSame components
  • althoughelementNot withVuepressBut the bottom line is all aboutmarkdownIs that a reference to ourVuepressAlso likeelementHow about using this custom container for documents? The answer is yes!

Lee Seung-analysi 🙋♂️

After looking at the source code for Element, you get a sense of what’s going on

  • The first step is to build a generic component that receives blocks of code for presentationdemoAnd unify the style
  • Step 2: Set oneMarkdownCustom container to writedemocode
  • The third step is to convert the custom container into a generic component built earlier so that it can be used in themdUse a custom container to achieve the above effect
  • Step 4 ExpandmarkdownThe render method allows us to input a block of code that can output content as conformingVue TemplateSyntax block
  • The fifth step becomesvueAfter the codeVuepressthevue-loaderProcess compilation into documents

Put it at the end 🐌

  • The main thread of this article is how tomdFile custom container code block intovueComponent and render, next I will share how I did inVuepressThe use of
  • In case the article is too long to affect the experience, the rest of the detailed analysis and operation is in the example of how to write components gracefully using Vuepress (below).
  • If you think this article is helpful to your words might as well 🍉 attention + thumbs up + favorites + comments + forwarding 🍉 support yo ~~😛

Past highlights 🌅

How fast is Vue 3.0? 🚀

Talk about front-end routing 🏃

Hand in hand 🧑🤝🧑 Don’t worry about learning Gulp

For convenience, I changed someone else’s wheel 😅