create-vite-taro 0.6.7 → 0.6.11
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
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
Create a Vite 8 + React 19 + Taro app for WeChat Mini Program and Web targets.
|
|
4
4
|
|
|
5
|
+
> **AI-assisted development is recommended:** Follow the [VPT AI development guide](https://vpt.js.org/guides/ai/) and let a coding assistant create, develop, test, and validate your app.
|
|
6
|
+
|
|
5
7
|
```sh
|
|
6
8
|
npm create vite-taro@latest my-app
|
|
7
9
|
```
|
package/package.json
CHANGED
|
@@ -1,113 +1,91 @@
|
|
|
1
|
-
#
|
|
1
|
+
# VPT
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
基于 Vite 8、React 19、Taro 4、TypeScript 和 Tailwind CSS v4，一套代码运行于微信小程序和 Web。
|
|
4
4
|
|
|
5
|
-
- [
|
|
5
|
+
- [文档](https://vpt.js.org)
|
|
6
6
|
- [GitHub](https://github.com/sep2/vite-plugin-taro)
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## AI 开发
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
把下面的提示词交给编程助手，让它先读取 VPT 文档，再开发并验证功能：
|
|
11
11
|
|
|
12
|
-
```
|
|
13
|
-
|
|
12
|
+
```text
|
|
13
|
+
请先阅读 https://vpt.js.org/llms.txt，再根据我的需求开发这个 VPT 项目。
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
|
|
16
|
+
测试微信小程序时，可安装微信官方的[开发者工具 Skills](https://developers.weixin.qq.com/miniprogram/dev/devtools/Skills.html)，让 AI 操作模拟器、读取日志、截图和预览。
|
|
17
|
+
|
|
18
|
+
## 快速开始
|
|
19
|
+
|
|
20
|
+
安装依赖：
|
|
17
21
|
|
|
18
22
|
```sh
|
|
19
|
-
npm
|
|
23
|
+
npm install
|
|
20
24
|
```
|
|
21
25
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
### WeChat Mini Program
|
|
26
|
+
### 微信小程序
|
|
25
27
|
|
|
26
|
-
1.
|
|
28
|
+
1. 在 `.env.local` 中填写微信 App ID：
|
|
27
29
|
|
|
28
30
|
```dotenv
|
|
29
31
|
VITE_VPT_WECHAT_APP_ID=wx1234567890abcdef
|
|
30
32
|
```
|
|
31
33
|
|
|
32
|
-
2.
|
|
34
|
+
2. 启动开发构建：
|
|
33
35
|
|
|
34
36
|
```sh
|
|
35
37
|
npm run dev:wx
|
|
36
38
|
```
|
|
37
39
|
|
|
38
|
-
3.
|
|
40
|
+
3. 用微信开发者工具导入 `dist/wx`，不要导入项目根目录。
|
|
39
41
|
|
|
40
|
-
|
|
42
|
+
开发期间保持命令运行。模板已开启热更新、关闭本地开发的 URL 校验，并默认关闭开发者工具中暂不支持热更新的 Skyline。
|
|
41
43
|
|
|
42
|
-
|
|
44
|
+
### Web
|
|
43
45
|
|
|
44
|
-
|
|
46
|
+
```sh
|
|
47
|
+
npm run dev:h5
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
打开 Vite 输出的地址，通常是 <http://localhost:5173>。
|
|
45
51
|
|
|
46
|
-
|
|
52
|
+
## 开发
|
|
47
53
|
|
|
48
|
-
|
|
54
|
+
默认页面是 `src/pages/home/index.tsx`。VPT 通过虚拟模块提供 Taro 组件和 API：
|
|
49
55
|
|
|
50
56
|
```tsx
|
|
51
57
|
import Taro from 'virtual:taro/api'
|
|
52
58
|
import { Button, Text, View } from 'virtual:taro/components'
|
|
53
59
|
```
|
|
54
60
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
The starter also demonstrates:
|
|
58
|
-
|
|
59
|
-
- shared React components across WeChat and Web;
|
|
60
|
-
- target-specific code with `// #ifdef wx` and `// #ifdef h5`;
|
|
61
|
-
- a typed native WeChat component with a Web counterpart;
|
|
62
|
-
- lazy-loaded React components;
|
|
63
|
-
- a custom navigation bar; and
|
|
64
|
-
- Tailwind CSS, CSS Modules, and global CSS.
|
|
65
|
-
|
|
66
|
-
Delete or replace any example code you do not need.
|
|
67
|
-
|
|
68
|
-
## Styling
|
|
61
|
+
不要直接安装或导入 `@tarojs/*`。在 `vite.config.ts` 中添加页面并修改应用或微信项目配置。
|
|
69
62
|
|
|
70
|
-
|
|
63
|
+
模板包含条件编译、微信原生组件、懒加载、自定义导航栏、Tailwind CSS、CSS Modules 和全局样式示例；不需要的示例可直接删除。
|
|
71
64
|
|
|
72
|
-
|
|
65
|
+
### 样式
|
|
73
66
|
|
|
74
|
-
|
|
67
|
+
全局样式和 Tailwind 主题位于 `src/app.css`。保留 Tailwind 导入和 `@source "./";`，并在源码中写完整类名，不要拼接类名。组件独立样式使用 `*.module.css`。
|
|
75
68
|
|
|
76
|
-
|
|
69
|
+
### 热更新
|
|
77
70
|
|
|
78
|
-
|
|
71
|
+
微信端热更新通常会保留 App 数据、当前页面、兼容的 React Hook 状态和原生输入值。修改 Vite 配置、组件或 Hook 结构不兼容，或更新无法安全应用时，会整页重载。详见[热更新指南](https://vpt.js.org/guides/hot-module-replacement/)。
|
|
79
72
|
|
|
80
|
-
|
|
73
|
+
## 命令
|
|
81
74
|
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
| Command | Description | Output |
|
|
75
|
+
| 命令 | 用途 | 输出 |
|
|
85
76
|
| --- | --- | --- |
|
|
86
|
-
| `npm run dev:wx` |
|
|
87
|
-
| `npm run dev:h5` |
|
|
88
|
-
| `npm run build:wx` |
|
|
89
|
-
| `npm run build:h5` |
|
|
90
|
-
| `npm run preview:h5` |
|
|
91
|
-
| `npm run typecheck` |
|
|
92
|
-
|
|
93
|
-
## Project structure
|
|
94
|
-
|
|
95
|
-
```text
|
|
96
|
-
.
|
|
97
|
-
├── .env.local # Local WeChat App ID (ignored by Git)
|
|
98
|
-
├── vite.config.ts # VPT, pages, and target configuration
|
|
99
|
-
└── src/
|
|
100
|
-
├── app.tsx # Shared application entry
|
|
101
|
-
├── app.css # Global styles and Tailwind theme
|
|
102
|
-
├── components/ # Shared and target-specific components
|
|
103
|
-
└── pages/home/index.tsx # Default page
|
|
104
|
-
```
|
|
77
|
+
| `npm run dev:wx` | 开发微信小程序 | `dist/wx` |
|
|
78
|
+
| `npm run dev:h5` | 开发 Web | — |
|
|
79
|
+
| `npm run build:wx` | 构建微信小程序 | `dist/wx` |
|
|
80
|
+
| `npm run build:h5` | 构建 Web | `dist/h5` |
|
|
81
|
+
| `npm run preview:h5` | 预览 Web 生产构建 | — |
|
|
82
|
+
| `npm run typecheck` | TypeScript 类型检查 | — |
|
|
105
83
|
|
|
106
|
-
##
|
|
84
|
+
## 常见问题
|
|
107
85
|
|
|
108
|
-
-
|
|
109
|
-
-
|
|
110
|
-
- **Tailwind
|
|
111
|
-
- **pnpm
|
|
86
|
+
- **开发者工具无法打开项目：** 确认导入的是 `dist/wx`，且 `.env.local` 中的 App ID 可用。
|
|
87
|
+
- **热更新失败：** 依次关闭微信开发者工具、停止 `dev:wx`、删除 `dist/wx`、重新运行 `npm run dev:wx`，再打开开发者工具并导入 `dist/wx`。
|
|
88
|
+
- **Tailwind 类未生效：** 保留 `src/app.css` 中的 `@source "./";`，并使用完整类名。
|
|
89
|
+
- **pnpm 忽略依赖构建脚本：** 运行 `pnpm approve-builds`，批准所需脚本后重新安装。
|
|
112
90
|
|
|
113
|
-
|
|
91
|
+
继续阅读[快速开始指南](https://vpt.js.org/guides/quick-start/)或[完整文档](https://vpt.js.org)。
|
|
@@ -13,9 +13,8 @@ function App({ children }: PropsWithChildren) {
|
|
|
13
13
|
|
|
14
14
|
return (
|
|
15
15
|
<View className="app-shell flex h-screen flex-col overflow-hidden bg-canvas bg-canvas-botanical text-foreground">
|
|
16
|
-
{
|
|
16
|
+
{children}
|
|
17
17
|
<Footer />
|
|
18
|
-
<>{children}</>
|
|
19
18
|
</View>
|
|
20
19
|
)
|
|
21
20
|
}
|
|
@@ -2,7 +2,7 @@ import { Text, View } from 'virtual:taro/components'
|
|
|
2
2
|
|
|
3
3
|
export function Footer() {
|
|
4
4
|
return (
|
|
5
|
-
<View className="
|
|
5
|
+
<View className="mt-auto flex h-10 shrink-0 flex-row items-center justify-center border-t border-divider bg-surface-subtle/95 px-5">
|
|
6
6
|
<Text className="text-center text-xs font-bold tracking-widest text-quiet">
|
|
7
7
|
VPT · OPEN SOURCE · MIT
|
|
8
8
|
</Text>
|