@darkchest/wck 0.0.11 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +32 -11
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,18 +10,19 @@
|
|
|
10
10
|
|
|
11
11
|
在习惯了现代化数据驱动的开发模式下再次回到操作dom来更新UI的模式(没有了事件, scss, 模板, 数据监听等), 的确让人感到非常不便. 并且因为全局作用域的关系, 我们很容易碰上变量, 样式的冲突导致的预期之外的bug. 更不幸的是由于没有固定的模板结构, 导致我们的代码有更大概率出现面条化的风险.
|
|
12
12
|
|
|
13
|
-
所以, 如果能够以vue2的options格式去写web-component, 在开发阶段借助vue的ide
|
|
13
|
+
所以, 如果能够以vue2的options格式去写web-component, 在开发阶段借助vue的ide插件帮助我们进行代码提示及错误警告. 在应用阶段又以web-component的方式去使用, 将组件内部的逻辑和样式封装在shadowDOM中, 组件只对外暴露出必要的props, methods, 以及一些events, 这就足够应用大部分的需求了. 这不就是应对困境的最好方案了吗?
|
|
14
14
|
|
|
15
15
|
这也是我开发@darkchest/wck的初衷!
|
|
16
16
|
|
|
17
17
|
实际上在这之前我开发过几个版本的解决方案:
|
|
18
|
-
|
|
18
|
+
|
|
19
|
+
1. 通过vue3官方提供的方案构建web-component组件, 最终打包了vue3的代码到组件中导致整个组件体积巨形膨胀(一个小组件体积上涨到90kb+), 并且回头考虑到既然都直接上了vue3, 那么再写web-component的组件好像没什么意义, 此方案废弃.
|
|
19
20
|
|
|
20
|
-
|
|
21
|
+
2. 通过lit来封装web-component组件, 整体来说是很顺利的. 但是在开发过程中, 由于要使用装饰器(不太熟悉ts), 且要自行实现render, 整个开发过程不太舒适并且没有代码提示, 最终打包后体积大约为30kb+, 此方案搁置.
|
|
21
22
|
|
|
22
|
-
|
|
23
|
+
3. 通过官方提供的@vue/compiler-sfc解析vue单文件组件 (SFC), 并将其script部分进行转换标准的web-component组件的逻辑部分(已完成), 但在解析template部分时出现重大问题, 由于template部分解析出来属于vue特有的抽象语法树, 手上又没有详尽的资料又不想去啃源码, 导致template部分无法转换方案被废弃.
|
|
23
24
|
|
|
24
|
-
|
|
25
|
+
4. 最终, 我找到了[petite-vue](https://github.com/vuejs/petite-vue), 根据网络描述, 它是由 Vue.js 团队推出的重量仅约6KB的小型Vue版本，专为网页上的渐进式增强设计。 它保留了Vue的核心模板语法与响应式机制，但特别优化用于在已有的HTML页面上增添少量交互效果. 经过测试它无需经过编译即可直接支持template语法(v-for, v-if, v-model, v-html, @click等), 允许直接在dom上应用template语法且直接生效. 于是, 将方案3中的script转换与petite-vue的模板解析合并, 并抹平与标准web-component的差异后的最终方案终于完成(与标准版vue仍有差距, 但是核心功能已实现, 用于开发web组件应该是足够了), 并且最小体积降至16kb(未进行gzip压缩).
|
|
25
26
|
|
|
26
27
|
祝好!~
|
|
27
28
|
|
|
@@ -37,7 +38,22 @@
|
|
|
37
38
|
- ✅ 支持mounted/onMounted, destroyed/unmounted/onUnmounted生命周期
|
|
38
39
|
|
|
39
40
|
### 关于props大小写问题
|
|
40
|
-
由于vue中定义props是允许大小写字母的.而web
|
|
41
|
+
由于vue中定义props是允许大小写字母的.而web组件的attributes只允许小写字母(包含中划线), 所以当我们在vue组件中定义一个带有大写字母的属性时(例如appTitle), 当使用@darkchest/wck插件将它转成web组件后, 插件会自动在web组件中声明apptitle, app-title两种形式(纯小写形式和小写中划线形式)的属性, 所以当我们在使用组件时, 可以直接在html上设置组件的默认属性值:
|
|
42
|
+
```html
|
|
43
|
+
<todo-list id="demo1" apptitle="*我的清单*"></todo-list>
|
|
44
|
+
<todo-list id="demo2" app-title="*我的清单*"></todo-list>
|
|
45
|
+
<!-- 以上两种写法都可以设置vue组件的appTitle属性默认值 -->
|
|
46
|
+
|
|
47
|
+
<script type="module">
|
|
48
|
+
var todo1 = document.querySelector('#demo1');
|
|
49
|
+
todo1.apptitle="我的清单1";
|
|
50
|
+
// todo1['app-title'] = "我的清单1";
|
|
51
|
+
|
|
52
|
+
var todo2 = document.querySelector('#demo1');
|
|
53
|
+
todo2.apptitle="我的清单2";
|
|
54
|
+
// todo2['app-title'] = "我的清单2";
|
|
55
|
+
</script>
|
|
56
|
+
```
|
|
41
57
|
|
|
42
58
|
### 关于属性, 方法, 事件, 生命周期钩子
|
|
43
59
|
- 在vue组件中props和methods定义的属性和方法, 都会直接通过web组件暴露给页面.
|
|
@@ -52,8 +68,13 @@
|
|
|
52
68
|
|
|
53
69
|
```javascript
|
|
54
70
|
// 创建一个项目文件夹, 例如helloworld, 然后在文件夹中执行npm init -y初始化一下.
|
|
55
|
-
//
|
|
56
|
-
//
|
|
71
|
+
// 然后我们在文件夹中手动创建:
|
|
72
|
+
// - vite.config.js
|
|
73
|
+
// - index.html
|
|
74
|
+
// - src/index.js
|
|
75
|
+
// - src/components/TodoList.vue
|
|
76
|
+
// 以上文件的内容直接复制下面对应的内容即可.
|
|
77
|
+
// (注意package.json不能复制, 而是手动修改scripts命令的部分, 具体请看下面的package.json部分)
|
|
57
78
|
```
|
|
58
79
|
|
|
59
80
|
### 2. 安装依赖(在刚刚创建的helloworld文件夹中执行以下命令安装依赖)
|
|
@@ -803,12 +824,12 @@ footer {
|
|
|
803
824
|
|
|
804
825
|
## 最后的最后
|
|
805
826
|
|
|
806
|
-
要是还看不明白, 直接将源码下载下来后,
|
|
827
|
+
要是还看不明白, 直接将源码下载下来后, 或者安装npm包后, 在node_modules/@drakchest/wck中有个example文件夹, 双击打开index.html即可看到效果.
|
|
807
828
|
|
|
808
|
-
您也可以将example
|
|
829
|
+
您也可以将example文件夹复制到其它地方, 然后执行npm install安装依赖, 最后npm run dev启动开发服务, 并按上面提到的修改index.html里的script部分, 改成直接import 'src/index.js'即可体验效果. 一但正常启动并以localhost打开网页后, 您还可以尝试着修改TodoList.vue代码观察效果.
|
|
809
830
|
|
|
810
831
|
同理, 在开发模式下, 您还可以在src/components中创建更多的组件并在src/index.js中注册, 然后在index.html中直接使用注册后的组件.
|
|
811
832
|
|
|
812
|
-
最后, 如果需要异步注册,
|
|
833
|
+
最后, 如果需要异步注册, 编译组件为独立js文件等功能, 您可能需要自行在vite.config.js中配置多入口, 这不属于本教程的讨论范围. 请自行阅读vite的官方文档.
|
|
813
834
|
|
|
814
835
|
祝您使用愉快.
|