An overview of the

Soul-plus is a Vue3 based mobile UI component library with a development pattern similar to vantUI and elementUI that supports on-demand import.

The component code is straightforward. If you want to learn how to write a component library, please give a star to your favorite gitee

The Git address of the component library

The project structure

Develop components in the Packages directory and introduce components in the SRC page to see what the page looks like. Docs is a document project generated using Vuepress that uses Markdown to write component documents.

├ ─ docs / / vuepress document ├ ─ packages / / component library source code directory │ ├ ─ Button │ ├ ─ Cell │ ├ ─ Overlay │ ├ ─ Popup │ ├ ─ Popup │ ├ ─ Toast │ ├ ─ Icon │ ├─Tabs │ ├─TabPane │ ├─Dialog │ ├─Field │ ├─ActionSheet │ ├─hooks // │ ├─ theme.js // Component library entry file ├─ SRC // Import components here to view page effects ├─package.jsonCopy the code

The development process

  • Component design and development
  • Release NPM package
  • Writing component documentation

Component design

  • Component single file.vueWrite separately from CSS style files to facilitate rollup packaging and import on demand
  • Using vue3<script setup>Syntax sugar, make the code level clear and concise
  • Write a composite API to separate functional logic into a function and use it in VUE.
  • In the base component, write props separately for use by higher-order components if they will be used by another component
  • Support function call and component call two kinds of components, first write normal single file components, and then write functional

Component Technology Conquering

Components that support function calls need to write functional call methods after writing the component normally.

Take the Dialog component as an example.

  • Write a shell to register the Dialog component and return the vNode using the h function
  • usecreateAppGet the context instance usingmountApply colours to a drawing
  • Write dialog Function to pass in parameters
// Get the component context and mount it to the DOM
export function mountComponent(RootComponent) {
  const app = createApp(RootComponent);
  const root = document.createElement('div');

  document.body.appendChild(root);

  return {
    instance: app.mount(root),
    unmount() {
      app.unmount();
      document.body.removeChild(root); }}; }Copy the code

Published to the NPM

  1. After a simple rollup configuration, package the component js in the root directory rollup.config.js

  2. Go to the Packages/Theme-Chalk package component style file. To simplify operations, write operations in package.json

{
  "lib:theme": "cd packages/theme-chalk && yarn clean && yarn build"."lib": "rm -rf es && rm -rf lib && rollup -c && yarn run lib:theme",}Copy the code
  1. Fill in the package.json module entry
{
  "main": "lib/soul-plus.js"."module": "es/soul-plus.js",}Copy the code
  1. After registering the NPM account, publish the component. The published component is named with the package.json property name

If the configuration taobao mirror, first set back to NPM mirror: $NPM config set registry at http://registry.npmjs.org

In the project root directory, execute the command line
npm publish
Copy the code

Write official documentation for components

Using Vuepress, execute the command line in the project root directory. VuePress is easy to use. Check out VuePress here for a quick start

# installation vuepress
npm install -D vuepress

# Create your first document
mkdir docs
echo '# Hello VuePress' > docs/README.md
Copy the code

It is worth noting that using vue components in md files needs to be set up in configuration docs/.vuepress/config.js. Using the vue components on the docs /. Vuepress/components directory

// docs/.vuepress/config.js
plugins: [['@vuepress/register-components',
      {
        componentsDir: path.resolve(__dirname, './components')}]],Copy the code

For example, write this in the button.md file

-- Title: Button ButtonsidebarDepth: 0
---

# # Button Button

<ClientOnly>
  <doc-button/>
</ClientOnly>

### Component properties| | name type description | | | -- -- -- -- -- -- -- -- -- - | -- -- -- -- -- -- -- -- - | -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - | |`loading`  | `Boolean`| loading state | |`disabled` | `Boolean`| disabled state | |`type`     | `String`| type, optional values`primary` `success` `warning` `danger` |

Copy the code

Deploy the document to Github

Click Github Pages to view vuePress deployment

conclusion

It’s an honor for you to be here. This component was written simply to familiarize yourself with the design patterns of enterprise business component libraries and learn the details of component library development. Why don’t you join Soul-Plus

Reprint statement: please indicate the author, mark the original link, if you have questions, send to [email protected]