From 5875e735fbb977745b063629048b4445ad094fc5 Mon Sep 17 00:00:00 2001 From: xsf0105 Date: Tue, 20 Aug 2024 19:35:14 +0800 Subject: [PATCH] feat: update --- README.md | 7 +- packages/core/README.md | 7 +- packages/create-quarkc/package.json | 2 +- .../template-quarkc-component-ts/README.md | 157 ++++++++++++++++-- .../template-quarkc-component/README.md | 148 ++++++++++++++++- 5 files changed, 288 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 65c24be..4c13e7f 100644 --- a/README.md +++ b/README.md @@ -26,7 +26,7 @@ ## 介绍 -Quarkc(Quark core缩写) 是一个拥有完美开发体验的 web components 工具（jsx + web components）。通过它，您可以开发标准的**跨框架组件** 或 **独立前端应用**（脱离框架的原生web应用，性能可达百分百💯）。 +Quarkc(Quark core缩写) 是一个拥有完美开发体验的 web components 工具（jsx + web components）。通过它，您可以开发 [跨框架组件](https://github.com/hellof2e/quark-core/tree/main/packages/create-quarkc/template-quarkc-component-ts) 或 [独立页面](https://github.com/hellof2e/quark-core/tree/main/packages/create-quarkc/template-quarkc-app-ts)。 ### 特性 @@ -76,7 +76,7 @@ export default class MyElement extends QuarkElement { } ``` -### 3、组件 Build 打包 +### 3、Build 打包 打包默认输出为 UMD / ESM 格式 @@ -125,8 +125,7 @@ import "./lib/your-element" ``` -需要使用多个 quarkc 组件，为了共用 quarkc 核心库，您可以开启了 `external` - +多个 quarkc 组件同时加载，为了共用 quarkc 核心库，您可以选择开启了 `external`： ```diff // vite.config.build.ts export default defineConfig({ diff --git a/packages/core/README.md b/packages/core/README.md index 65c24be..4c13e7f 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -26,7 +26,7 @@ ## 介绍 -Quarkc(Quark core缩写) 是一个拥有完美开发体验的 web components 工具（jsx + web components）。通过它，您可以开发标准的**跨框架组件** 或 **独立前端应用**（脱离框架的原生web应用，性能可达百分百💯）。 +Quarkc(Quark core缩写) 是一个拥有完美开发体验的 web components 工具（jsx + web components）。通过它，您可以开发 [跨框架组件](https://github.com/hellof2e/quark-core/tree/main/packages/create-quarkc/template-quarkc-component-ts) 或 [独立页面](https://github.com/hellof2e/quark-core/tree/main/packages/create-quarkc/template-quarkc-app-ts)。 ### 特性 @@ -76,7 +76,7 @@ export default class MyElement extends QuarkElement { } ``` -### 3、组件 Build 打包 +### 3、Build 打包 打包默认输出为 UMD / ESM 格式 @@ -125,8 +125,7 @@ import "./lib/your-element" ``` -需要使用多个 quarkc 组件，为了共用 quarkc 核心库，您可以开启了 `external` - +多个 quarkc 组件同时加载，为了共用 quarkc 核心库，您可以选择开启了 `external`： ```diff // vite.config.build.ts export default defineConfig({ diff --git a/packages/create-quarkc/package.json b/packages/create-quarkc/package.json index 140301a..230bec1 100644 --- a/packages/create-quarkc/package.json +++ b/packages/create-quarkc/package.json @@ -1,6 +1,6 @@ { "name": "create-quarkc", - "version": "1.3.8", + "version": "1.4.0", "type": "module", "license": "MIT", "author": "xsf0105", diff --git a/packages/create-quarkc/template-quarkc-component-ts/README.md b/packages/create-quarkc/template-quarkc-component-ts/README.md index c0ca39a..70a50c7 100644 --- a/packages/create-quarkc/template-quarkc-component-ts/README.md +++ b/packages/create-quarkc/template-quarkc-component-ts/README.md @@ -2,50 +2,173 @@ 基于本工程，您可以构建属于自己的跨技术栈/无框架 组件。 +## 如何使用 -可以用下面命令生成本工程模版！ +``` +npm install +npm run dev +``` + +入口文件为 `src/index.tsx`，这里使用 `vite` 进行开发和生产打包。 + +## 打包产物 -```bash -npm create quarkc@latest +``` +npm run build ``` -文档见：https://quark-ecosystem.github.io/quarkc-docs/#/ +打包后的产出为： `lib/index.js`和`lib/index.umd.cjs`。 +## 使用产物 -## 如何使用 +### 1、创建组件构建模版工程 +创建模版 +```bash +npm create quarkc@latest ``` + +启动工程 +```bash npm install -npm run dev +npm start ``` -入口文件为 `src/index.tsx`，这里使用 `vite` 进行开发和生产打包。 +### 2、自定义你的 Custom Elements（组件/元素） +```jsx +import { QuarkElement, property, customElement } from "quarkc" +import style from "./index.less?inline" + +@customElement({ tag: "my-element", style }) // 自定义标签/组件、CSS +export default class MyElement extends QuarkElement { + @property() // 外部属性 + count + + add = () => { + this.count += 1 + } + + render() { + return ( + + ) + } +} +``` -## 打包产物 +### 3、Build 打包 -``` +打包默认输出为 UMD / ESM 格式 + +```bash npm run build ``` -打包后的产出为： `lib/index.js`和`lib/index.umd.cjs`。 +此时，构建产物 `lib/` 下的资源可以直接被任何框架的前端项目中使用。 ```tree -. +./lib ├── types | └── install.d.ts ├── index.js └── index.umd.js ``` -## 使用产物 +### 4、使用 -无论是`Vue`，`React`，`Angular`还是`Jq`项目，该组件都可以被使用。 +##### （1）含有工程管理的前端项目（含有package.json/node_modules等文件） +```jsx +import "./lib/index.js" -```js -import "my-component/lib"; -; + + +// vue +// + +// react +// + +// svelte +// + +// angular +// +``` + +##### （2）无工程管理的前端项目（不含有package.json/node_modules等文件，纯HTML+CSS+JS文件） + +单个 quarkc 组件，可以直接使用： + +```html + + + + + + + + + + ``` -详细文档，请访问：https://quarkc.hellobike.com/#/zh-CN/docs/publishing +多个 quarkc 组件同时加载，为了共用 quarkc 核心库，您可以选择开启了 `external`： +```diff +// vite.config.build.ts +export default defineConfig({ + build: { + rollupOptions: { ++ external: ['quarkc'], + }, + }, +}); + +``` +然后，用下面方式单独加载 `quarkc` 核心库： +```html + + + + + + + + + + + + + + + + +``` + + +## 文档 + +完整文档，请访问 [https://quark-ecosystem.github.io/quarkc-docs](https://quark-ecosystem.github.io/quarkc-docs) + +### 联系我们 + +添加微信：Sanqi9675 + +### 社区示例 + +| 作者 | github 地址 | 截图 / 链接 +| ---- | ---- | ----- | +| @xsf0105 | https://github.com/xsf0105/dark-light-element | https://unpkg.com/dark-light-element@latest/demo.html | +| @hellof2e | https://github.com/hellof2e/quark-doc-header | ![1685501041275](https://github.com/hellof2e/quark-core/assets/14307551/24dd5626-e6a9-452c-9c95-c2cdb8891573) https://quarkc.hellobike.com/#/ | +| @yuhaiyang1 | https://github.com/yuhaiyang1/quarkc-time | https://unpkg.com/quark-timer@0.0.2/demo.html | +| @dyf19118 | https://github.com/dyf19118/quark-ui-rate | ![image](https://github.com/hellof2e/quark-cli/assets/14307551/e11e6c49-4c18-4bca-adc3-01a7198ab2e2) | +| @hellof2e | https://github.com/hellof2e/quark-doc-home | ![1686575964690](https://github.com/hellof2e/quark-core/assets/14307551/9618427c-916b-4dfd-b28b-0e8e0f6ce744) | +| @zhangfisher | https://github.com/zhangfisher/lite-tree/tree/master/packages/quark | [点击查看](https://github.com/zhangfisher/lite-tree/blob/master/docs/tree.png?raw=true) | + diff --git a/packages/create-quarkc/template-quarkc-component/README.md b/packages/create-quarkc/template-quarkc-component/README.md index be0062a..70a50c7 100644 --- a/packages/create-quarkc/template-quarkc-component/README.md +++ b/packages/create-quarkc/template-quarkc-component/README.md @@ -19,22 +19,156 @@ npm run build 打包后的产出为： `lib/index.js`和`lib/index.umd.cjs`。 + +## 使用产物 + +### 1、创建组件构建模版工程 + +创建模版 +```bash +npm create quarkc@latest +``` + +启动工程 +```bash +npm install +npm start +``` + +### 2、自定义你的 Custom Elements（组件/元素） +```jsx +import { QuarkElement, property, customElement } from "quarkc" +import style from "./index.less?inline" + +@customElement({ tag: "my-element", style }) // 自定义标签/组件、CSS +export default class MyElement extends QuarkElement { + @property() // 外部属性 + count + + add = () => { + this.count += 1 + } + + render() { + return ( + + ) + } +} +``` + +### 3、Build 打包 + +打包默认输出为 UMD / ESM 格式 + +```bash +npm run build +``` + +此时，构建产物 `lib/` 下的资源可以直接被任何框架的前端项目中使用。 + ```tree -. +./lib ├── types | └── install.d.ts ├── index.js └── index.umd.js ``` -## 使用产物 +### 4、使用 + +##### （1）含有工程管理的前端项目（含有package.json/node_modules等文件） +```jsx +import "./lib/index.js" + + + + +// vue +// + +// react +// + +// svelte +// + +// angular +// +``` + +##### （2）无工程管理的前端项目（不含有package.json/node_modules等文件，纯HTML+CSS+JS文件） -无论是`Vue`，`React`，`Angular`还是`Jq`项目，该组件都可以被使用。 +单个 quarkc 组件，可以直接使用： -```js -import "my-component/lib"; +```html + + + + + + + + + + +``` + +多个 quarkc 组件同时加载，为了共用 quarkc 核心库，您可以选择开启了 `external`： +```diff +// vite.config.build.ts +export default defineConfig({ + build: { + rollupOptions: { ++ external: ['quarkc'], + }, + }, +}); -; ``` +然后，用下面方式单独加载 `quarkc` 核心库： +```html + + + + + + + + + + + + + + + + +``` + + +## 文档 + +完整文档，请访问 [https://quark-ecosystem.github.io/quarkc-docs](https://quark-ecosystem.github.io/quarkc-docs) + +### 联系我们 + +添加微信：Sanqi9675 + +### 社区示例 + +| 作者 | github 地址 | 截图 / 链接 +| ---- | ---- | ----- | +| @xsf0105 | https://github.com/xsf0105/dark-light-element | https://unpkg.com/dark-light-element@latest/demo.html | +| @hellof2e | https://github.com/hellof2e/quark-doc-header | ![1685501041275](https://github.com/hellof2e/quark-core/assets/14307551/24dd5626-e6a9-452c-9c95-c2cdb8891573) https://quarkc.hellobike.com/#/ | +| @yuhaiyang1 | https://github.com/yuhaiyang1/quarkc-time | https://unpkg.com/quark-timer@0.0.2/demo.html | +| @dyf19118 | https://github.com/dyf19118/quark-ui-rate | ![image](https://github.com/hellof2e/quark-cli/assets/14307551/e11e6c49-4c18-4bca-adc3-01a7198ab2e2) | +| @hellof2e | https://github.com/hellof2e/quark-doc-home | ![1686575964690](https://github.com/hellof2e/quark-core/assets/14307551/9618427c-916b-4dfd-b28b-0e8e0f6ce744) | +| @zhangfisher | https://github.com/zhangfisher/lite-tree/tree/master/packages/quark | [点击查看](https://github.com/zhangfisher/lite-tree/blob/master/docs/tree.png?raw=true) | -详细文档，请访问：https://quarkc.hellobike.com/#/zh-CN/docs/publishing