Share a vite + vue3 component library scaffolding tool
Whether it is vue2 Family Bucket or vue3 + vite + TypeScript, almost everyone can use component libraries, but developing an independent component library by yourself is not something everyone can master, because building a basic development environment for component libraries will deter many students. . A component library should include at least three aspects:
- Development and packaging of component libraries;
- Development and packaging of component library documents;
- The command line tool cli quickly creates new components.
In the past few days, programmer Elegant Brother has built the basic scaffolding of a component library:
vue3-component-library-archetype
On the basis of this scaffolding, you can use the built-in cli to quickly create new components, and just follow the routine to develop components and documents. Scaffolding greatly simplifies environment construction, packaging configuration, type definition extraction and other tools. It can be used out of the box , and everyone can focus on the development of the component itself.
The scaffolding adopts monorepo style and uses pnpm as the package management tool.
1 Component library scaffolding content
- Component library development, packaging, and release
- Component library document writing, packaging, a set of code writing and demonstration demo
- Quickly create component command line cli
- Example demonstration of component library construction
2 Component library scaffolding technology stack
- Quick 3
- Vue 3
- TypeScript
- Vitepress 1.0
- ESLint
3 Instructions for use
3.1 Clone the code locally
git clone [email protected]:HeroCloudy/vue3-component-library-archetype.git
3.2 Install dependencies
If you do not have pnpm installed, you need to follow pnpm first
npm install -g pnpm
Install dependencies:
pnpm i
3.3 Local development
To develop components in example, use the command:
pnpm run dev:dev
The access address is http://localhost:3000/
To develop components in the component library document, use the command:
pnpm run docs:dev
The access address is http://localhost:3100/
The component library document interface is as follows:
3.4 Create new components
pnpm run gen:component
Follow the prompts to enter the component name, component Chinese name, and component type (.tsx or .vue).
After executing the command to create a component, the component will be automatically registered in the component library, and the document template and demo in the document will be automatically generated without any manual configuration.
3.5 Building documentation
pnpm run build:docs
The packaged and built files are located in the docs/.vitepress/dist directory
3.6 Building example
pnpm run build:dev
The packaged and built files are located in the dist directory
3.7 Publish component library
Component library packaging:
pnpm run build:lib
You can test it on a local private server before releasing it to npm.
Start local private server:
pnpm run start:verdaccio
After successful startup, visit http://localhost:4873/ in the browser
If you are using it for the first time, you need to create a user.
Publish the component library to the local private server:
pnpm run pub:local
4 Component library command description
The command entries of the component library are all in the scripts in package.json in the root directory . Due to the monorepo approach, most commands are implemented in their respective modules.
All commands are as follows:
- dev:dev
- dev:uat
- dev:prod
- build:dev
- build:uat
- build:prod
- preview:example
- build:lib
- docs:dev
- docs:build
- docs:preview
- gen:component
- start:verdaccio
- pub:local
pnpm run dev:dev
Local development example, use dev environment configuration, access address is http://localhost:3000/
pnpm run dev:uat
Local development example, use uat environment configuration, access address is http://localhost:3000/
pnpm run dev:prod
Local development example, use prod environment configuration, access address is http://localhost:3000/
pnpm run build:dev
Packaging dev environment example, the files generated by packaging are located in the dist directory of the project root directory
pnpm run build:uat
Package uat environment example. The files generated by packaging are located in the dist directory of the project root directory.
pnpm run build:prod
Package prod environment example. The files generated by packaging are located in the dist directory of the project root directory.
pnpm run preview:example
To preview the packaged example, the access address is: http://localhost:4173/
pnpm run build:lib
Packaging component library, the files generated by packaging are located in the lib directory of the project root directory
pnpm run docs:dev
Local development component library documentation, access address: http://localhost:3100/
pnpm run docs:build
Component library document packaging, the generated files are located in the docs/.vitepress/dist directory under the project root directory
pnpm run docs:preview
To preview the packaged component library document, the access address is: http://localhost:4173/
pnpm run gen:component
Create new components quickly. Enter the component name, component description (Chinese name), and component type (tsx\vue) in order to automatically generate the component and complete the configuration.
Using this command prevents component developers from distracting themselves from the creation of various configurations, basic directories, and files, allowing them to focus on the development of the component itself.
pnpm run start:verdaccio
Start verdaccio. When developing locally, use verdaccio as the local npm private server for testing.
Use this command to start the verdaccio private server. After successful startup, visit http://localhost:4873/ in the browser.
If you are using it for the first time and need to create a user, you can search for verdaccio to see its specific use.
pnpm run pub:local
Publish the component library to the local private server.
If you have any questions, please contact me
The following topics will share the implementation process of this scaffolding, and let you implement this scaffolding step by step, and implement JSON Schema forms, lists and other components based on this scaffolding, and develop a general backend management system in the example.
Thank you for reading this article. If this article has given you a little help or inspiration, please support it three times, like, follow, and collect. The author will continue to share more useful information with you.