@darkchest/wck 0.0.6 → 0.0.8

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/readme.md +25 -20
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@darkchest/wck",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
4
4
  "description": "@darkchest/wck是一个通过将 Vue 单文件组件 (SFC) 转换为通用的web-component组件的解决方案。",
5
5
  "private": false,
6
6
  "main": "src/index.js",
package/readme.md CHANGED
@@ -48,13 +48,7 @@
48
48
 
49
49
  ## 🛠️ 安装与配置
50
50
 
51
- ### 1. 安装依赖
52
-
53
- ```bash
54
- npm install @darkchest/wck vite -D
55
- ```
56
-
57
- ### 2. 使用示例(重要: 请参考TodoList.vue文件示例, 该文件中已包含所有核心功能并且开箱即用)
51
+ ### 1. 使用示例(重要: 请参考TodoList.vue文件示例, 该文件中已包含所有核心功能并且开箱即用)
58
52
 
59
53
  ```javascript
60
54
  // 创建一个项目文件夹, 例如helloworld, 然后在文件夹中执行npm init -y初始化一下.
@@ -62,6 +56,26 @@ npm install @darkchest/wck vite -D
62
56
  // 以上文件的内容直接复制下面对应的内容即可.(注意package.json不能复制, 而是手动修改scripts命令的部分, 请看下面的package.json部分)
63
57
  ```
64
58
 
59
+ ### 2. 安装依赖(在刚刚创建的helloworld文件夹中执行以下命令安装依赖)
60
+ ```bash
61
+ npm install @darkchest/wck vite -D
62
+ ```
63
+
64
+ ### 3. 在package.json中手动配置命令
65
+ ```json
66
+ // package.json
67
+ // 主要是增加dev/build俩个命令来启动vite开发和打包.
68
+ {
69
+ ...,
70
+ "scripts": {
71
+ "dev": "vite",
72
+ "build": "vite build"
73
+ },
74
+ ...,
75
+ }
76
+ ```
77
+
78
+ ### 4. 复制下面的文件内容到项目目录对应的文件中
65
79
  ```javascript
66
80
  // vite.config.js
67
81
  import { defineConfig } from 'vite';
@@ -83,19 +97,6 @@ export default defineConfig({
83
97
  })
84
98
  ```
85
99
 
86
- ```json
87
- // package.json
88
- // 主要是增加dev/build俩个命令来启动vite开发和打包.
89
- {
90
- ...,
91
- "scripts": {
92
- "dev": "vite",
93
- "build": "vite build"
94
- },
95
- ...,
96
- }
97
- ```
98
-
99
100
  ```javascript
100
101
  // src/index.js
101
102
  import TodoList from './components/TodoList.vue';
@@ -795,6 +796,10 @@ footer {
795
796
  </html>
796
797
  ```
797
798
 
799
+ ### 5. 运行项目
800
+ - 如果执行npm run dev, 浏览器打开index.html并运行在localhost下, 此时请参考上面的说明使用import './src/index.js'的方式引入src/index.js.
801
+ - 如果运行npm run build, 则会使用vite打包文件到dist目录下的index.iife.min.js, 然后我们手动在index.html中通过script的src属性引入这个打包后的文件, 最后双击index.html打开网页即可.
802
+
798
803
 
799
804
  ## 最后的最后
800
805