I. Project Introduction:

Project description: Implement a component library similar to Element-UI to further master component encapsulation.

Project content: Complete the encapsulation of buttons, ICONS, layouts, rotation charts, tables and other basic functions of components; And complete part of the component test; Release the NPM version of dying- UI component library; Using VuePress to write component library page, button component has been completed; GitHub and Netlify can be sustainably deployed.

Ii. Project Background

Previously, component encapsulation touches were only needed in the project to encapsulate components. When I first came up with this idea, I knew it must be very difficult to start from scratch. Search resources on the b site, indeed similar, but only the basic button tutorial. After that, I went through all kinds of data and got stuck, especially when the project continued to deploy GitHub. In order to complete this project, I have to say that I deeply realized the helpless, but helpless pressure.

Purpose: The purpose of this time is because I look back over the years and I don’t have any real open source projects on my resume, aside from a few award winning projects. Write component library is to have a bright spot on my resume, want to be in the next interview, can say that they have studied component source code, they can independently complete the package of component library, version, deployment. That’s all.

Iii. Practice Process:

Using the technology

Vue-cli3, TypeScript, SCSS, CHAI, Mocha, Karma, VuePress

Through process

Website display

The image above shows a component library document page automatically generated by Vuepress, in the same style as the default vuepress. It mainly realizes the navigation of the document and configuration of the sample page of the component.

Dying – UI component library

The element-UI source code, seen earlier, mimics this framework and implements component libraries for components. The difference is that I use TS instead of JS. The component library is similar to Element.

Component development

Initialize the project with vuE-cli3 and modify the folder. The basic directory is as follows:Write each required component in SRC’s Packages. See previous published articles on how to write:Dy-ui component library a progress bar.

NPM release

The dY-UI component library is a progress bar. This article about publishing only talks about packaging entry files.

We set up the entry file and need to configure the related properties in package.json. Set the name, version, and private of the component.After configuring related items, register and log in to NPM, log in your OWN NPM account in the project, and then publish.

NPM login Enter the account, password, and email address NPM publishCopy the code

After publishing successfully, NPM pushes the notification to the mailbox bound to the publisher. At this point, you can see your project on the NPM website.

Dying – the UI document

The document project is initialized with VuePress, and the directory structure must be strictly adhered to according to its configuration. When configuring components, you configure the navigation and sidebar primarily in the config.js file.

themeConfig: {   // Theme configuration
        // repo: 'vuejs/vuepress',
        docsDir: 'docs'.// extend: '@vuepress/theme-default',
        search: false.searchMaxSuggestions: 10.logo: '/logo.png'.smoothScroll: true.nav: [{text: 'home'.link: '/'
            },
            {
                text: 'guide'.link: '/zh/guide/'./ / the navigation bar
            },
            {
                text: 'components'.link: '/zh/components/'}, {text: 'GitHub'.link: 'https://github.com/ClyingDeng/Dy-UI'},].// Add a sidebar for the following routes
        sidebar: {
            '/zh/components/': getComponentSidebar('components'),
            '/zh/guide/': getGuideSidebar('Development Guide'.'Design Principles'),}}}Copy the code

Paths are relative paths,/The default is readme. md in the docs folder (README must be capitalized). And so on,/zh/components/Indicates the readme. md file in the Components folder under the zh folder. This can be used when configuring the sidebar if it is the same level of subdirectoriesgetComponentSidebarF method, can be used at multiple levelsgetGuideSidebarMethods.

function getGuideSidebar(groupA, groupB) {
    return[{title: groupA,
            collapsable: false.children: [
                ' '.'quickstart',]}, {title: groupB,
            collapsable: false.children: [
                'guide-design',]}]}function getComponentSidebar(groupA) {
    return[{title: groupA,
            collapsable: false.children: [
                ' '.'container'.'button'.'icon'.'progress'.'upload'.'popover'.'datePicker'.'carousel'.'table'.'pagination'.'infiniteScroll']]}}Copy the code

Combining the above two blocks of code, you can see the corresponding page, in the path of the sidebar (e.g., / useful/components /) as the relative path, such as: this file corresponds to the quickstart is/useful/components/quickstart.

After editing the path and page content, deploy the project. You can click on minePage deployment of the DY-UI component librarySee how to deploy continuously.

Technical difficulties

1. Ts component is registered. Component name cannot be recognized. Solution: You can register components by creating static variables that can be used in index.ts.

import DyButton from './button/button/Button.vue'; .let components = [
  DyButton,
  ...
  DyTable
];
// console.log(infiniteScroll, infiniteScroll.comName);
const install = (Vue: any) = > {
  components.forEach((_ :any) = > {
    Vue.component(_.comName, _);
  });
Copy the code

2. As a beginner of VuePress, I have no idea about the structure of the directory and how to set the navigation sidebar. The solution is to go to GitHub to find the Vuepress project and see how its config is configured.

Iv. Summary thinking:

harvest

  • When you add a style, you can bind the computed properties. Add different styles as variables change.
  • Use global SCSS variables to reduce import operations and facilitate uniform variable changes.
  • Learn the idea of component encapsulation, according to the required parameters, complete the function of parameters in the component.

Growth summary

  • Make more like-minded friends, study together or laugh together.
  • When encountering difficulties, even if progress cannot be made for several days, we should keep on asking questions and searching. We firmly believe that there is no problem that cannot be solved.
  • Even if they spent a long time to complete the project, the number of users is very small, can not be discouraged, after all, there are people outside the mountain, only they have insisted on, in order to achieve the desired height.

Clyingdeng.github. IO/dy-uI-doc Component library source code: github.com/ClyingDeng/… Component library documentation source address: github.com/ClyingDeng/…

This article is participating in the “Nuggets 2021 Spring Recruitment Campaign”, click to see the details of the campaign.