@darkchest/wck 0.0.2 → 0.0.3
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/package.json +1 -1
- package/readme.md +23 -9
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
### 1. 安装依赖
|
|
52
52
|
|
|
53
53
|
```bash
|
|
54
|
-
npm install @darkchest/wck
|
|
54
|
+
npm install @darkchest/wck vite -D
|
|
55
55
|
```
|
|
56
56
|
|
|
57
57
|
### 2. 使用示例(重要: 请参考TodoList.vue文件示例, 该文件中已包含所有核心功能并且开箱即用)
|
|
@@ -72,20 +72,28 @@ export default defineConfig({
|
|
|
72
72
|
formats: ['es', 'iife', 'umd'],
|
|
73
73
|
fileName: (format, name) => `${name}.${format}.min.js`
|
|
74
74
|
},
|
|
75
|
-
},
|
|
76
|
-
resolve: {
|
|
77
|
-
alias: {
|
|
78
|
-
'@': resolve(__dirname, 'src'), // 配置别名
|
|
79
|
-
}
|
|
80
75
|
}
|
|
81
76
|
})
|
|
82
77
|
```
|
|
83
78
|
|
|
79
|
+
```json
|
|
80
|
+
// package.json
|
|
81
|
+
// 主要是增加dev/build俩个命令来启动vite开发和打包.
|
|
82
|
+
{
|
|
83
|
+
...,
|
|
84
|
+
"scripts": {
|
|
85
|
+
"dev": "vite",
|
|
86
|
+
"build": "vite build"
|
|
87
|
+
},
|
|
88
|
+
...,
|
|
89
|
+
}
|
|
90
|
+
```
|
|
91
|
+
|
|
84
92
|
```javascript
|
|
85
93
|
// src/index.js
|
|
86
|
-
import TodoList from './
|
|
94
|
+
import TodoList from './components/TodoList.vue';
|
|
87
95
|
|
|
88
|
-
|
|
96
|
+
customElements.define('todo-list', TodoList);
|
|
89
97
|
// 注意: web-component的标签名必须为中划线命名(有且至少一个中划线), 否则无法成功注册.
|
|
90
98
|
```
|
|
91
99
|
|
|
@@ -766,10 +774,16 @@ footer {
|
|
|
766
774
|
<head>
|
|
767
775
|
<meta charset="UTF-8" />
|
|
768
776
|
<title>my web components</title>
|
|
769
|
-
<script type="module" src="./dist/index.iife.min.js"></script>
|
|
770
777
|
</head>
|
|
771
778
|
<body>
|
|
772
779
|
<todo-list app-title="*待办清单*"></todo-list>
|
|
780
|
+
<script type="module">
|
|
781
|
+
import './src/index.js';
|
|
782
|
+
// 执行npm run dev时vite会启动服务并打开index.html, 我们在这个页面中导入src/index.js就能正常执行它里面的代码并注册web组件了
|
|
783
|
+
</script>
|
|
784
|
+
|
|
785
|
+
<script src="./dist//index.iife.min.js"></script>
|
|
786
|
+
<!-- 也可以执行npm run build直接编译src/index.js到dist目录, 然后在script的src属性中引入打包后的文件, 方案二选一即可 -->
|
|
773
787
|
</body>
|
|
774
788
|
</html>
|
|
775
789
|
```
|