https://github.com/ospoon/web-component-development
基于 Quarkc 跨端组件开发（批量构建模式）
https://github.com/ospoon/web-component-development
Last synced: 12 months ago
JSON representation
基于 Quarkc 跨端组件开发（批量构建模式）
- Host: GitHub
- URL: https://github.com/ospoon/web-component-development
- Owner: OSpoon
- License: mit
- Created: 2023-07-17T10:13:25.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2025-04-24T07:31:20.000Z (about 1 year ago)
- Last Synced: 2025-04-24T08:34:50.388Z (about 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 1.46 MB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 7
-
Metadata Files:
- Readme: README.es-US.md
- License: LICENSE
Awesome Lists containing this project
README
# Developing Cross-Platform Components Based on Quarkc
With this project, you can create a series of cross-technology stack/frameworkless components of your own.
[中文](./README.md) | English
## Changes
Changes made to `template-quarkc-component-ts` include:
| Number | Description |
| ------ | ---------------------------- |
| 1 | Adjusted `npm run build` to batch build |
| 2 | Added `npm run new` to create components |
| 3 | [Add `unocss` atomic CSS configuration.](https://github.com/OSpoon/web-component-development/tree/unocss/README.md) |
| 4 | Replace the test suite with `@web/test-runnner` |
| 5 | Tuning unit tests directly import component source code |
## Initialization
```
npm install
npm run dev
```
## 1. Generating Components
Generate a component named MyComponent
```
$ npm run new
> web-component-development@0.0.1 new
> plop
? component name please : my-component
✔ ++ /components/MyComponent/index.tsx
✔ ++ /components/MyComponent/index.less
✔ ++ /components/MyComponent/vite-env.d.ts
```
## 2. Using Components
```html
```
## 3. Packaging
```
npm run build
```
The output after packaging is: `dist//index.js` and `dist//index.umd.js`.
```tree
.
├── types
| └── index.d.ts
├── index.js
├── index.umd.js
└── package.json
```
## 4. Verifying Output
Adjust the component path to the packaged output path
```html
```
```html
```
For detailed documentation, please visit: https://quark-ecosystem.github.io/quarkc-docs/#/en-US/docs/publishing