setupin 3.1.2 → 3.3.0-beta.1
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 +9 -7
- package/README.zh-CN.md +9 -7
- package/dist/main.js +518 -448
- package/dist/main.prod.js +117 -121
- package/package.json +10 -12
package/README.md
CHANGED
|
@@ -12,14 +12,15 @@
|
|
|
12
12
|
|
|
13
13
|
## 😏 What is a setupin?
|
|
14
14
|
|
|
15
|
-
**setupin** allows you to
|
|
15
|
+
**setupin** allows you to use [Vue SFC](https://vuejs.org/api/sfc-spec) syntax in HTML.
|
|
16
16
|
|
|
17
|
-
Using the [
|
|
17
|
+
Using the [sfc2esm](../../../sfc2esm), which compiled at runtime for esm vue code format, and dynamic execution.
|
|
18
18
|
|
|
19
19
|
## 🤯 Code comparison
|
|
20
20
|
|
|
21
21
|
<h4 align=center>esm.html</h4>
|
|
22
|
-
|
|
22
|
+
|
|
23
|
+
vue **esm** is complicated to write
|
|
23
24
|
|
|
24
25
|
```html
|
|
25
26
|
<!DOCTYPE html>
|
|
@@ -54,7 +55,8 @@ It's a little more complicated
|
|
|
54
55
|
```
|
|
55
56
|
|
|
56
57
|
<h4 align=center>setup.vue</h4>
|
|
57
|
-
|
|
58
|
+
|
|
59
|
+
vue **sfc** needs to be compiled
|
|
58
60
|
|
|
59
61
|
```html
|
|
60
62
|
<script setup>
|
|
@@ -74,7 +76,8 @@ Cannot run directly in the browser
|
|
|
74
76
|
```
|
|
75
77
|
|
|
76
78
|
<h4 align=center>setupin.html</h4>
|
|
77
|
-
|
|
79
|
+
|
|
80
|
+
**setupin** brings it all together
|
|
78
81
|
|
|
79
82
|
```html
|
|
80
83
|
<head>
|
|
@@ -100,14 +103,13 @@ unit as one
|
|
|
100
103
|
</style>
|
|
101
104
|
```
|
|
102
105
|
|
|
103
|
-
It's exactly the same as
|
|
106
|
+
It's exactly the same as Vue SFC except for the \<head>
|
|
104
107
|
|
|
105
108
|
## 🤓 Characteristics
|
|
106
109
|
|
|
107
110
|
- [x] [top-level await](https://vuejs.org/api/sfc-script-setup.html#top-level-await)
|
|
108
111
|
- [x] [sfc css features](https://vuejs.org/api/sfc-css-features.html)
|
|
109
112
|
- [x] [Options API](https://vuejs.org/guide/introduction.html#options-api)
|
|
110
|
-
- [ ] Split [component](https://vuejs.org/guide/essentials/component-basics.html)
|
|
111
113
|
|
|
112
114
|
## 🤔 Why setupin
|
|
113
115
|
|
package/README.zh-CN.md
CHANGED
|
@@ -12,14 +12,15 @@
|
|
|
12
12
|
|
|
13
13
|
## 😏 setupin 是什么？
|
|
14
14
|
|
|
15
|
-
**setupin** 允许你在 HTML
|
|
15
|
+
**setupin** 允许你在 HTML 中使用 [Vue SFC](https://cn.vuejs.org/api/sfc-spec) 语法。
|
|
16
16
|
|
|
17
|
-
利用[
|
|
17
|
+
利用[sfc2esm](../../../sfc2esm)，在运行时编译为esm格式的vue代码，并动态执行。
|
|
18
18
|
|
|
19
19
|
## 🤯 代码对比
|
|
20
20
|
|
|
21
21
|
<h4 align=center>esm.html</h4>
|
|
22
|
-
|
|
22
|
+
|
|
23
|
+
vue **esm** 写法复杂
|
|
23
24
|
|
|
24
25
|
```html
|
|
25
26
|
<!DOCTYPE html>
|
|
@@ -54,7 +55,8 @@
|
|
|
54
55
|
```
|
|
55
56
|
|
|
56
57
|
<h4 align=center>setup.vue</h4>
|
|
57
|
-
|
|
58
|
+
|
|
59
|
+
vue **sfc** 需要编译
|
|
58
60
|
|
|
59
61
|
```html
|
|
60
62
|
<script setup>
|
|
@@ -74,7 +76,8 @@
|
|
|
74
76
|
```
|
|
75
77
|
|
|
76
78
|
<h4 align=center>setupin.html</h4>
|
|
77
|
-
|
|
79
|
+
|
|
80
|
+
**setupin** 将其合二为一
|
|
78
81
|
|
|
79
82
|
```html
|
|
80
83
|
<head>
|
|
@@ -100,14 +103,13 @@
|
|
|
100
103
|
</style>
|
|
101
104
|
```
|
|
102
105
|
|
|
103
|
-
除了\<head>之外和
|
|
106
|
+
除了\<head>之外和Vue SFC写法完全一致
|
|
104
107
|
|
|
105
108
|
## 🤓 特性
|
|
106
109
|
|
|
107
110
|
- [x] [顶层 await](https://cn.vuejs.org/api/sfc-script-setup.html#top-level-await)
|
|
108
111
|
- [x] [CSS 功能](https://cn.vuejs.org/api/sfc-css-features)
|
|
109
112
|
- [x] [选项式](https://cn.vuejs.org/guide/introduction.html#options-api)
|
|
110
|
-
- [ ] 拆分 [组件](https://cn.vuejs.org/guide/essentials/component-basics.html)
|
|
111
113
|
|
|
112
114
|
## 🤔 为什么选择 setupin
|
|
113
115
|
|