First of all, this is not a technical article, it is a general guide to writing a component, but more of an advertisement to get more people to use your library

At first, when you want to write your own, you will want to copy the project structure of the existing excellent library and so on. Usually you will spend a lot of time on this, so let’s dig it out now

1. What does a complete component project require?

Necessary:

  • Component build (webpack/rollup, etc.) and provide at least one mainstream output format (ESModule)
  • Demo and Demo source code
  • Documents, which can be generated pages like docsify, are embedded in README if you’re lazy

In fact, all of the above except for documentation is relatively easy to do, except for the possible pitfalls of building. So are we ready to go online? Yes. But you can do more by looking at some of the best libraries, such as the following:

Even better:

  • In a clear wayREADME.md
  • Provides multiple ways to buildes/cjs/umdAnd other formats of the package
  • A not ugly oneLogo
  • componentscreenshots(No *8 says a picture), the best interaction can be a GIF
  • package.jsonDon’t add them to your listpeerDependencies 和 devDependencies 里
  • A few sentences in the Readme explain the functionality of the component

That’s right. It’s easy to say, just like when you’re writing your company’s internal systems. It’s nice to want to interact with what you want, but you can’t do it

Time is very precious, just use it, to do well who can’t, I’m busy…

Okay, here’s the purpose of this article

2. So, is there any…

Is there such a template that I can use directly, I just care about how to write components, that is of course!

Vue-component-boilerplate is a warehouse dedicated to making it easier for the general public to write component items. It contains:

  • Components, documents, and demos are integrated out of the box
  • beautifulReadme, the structure is clear and practical! inlineFold the formatThe API documentation
  • Vue components support a variety of packaging methods, usingBiliBuild based on rollup outputes/cjs/umdThree formats
  • Demo uses POI packaging

On a graph

3. Usage

# Clone project
git clone https://github.com/waynecz/vue-component-boilerplate.git example-name

cd example-name

Delete the original Git information
rm -rf .git
Git to your own repository
git init && git remote add origin {your repo address}
# install dependencies
yarn
Copy the code

  1. Replace the necessary information in package.json with your own

  2. Start writing components!!

    # development
npm run dev

Component packaging
npm run build

# packaging demo
npm run build:demo
Copy the code

4. Publish components

After you have developed, you need to publish components. Here is a simple NPM publishing tutorial