Skip to content

Commit 5875e73

Browse files
xxxsfxxxsf
committed
feat: update
1 parent 23acf79 commit 5875e73

5 files changed

Lines changed: 288 additions & 33 deletions

File tree

‎README.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
## 介绍
2828

29-
Quarkc(Quark core缩写) 是一个拥有完美开发体验的 web components 工具（jsx + web components）。通过它，您可以开发标准的**跨框架组件** 或 **独立前端应用**（脱离框架的原生web应用，性能可达百分百💯）。
29+
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)。
3030

3131
### 特性
3232

@@ -76,7 +76,7 @@ export default class MyElement extends QuarkElement {
7676
}
7777
```
7878

79-
### 3、组件 Build 打包
79+
### 3、Build 打包
8080

8181
打包默认输出为 UMD / ESM 格式
8282

@@ -125,8 +125,7 @@ import "./lib/your-element"
125125
</html>
126126
```
127127

128-
需要使用多个 quarkc 组件，为了共用 quarkc 核心库，您可以开启了 `external`
129-
128+
多个 quarkc 组件同时加载，为了共用 quarkc 核心库，您可以选择开启了 `external`：
130129
```diff
131130
// vite.config.build.ts
132131
export default defineConfig({

‎packages/core/README.md‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626

2727
## 介绍
2828

29-
Quarkc(Quark core缩写) 是一个拥有完美开发体验的 web components 工具（jsx + web components）。通过它，您可以开发标准的**跨框架组件** 或 **独立前端应用**（脱离框架的原生web应用，性能可达百分百💯）。
29+
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)。
3030

3131
### 特性
3232

@@ -76,7 +76,7 @@ export default class MyElement extends QuarkElement {
7676
}
7777
```
7878

79-
### 3、组件 Build 打包
79+
### 3、Build 打包
8080

8181
打包默认输出为 UMD / ESM 格式
8282

@@ -125,8 +125,7 @@ import "./lib/your-element"
125125
</html>
126126
```
127127

128-
需要使用多个 quarkc 组件，为了共用 quarkc 核心库，您可以开启了 `external`
129-
128+
多个 quarkc 组件同时加载，为了共用 quarkc 核心库，您可以选择开启了 `external`：
130129
```diff
131130
// vite.config.build.ts
132131
export default defineConfig({

‎packages/create-quarkc/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "create-quarkc",
3-
"version": "1.3.8",
3+
"version": "1.4.0",
44
"type": "module",
55
"license": "MIT",
66
"author": "xsf0105",

‎packages/create-quarkc/template-quarkc-component-ts/README.md‎

Lines changed: 140 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,173 @@
22

33
基于本工程，您可以构建属于自己的跨技术栈/无框架 组件。
44

5+
## 如何使用
56

6-
可以用下面命令生成本工程模版！
7+
```
8+
npm install
9+
npm run dev
10+
```
11+
12+
入口文件为 `src/index.tsx`，这里使用 `vite` 进行开发和生产打包。
13+
14+
## 打包产物
715

8-
```bash
9-
npm create quarkc@latest
16+
```
17+
npm run build
1018
```
1119

12-
文档见：https://quark-ecosystem.github.io/quarkc-docs/#/
20+
打包后的产出为： `lib/index.js`和`lib/index.umd.cjs`。
1321

1422

23+
## 使用产物
1524

16-
## 如何使用
25+
### 1、创建组件构建模版工程
1726

27+
创建模版
28+
```bash
29+
npm create quarkc@latest
1830
```
31+
32+
启动工程
33+
```bash
1934
npm install
20-
npm run dev
35+
npm start
2136
```
2237

23-
入口文件为 `src/index.tsx`，这里使用 `vite` 进行开发和生产打包。
38+
### 2、自定义你的 Custom Elements（组件/元素）
39+
```jsx
40+
import { QuarkElement, property, customElement } from "quarkc"
41+
import style from "./index.less?inline"
42+
43+
@customElement({ tag: "my-element", style }) // 自定义标签/组件、CSS
44+
export default class MyElement extends QuarkElement {
45+
@property() // 外部属性
46+
count
47+
48+
add = () => {
49+
this.count += 1
50+
}
51+
52+
render() {
53+
return (
54+
<button onClick={this.add}>count is: { this.count }</button>
55+
)
56+
}
57+
}
58+
```
2459

25-
## 打包产物
60+
### 3、Build 打包
2661

27-
```
62+
打包默认输出为 UMD / ESM 格式
63+
64+
```bash
2865
npm run build
2966
```
3067

31-
打包后的产出为： `lib/index.js`和`lib/index.umd.cjs`。
68+
此时，构建产物 `lib/` 下的资源可以直接被任何框架的前端项目中使用。
3269

3370
```tree
34-
.
71+
./lib
3572
├── types
3673
| └── install.d.ts
3774
├── index.js
3875
└── index.umd.js
3976
```
4077

41-
## 使用产物
78+
### 4、使用
4279

43-
无论是`Vue`，`React`，`Angular`还是`Jq`项目，该组件都可以被使用。
80+
##### （1）含有工程管理的前端项目（含有package.json/node_modules等文件）
81+
```jsx
82+
import "./lib/index.js"
4483

45-
```js
46-
import "my-component/lib";
4784

48-
<my-component count="0" />;
85+
<my-element count="count" />
86+
87+
// vue
88+
// <my-element :count="count" />
89+
90+
// react
91+
// <my-element count={count} />
92+
93+
// svelte
94+
// <my-element {count} />
95+
96+
// angular
97+
// <my-element [count]="count" />
98+
```
99+
100+
##### （2）无工程管理的前端项目（不含有package.json/node_modules等文件，纯HTML+CSS+JS文件）
101+
102+
单个 quarkc 组件，可以直接使用：
103+
104+
```html
105+
<!DOCTYPE html>
106+
<html lang="en">
107+
<head>
108+
<!-- 引用 npm run build 产物 -->
109+
<script type="module" src="./lib/index.mjs"></script>
110+
</head>
111+
<body>
112+
<my-element></my-element>
113+
</body>
114+
</html>
49115
```
50116

51-
详细文档，请访问：https://quarkc.hellobike.com/#/zh-CN/docs/publishing
117+
多个 quarkc 组件同时加载，为了共用 quarkc 核心库，您可以选择开启了 `external`：
118+
```diff
119+
// vite.config.build.ts
120+
export default defineConfig({
121+
build: {
122+
rollupOptions: {
123+
+ external: ['quarkc'],
124+
},
125+
},
126+
});
127+
128+
```
129+
然后，用下面方式单独加载 `quarkc` 核心库：
130+
```html
131+
<!DOCTYPE html>
132+
<html lang="en">
133+
<head>
134+
<script type="importmap">
135+
{
136+
"imports": {
137+
"quarkc": "https://unpkg.com/quarkc@latest/lib/index.browser.js"
138+
}
139+
}
140+
</script>
141+
<!-- 引用 npm run build 产物 -->
142+
<!-- quarkc 构建的组件1 -->
143+
<script type="module" src="my-element1/lib/index.mjs"></script>
144+
<!-- quarkc 构建的组件2 -->
145+
<script type="module" src="my-element2/lib/index.mjs"></script>
146+
</head>
147+
<body>
148+
<!-- 使用 quarkc 元素/组件 -->
149+
<my-element1></my-element1>
150+
<my-element2></my-element2>
151+
</body>
152+
</html>
153+
```
154+
155+
156+
## 文档
157+
158+
完整文档，请访问 [https://quark-ecosystem.github.io/quarkc-docs](https://quark-ecosystem.github.io/quarkc-docs)
159+
160+
### 联系我们
161+
162+
添加微信：Sanqi9675
163+
164+
### 社区示例
165+
166+
| 作者 | github 地址 | 截图 / 链接
167+
| ---- | ---- | ----- |
168+
| @xsf0105 | https://github.com/xsf0105/dark-light-element | https://unpkg.com/dark-light-element@latest/demo.html |
169+
| @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/#/ |
170+
| @yuhaiyang1 | https://github.com/yuhaiyang1/quarkc-time | https://unpkg.com/quark-timer@0.0.2/demo.html |
171+
| @dyf19118 | https://github.com/dyf19118/quark-ui-rate | ![image](https://github.com/hellof2e/quark-cli/assets/14307551/e11e6c49-4c18-4bca-adc3-01a7198ab2e2) |
172+
| @hellof2e | https://github.com/hellof2e/quark-doc-home | ![1686575964690](https://github.com/hellof2e/quark-core/assets/14307551/9618427c-916b-4dfd-b28b-0e8e0f6ce744) |
173+
| @zhangfisher | https://github.com/zhangfisher/lite-tree/tree/master/packages/quark | [点击查看](https://github.com/zhangfisher/lite-tree/blob/master/docs/tree.png?raw=true) |
174+

0 commit comments

Comments
 (0)