Awesome
<div align='center' ><h2>Component library template</h2></div> <div align='left' > Component library template developed based on <code>Vue3</code>, <code>VitePress</code>, <code>Rollup</code>, <code>Gulp</code> and other mainstream technologies<br/> Built-in packaging components, Hooks, Utils, which can be introduced on demand, support TypeScript, and enable all attention to focus on document writing and component development.<br/> Built-in VitePress theme eliminates the trouble of writing style, with its own night mode, and can customize the theme. </div> <br/> <p align='center'> <b>English</b> | <a href="https://github.com/jsxiaosi/xs-components-lib/blob/main/README.zh-CN.md">简体中文</a> </p>Docs
https://xs-com-lib.netlify.app
Features
- 🚀 Latest technology stack<br/> It is developed using front-end cutting-edge technologies such as Vue3/Rollup/Gulp
- 📦 Out of the box<br/> Built-in packaging can be introduced on demand, and TypeScript is supported, so that all attention can be focused on document writing and component development.
- 🔗 Support CDN introduction<br/> Support the packaging and output of compact CDN modules, and simultaneously support UnPkg and JsDelivr CDN introduction methods.
- ⚡️ VitePress<br/> Vue official document theme, free of the trouble of writing style, with its own night mode, customizable theme.
- 💻 One-click template generation command<br/> Say goodbye to the trouble of manually creating development templates by machine, and generate development templates quickly and easily with one command.
- 🚧 Specification inspection<br/> Built-in Eslint, Prettier and CommitLint tools can better unify your code style and submit inspection specifications.
Prepare
- Node and Git - project development environment
- Vite - Familiar with Vite features
- Vue3 - Familiar with Vue basic syntax
- Es6+ - familiar with Es6 basic syntax
- VitePress - familiar with the basic use of VitePress
Installation and use
- Get project code (Https or SSH)
git clone https://github.com/jsxiaosi/xs-components-lib.git
git clone git@github.com:jsxiaosi/xs-components-lib.git
Alternatively, you can use the xs-clito quickly create one
npx @jsxiaosi/xs-cli create [project-name]
- Installation Dependencies
pnpm install
Developer
- Run built-in template debugging component
npm run dev
- Run the VitePress document
npm run docs:dev
- Create component template
npm run ct 'Component name'
Production
- Package Component Library
npm run build
- Packaging a VitePress document
npm run docs:build
Git Contribution submission specification
-
Refer to Vue specification
featNew FeaturesfixRepair defectsdocsDocument changestyleCode formatrefactorCode refactoringperfPerformance optimizationtestAdd neglected tests or changes to existing testsbuildBuild processes, external dependency changes (such as upgrading npm packages, modifying packaging configurations, etc.)ciModify CI configuration and scriptsrevertRoll back the commitchoreChanges to the build process or tools and libraries (do not affect source files)wipUnder developmenttypesType definition file modification
-
Or submit with instructions
npm run cz
Specification related
- EsLint - Js syntax detection
- StyleLint - Style syntax detection
- CommitLint - Git commit commit specification detection
Catalogue
.
├── LICENSE
├── README.md
├── build
├── commitlint.config.js
├── docs # Vitepress document directory
├── effect # Commissioning template
├── lib
├── node_modules
├── package-lock.json
├── package.json
├── packages # Common component directory
│ ├── components # Component storage directory
│ ├── hooks # Hooks storage directory
│ ├── theme-default # Component style storage directory
│ ├── utils # Public method storage directory
├── postcss.config.js
├── prettier.config.js
├── script
├── stylelint.config.js
├── tsconfig.json
└── typings