The first two articles shared the basic component library project vue3-component-library-archetype based on vite3 vue3 and the tool yyg-cli for quickly creating the project . However, in medium and large enterprise-level projects, these scaffoldings are usually built independently. or accelerator. Elegant brother hopes that every front-end partner can know why, so the next article will enter the Vue3 enterprise-level elegant practical series. The entire series will include five parts:
First, I will share how to build a basic component library project from scratch, that is, how to implement vue3-component-library-archetype from scratch .
1 Functions that component library projects should have
After referring to Vue3 open source UI projects such as Element Plus , Ant Design , and Van UI , Elegant Brother believes that an enterprise component library project needs to have the following functions:
- Development of component library : This is the most basic. The component library project must support the development of component library and develop various components in the project;
- Construction of the component library : After the development of the component library is completed, it is impossible for all projects that use the component library to be introduced into each project using source code. Instead, it must be built and packaged and released to a private server or npm. Each project passes Introduced and used in a dependent manner. In this process, it involves the extraction of type definitions, packaging of different modular specifications, etc.;
- Release of component library : It is mentioned above that after the component library is built and packaged, it needs to be released to private servers or npm. So is it frequently released to private servers during the development stage of the component library? There is no problem in doing so. However, Elegant Brother’s suggestion is to start a mini private server locally. When the component library has been developed to a stage (such as a beta version) and can be provided to other projects, it can be released to the company’s private server or npm according to the regular process.
- Writing and publishing of component library documents : MarkDown is usually used to write the operation manual of the component library, the API of each component (the input properties of the props component, the events provided by the events component, the methods exposed by the methods component, and the slots supported by the slots component). ), component usage instructions, Demo display, Demo corresponding code, etc. The Demo in the component library document not only provides users with a reference, but can also be used to debug components. After the document is written, the document construction needs to be packaged and published to the HTTP service for development colleagues to view.
- Component library development tool cli : Every time you create a new component, you need to create a component directory file structure, register the component, add the component document, demo and other operations in the document. The whole process is cumbersome and worthless, and the component library may There will be dozens of components, so it is necessary to develop a cli to quickly create components and standardize the creation of components.
- Development and release of component library example : This is not necessary. Adding this part to the component library is based on two considerations. One is that a demonstration site can be developed to show the implementation effect of the component library in the project; the other is that In my practice, the development of components is usually driven by business development. In the process of developing the example, the components in the component library are gradually improved. When the components are implemented to a certain extent, the example can be extracted into an independent project.
2 Environment preparation
- Node JS and npm versions:
node -v
npm -v
The latest version you are using is greater than or equal to my version. My local version is as follows:
node：8.10.0
npm：7.14.0
- Install or update pnpm :
npm install -g pnpm
Check the version after installation:
pnpm -v
My local pnpm version number is 7.14.2 .
3 Build monorepo project
Monorepo is a single code base, which is a way of organizing a code base, and its counterpart is multirepos . Multirepos usually places different modules (packages) in different code repositories, while monorepo stores multiple packages in one code repository.
Our component library basic engineering project contains many packages: packages for multiple components, packages corresponding to documents, cli packages, and example packages. If they are maintained in different code warehouses, then multiple warehouses need to be corresponding. During the development process, you need to switch between multiple warehouses. In addition, it is troublesome for codes in different repositories to reference each other. Therefore, monorepo is used in the basic component library project to organize multiple packages.
There are many ways to implement monorepo, such as Lerna , Yarn Workspace , pnpm Workspace , etc. Here I choose pnpm . After using pnpm, you will feel its many benefits: speed, disk space, etc.
Regarding the theoretical knowledge of pnpm and monorepo, you can check it online yourself. Brother Yaya will not write those insignificant nonsense to make up the numbers.
3.1 Create project
- Create project root directory
Create a directory as the root directory of the component library project. The directory name uses the name of the component library you defined. I named it yyg-demo-ui . Open this directory with an IDE.
- Initialize package.json
Enter the directory on the command line and use pnpm to initialize package.json :
pnpm init
After executing this command, the package.json file will be automatically generated in the project root directory . Specify the type attribute as module in the package.json file :
{
...
"type": "module",
...
}
- git initialization:
git init
- Create a directory
Create four directories: cli, docs, example, and packages in the project root directory to store the four modules of command line tools, component library documents, example, and component library respectively, and create foo and yyg-demo-ui in the packages directory ( yyg-admin-ui needs to be modified to your component library name) two directories.
mkdir -p cli docs example packages/foo packages/yyg-demo-ui
The directory structure is as follows:
yyg-demo-ui/
|- cli/
|- docs/
|- example/
|- packages/
|- foo/
|- yyg-demo-ui/
3.2 Configure workspace
Four directories were created earlier. You need to tell pnpm which packages there are. pnpm provides a configuration file to configure monorepo .
- Create the configuration file pnpm-workspace.yaml in the project root directory :
packages:
- packages/*
- cli
- docs
- example
# exclude packages that are inside test directories
- '!**/test/**'
The above configuration specifies that cli , docs , and example themselves are packages, and the subdirectories under the packages directory are also packages. At the same time, all test directories are excluded.
- Specify workspace in package.json :
{
...
"workspaces": [
"packages/*",
"cli",
"docs",
"example"
]
}
At this step, the construction of pnpm + monorepo is completed. The project root directory is called workspace-root . The next step will be to initialize workspace-root .
Thank you for reading this article. If this article has given you a little help or inspiration, please support it three times in a row, like, follow, and collect. Programmer Elegant Brother will continue to share more useful information with you.