1 What is yyg-cli
yyg-cli is a scaffolding developed by Yaya Ge to quickly create vue3 projects. It has been released on npm for two months. It underwent a major upgrade on November 1st and released version 1.1.0 : it supports the creation of vue3 family bucket projects and vue3 component library projects. details as follows:
vue3 family bucket project
The vue3 family bucket project created using yyg-cli is based on the open source project vue3-vite-archetype written by Yaya Ge . It integrates the following libraries by default:
- vite3、vue3
- typescript、tsx
- vue router
- pinia
- scss
- element plus
- nprogress
- svg
Also supports:
- 多环境的支持
- 封装 Element Plus 图标组件并全局引入，支持 Element UI 中的图标的使用方式
- 使用 pinia-plugin-persistedstate 实现 pinia 状态持久化，浏览器刷新时数据不丢失
- 使用 eslint-standard 规范进行代码检查
- 使用 git hooks 规范代码提交
vue3 component library project
The vue3 component library project created using yyg-cli is based on the open source project vue3-component-library-archetype written by Yaya Ge . This project has been described in the previous article. Simply put, the following functions are supported:
- pnpm + monorepo
- 组件库的开发环境和打包构建，打包时自动提取类型；
- 组件库文档的开发环境和打包构建，支持一份 demo 的代码实现 demo 展示和代码展示；
- example 的开发环境和打包构建；
- 提供 cli，通过 script 一个命令自动创建新组件并自动完成相关配置。
- 本地启动私服、测试本地发布组件库
2 Why use yyg-cli
Use yyg-cli for one reason: saving time, effort and brain .
If you use Vite to create a vue3 family bucket project, you need to manually integrate tsx , routing, state management, etc., which is a repetitive manual work with little value. Creating a vue3 project through yyg-cli greatly simplifies the integration of various libraries. Regarding how the vue3-vite-archetype used in the underlying creation is created step by step from project creation to completion, Brother Yaya has described it in detail in his previous article. If you are unwilling to use yyg-cli , you can follow the step-by-step operation in the previous article. .
Create a vue3 Family Bucket project based on vite
vue3 vite2 encapsulates SVG icon components - Create a vue3 Family Bucket project based on vite (continuation)
Vue3 Vite3 multi-environment configuration - Create a vue3 Family Bucket project based on vite (continuation)
Vue3 Vite3 pinia Basic usage, persistence, routing Use in guard - Create vue3 family bucket project based on vite (continuation)
Yuanchuang essay submission | Share a practical vite + vue3 component library scaffolding tool to improve development efficiency
If you use vite to create a vue3 component library project, it will involve all kinds of tedious dependencies and configurations. The underlying scaffolding vue3-component-library-archetype took Elegant Brother back and forth for seven or eight nights to complete. I will share the article with you later. Starting from creating a project until implementing the entire component library scaffolding. Then why not use vue3-component-library-archetype directly for secondary development? If you use this project directly, you need to modify the name of the component library and other information. I accidentally missed the modification, and there are many places to modify, about 20 files. Using yyg-cli , during the project creation process, relevant places will be directly modified based on the input project name, author and other information, so that it can be used out of the box .
3 How to use yyg-cli
3.1 Install pnpm
Monorepo is a mainstream trend, and many open source projects use the monorepo method. Lerna is an excellent library that supports monorepo, but it has been out of maintenance for a while. Most enterprises use pnpm . pnpm is not only a package management tool, but also supports monorepo . In addition, it has many advantages, such as fast speed and saving disk space. So Brother Yaya also switched from yarn to pnpm .
Install pnpm globally
npm install -g pnpm
3.2 Install yyg-cli
Install yyg-cli globally using pnpm or yarn :
pnpm install yyg-cli -g
或
yarn global add yyg-cli
After the installation is complete, check the version number:
yyg --version
The latest version is 1.1.0
3.3 Create vue3 family bucket project
Enter yyg create project name in the console , such as:
yyg create ops-admin
After pressing Enter, the console prompts you to select the project type. Select the vue3 family bucket project and press Enter.
Enter the project description, version number, author, and local development port number in sequence, and wait for the project to be created.
After the project is successfully created, you will be prompted whether to install the dependencies immediately. If you need to install the dependencies directly, just press Enter, select the package management tool, and then start the dependency installation. If the following prompt appears, the dependency installation is successful. You can use the IDE to open the project and run the project pnpm run dev:dev .
The automatically created vue3 family bucket structure is relatively simple and will not be described here.
3.4 Create vue3 component library project
Enter yyg create component library name in the console , such as:
yyg create ops-ui
After pressing Enter, the console prompts you to select the project type, select the vue3 component library project , press Enter, and fill in the prefix of the component name in the component library (for example, the component prefix of element plus is el, the component prefix of ant design is a, enter yyg here , it means that all component prefixes are yyg), Chinese description of the component library, author, and then wait for the component library to be created. As shown below:
After the component library is successfully created, you will still be prompted whether to install the dependencies. Press Enter and directly use pnpm to install the dependencies (since the component library scaffolding uses pnpm monorepo, you will no longer be prompted to select the package management tool. This is also the global installation at the beginning of this section. pnpm reasons).
After the component library is successfully created, open it with an IDE. The key directory structure and file descriptions are as follows:
1) example module
For ordinary vue3 projects, business functions can be developed in this directory. During the development of business functions, if there are new public components, they can be easily developed in the component library. After the component library is stable, example can be extracted as an independent project. (Development of business-driven component library)
2) packages directory
Stores a component library, which includes multiple modules. When the project is first created successfully, there are three directories in it:
- scss directory
This directory stores style-related files. The style of the component library refers to the ITCSS + ACSS architecture model, which is simplified based on this model. The base directory stores some reset styles and variables; the tools directory corresponds to some style tool functions, such as BEM, etc.; the components directory stores the styles of components, and each component corresponds to a scss file in this directory. When using cli to automatically create a component, the scss file of the corresponding component will be generated in this directory. acss stores atomic CSS.
- foo module
This directory holds a sample component. When a new component is automatically created later through the cli, the same directory file structure as foo will be automatically generated . foo/index.ts is the entry file of the component; the foo/src/ directory stores the component's source code and props and other type definitions.
- ops-ui module
This module is automatically generated and is the same as the component library name/project name entered when creating the project. It is an aggregation project of the component library, in which all component libraries are introduced. It is also the entry point when packaging the component library. When you create a new group component using the cli, the newly created component is automatically introduced in the module.
3) docs module
Documentation for the component library, developed using vitepress 1.0 . The .vitepress directory stores the general configuration and theme configuration of vitepress . The component library packages/ops-ui is automatically introduced in .vitepress/theme/index.ts . Index.md is the home page. You can modify the configuration in index.md and make corresponding modifications according to your own specific information, such as the name of the component library, LOGO, functional features, etc.
The components directory stores the description page of each component, and can display the demo and demo source code in it. The demos directory stores the demos introduced in the component description page. When using cli to create a new component, the demo code of the component will be automatically generated in the demos directory, and the md description document page of the corresponding component will be generated in the components directory, and the generated demo will be introduced in md.
4) cli module
This module is an auxiliary tool that helps us quickly create a component module and complete the configuration of packages/component library modules , docs, etc.
The scripts of all the above modules are aggregated in package.json in the root directory , and can be operated from the root directory during use. Regarding the scripts and development, packaging, publishing and other operations inside, the previous article "vue3-component-library-archetype" has been described in detail, so I will not go into details here.
If you have any issues, please leave a message for discussion.
The following articles will enter the practical use of vue3 enterprise-level elegance , starting from project creation, packaging component library scaffolding, cli, to JSON Schema component packaging, permission management system development, and finally micro front-end upgrade.
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.