The market there are a wide variety of UI component libraries, such as Element and iView, their strong doubt. But the situation we are faced with more complex needs, when they can no longer meet the needs of our time, this time it is necessary to develop a set of component libraries of their own team of.
Why be developed component library?
If your company is no requirement for the style of the page, then you just simply take a component library to use on the line, such as element, iView, etc., do not have to repeat create the wheel of;
if you currently only individuals with a component, or is only required for the individual components, as long as your project in which the development of a .vue single file component on it; if you want a team of more rapid development approach, hoping to set a kind of standard applications and on style components have higher requirements, then you need to develop a library of components.
Development component library steps: (
Create a project
Structural adjustment project
Writing components
Use vue-cli-service library packaged compilation mode
Publish to npm
）
Development steps:
Step 1: Create a project
Step Two: After you finish creating the project, you will find in the root directory of the project such an interface, then add a new folder called packages, rename the file to the src examples
The third step: Drag the item to the compiler, create a file in the root directory vue.config.js
Step Four: Create the folder in the file packages, the interface is as follows, written in assembly
among them:
| - datePicker // components of the new written to datepicker for example
| - theme-default // theme file
Theme file is special, he as a separate release introduces a package, to facilitate the topic publisher, and then later introduced. Next, datePicker introduced:
the fifth step:
datePicker.vue file code
datePicker/index.js
Batch registration component
Package/index.js
Local test components
Our components and the preparation is completed, the first step to test locally:
examples/main.js
How can we see in the browser components run successfully, the next step is to get our code is packaged into npm library, then you need to be packaged by vue-cli3 in library mode vue-cli-service of.
Execution npm run build-lib
Modify package.json
Add the root .npmignore file
To publish under npm, just lib directory, package.json and readme.md file, you need to ignore the other directories
.npmignore
(.Npmignore file is a hidden file, it is not visible in the compiler, add the following code file in the root directory :)
examples/
packages/
public/
vue.config.js
postcss.config.js
babel.config.js
*.map
Login npm (if not npm account, you can go to the official website to register an npm)
Last Login npm official website to see, on the success of it! ! !
