Skip to content

Latest commit

 

History

History
95 lines (75 loc) · 2.08 KB

README.md

File metadata and controls

95 lines (75 loc) · 2.08 KB
Raw

基于 Quarkc 跨端组件开发

您可以基于本工程构建跨技术栈/无框架的组件，满足个性化需求。

中文 | English

调整

在 template-quarkc-component-ts 的基础上做了以下更新：

序号 描述
1 调整 npm run build 为批量构建
2 新增 npm run new 创建组件
3 增加 unocss 原子 CSS 配置
4 替换测试套件为 @web/test-runnner
5 调整单元测试直接导入组件源码

初始化

npm install
npm run dev

1. 生成组件

创建名为 MyComponent 的组件：

$ npm run new
> [email protected] new
> plop
? 请输入组件名称: my-component
✔  ++ /components/MyComponent/index.tsx
✔  ++ /components/MyComponent/index.less
✔  ++ /components/MyComponent/vite-env.d.ts

2. 使用组件

<head>
  <!-- ① 导入组件 -->
  <script type="module" src="./components/MyComponent/index.tsx"></script>
</head>
<body>
  <!-- ② 使用组件 -->
  <my-component text="为跨技术栈而生！"></my-component>
</body>

3. 打包产物

npm run build

打包后的产出为 dist/<组件名称>/index.js 和 dist/<组件名称>/index.umd.js。

.
├── types
|     └── index.d.ts
├── index.js
├── index.umd.js
└── package.json

4. 验证产物

将组件导入路径调整为打包后的产物路径

<head>
  <!-- ① 导入组件 -->
  <script type="module" src="./dist/MyComponent/index.js"></script>
</head>
<body>
  <!-- ② 使用组件 -->
  <my-component text="为跨技术栈而生！"></my-component>
</body>
<head>
  <!-- ① 导入组件 -->
  <script type="module" src="./dist/MyComponent/index.umd.js"></script>
</head>
<body>
  <!-- ② 使用组件 -->
  <my-component text="为跨技术栈而生！"></my-component>
</body>

想了解更多信息，请参考：https://quark-ecosystem.github.io/quarkc-docs/#/zh-CN/docs/publishing