Component library template

Component library template developed based on Vue3, VitePress, Rollup, Gulp and other mainstream technologies
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.
Built-in VitePress theme eliminates the trouble of writing style, with its own night mode, and can customize the theme.

English | 简体中文

Docs

https://xs-com-lib.netlify.app

Features

• 🚀 Latest technology stack
  It is developed using front-end cutting-edge technologies such as Vue3/Rollup/Gulp
• 📦 Out of the box
  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
  Support the packaging and output of compact CDN modules, and simultaneously support UnPkg and JsDelivr CDN introduction methods.
• ⚡️ VitePress
  Vue official document theme, free of the trouble of writing style, with its own night mode, customizable theme.
• 💻 One-click template generation command
  Say goodbye to the trouble of manually creating development templates by machine, and generate development templates quickly and easily with one command.
• 🚧 Specification inspection
  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

  • feat New Features
  • fix Repair defects
  • docs Document change
  • style Code format
  • refactor Code refactoring
  • perf Performance optimization
  • test Add neglected tests or changes to existing tests
  • build Build processes, external dependency changes (such as upgrading npm packages, modifying packaging configurations, etc.)
  • ci Modify CI configuration and scripts
  • revert Roll back the commit
  • chore Changes to the build process or tools and libraries (do not affect source files)
  • wip Under development
  • types Type 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

Thanks for the help of the following excellent projects

• Element-Plus
• Naive-UI

maintainers

@jsxiaosi

License

MIT © 2022