create-vite-taro 0.3.1 → 0.4.0
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 +2 -53
- package/package.json +1 -1
- package/templates/default/README.md +13 -3
- package/templates/default/package.json +2 -2
- package/templates/default/src/app.css +11 -0
- package/templates/default/src/components/navigation-bar/navigation-bar.tsx +1 -1
- package/templates/default/src/pages/index/index.tsx +157 -17
- package/templates/default/tsconfig.app.json +1 -0
- package/templates/default/vite.config.ts +1 -1
- /package/templates/default/src/{app.ts → app.tsx} +0 -0
package/README.md
CHANGED
|
@@ -1,60 +1,9 @@
|
|
|
1
1
|
# create-vite-taro
|
|
2
2
|
|
|
3
|
-
Create a Vite 8 + React 19 + Taro app for WeChat Mini Program and Web
|
|
4
|
-
|
|
5
|
-
## Quick start
|
|
3
|
+
Create a Vite 8 + React 19 + Taro app for WeChat Mini Program and Web targets.
|
|
6
4
|
|
|
7
5
|
```sh
|
|
8
|
-
# Create a new app from the default template
|
|
9
6
|
npm create vite-taro@latest my-app
|
|
10
|
-
|
|
11
|
-
# Or create with pnpm
|
|
12
|
-
pnpm --config.minimum-release-age=0 create vite-taro@latest my-app
|
|
13
|
-
|
|
14
|
-
# Enter the project and install dependencies
|
|
15
|
-
cd my-app
|
|
16
|
-
npm install
|
|
17
|
-
|
|
18
|
-
# WeChat Mini Program: start Vite with hot reload
|
|
19
|
-
npm run dev:wx
|
|
20
|
-
|
|
21
|
-
# Web/H5: start the Vite dev server
|
|
22
|
-
npm run dev:h5
|
|
23
|
-
|
|
24
|
-
# Then open the standard Vite dev URL in your browser
|
|
25
|
-
# http://localhost:5173
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
You can keep `npm run dev:wx` and `npm run dev:h5` running at the same time in separate terminals.
|
|
29
|
-
|
|
30
|
-
WeChat development fully supports Vite-powered hot reload. JavaScript edits preserve the active native page and React/input state, while other changes are rebuilt automatically.
|
|
31
|
-
|
|
32
|
-
Set `VITE_PLUGIN_TARO_WECHAT_APP_ID` in the generated `.env.local` to your WeChat Mini Program App ID, then open `dist/wx` with WeChat DevTools for Mini Program development.
|
|
33
|
-
|
|
34
|
-
The generated app keeps global styles in `src/app.css` and includes Tailwind CSS v4 plus Taro component styles out of the box.
|
|
35
|
-
|
|
36
|
-
## Other package managers
|
|
37
|
-
|
|
38
|
-
```sh
|
|
39
|
-
pnpm --config.minimum-release-age=0 create vite-taro@latest my-app
|
|
40
|
-
yarn create vite-taro my-app
|
|
41
|
-
bun create vite-taro my-app
|
|
42
7
|
```
|
|
43
8
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
| Command | Description |
|
|
47
|
-
| --- | --- |
|
|
48
|
-
| `npm run dev:wx` | Start WeChat Mini Program development with hot reload. |
|
|
49
|
-
| `npm run dev:h5` | Start the Web/H5 dev server. |
|
|
50
|
-
| `npm run build:wx` | Build the WeChat Mini Program output into `dist/wx`. |
|
|
51
|
-
| `npm run build:h5` | Build the Web/H5 output into `dist/h5`. |
|
|
52
|
-
| `npm run preview:h5` | Preview the built Web/H5 output. |
|
|
53
|
-
| `npm run typecheck` | Typecheck with `tsc`. |
|
|
54
|
-
|
|
55
|
-
## Troubleshooting
|
|
56
|
-
|
|
57
|
-
| Problem | Check |
|
|
58
|
-
| --- | --- |
|
|
59
|
-
| `pnpm install` says dependency build scripts were ignored | Run `pnpm approve-builds` and approve the requested dependency build scripts. |
|
|
60
|
-
|
|
9
|
+
Continue with the [Quick Start guide](https://vite-plugin-taro.netlify.app/guides/quick-start/), or browse the [complete documentation](https://vite-plugin-taro.netlify.app).
|
package/package.json
CHANGED
|
@@ -2,7 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Vite 8 + React 19 + Taro app generated by `create-vite-taro`.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Documentation: <https://vite-plugin-taro.netlify.app>
|
|
6
|
+
|
|
7
|
+
Source: <https://github.com/sep2/vite-plugin-taro>
|
|
6
8
|
|
|
7
9
|
## Quick start
|
|
8
10
|
|
|
@@ -22,11 +24,19 @@ npm run dev:h5
|
|
|
22
24
|
|
|
23
25
|
You can keep `npm run dev:wx` and `npm run dev:h5` running at the same time in separate terminals.
|
|
24
26
|
|
|
25
|
-
Set `VITE_PLUGIN_TARO_WECHAT_APP_ID` in `.env.local` to your WeChat App ID, then open `dist/wx` with WeChat DevTools
|
|
27
|
+
Set `VITE_PLUGIN_TARO_WECHAT_APP_ID` in `.env.local` to your WeChat App ID, then open `dist/wx` with WeChat DevTools
|
|
28
|
+
for Mini Program development. State-preserving hot reload requires `compileHotReLoad: true`; the generated project sets
|
|
29
|
+
it automatically and also disables Skyline rendering and URL checks by default.
|
|
26
30
|
|
|
27
31
|
## Styles
|
|
28
32
|
|
|
29
|
-
Global styles live in `src/app.css`. Keep the Tailwind subpath imports and `@source "./";` line so Tailwind CSS v4 works
|
|
33
|
+
Global styles live in `src/app.css`. Keep the Tailwind subpath imports and `@source "./";` line so Tailwind CSS v4 works
|
|
34
|
+
for both targets. Taro H5 component styles are injected by the plugin.
|
|
35
|
+
|
|
36
|
+
For WeChat, application CSS is currently emitted through `app.wxss`. CSS edits therefore rebuild and reload the App,
|
|
37
|
+
unlike JavaScript hot updates, which preserve App, React, and input state. WeChat DevTools preserves the App
|
|
38
|
+
and Page instance for direct `page.wxss` edits. Route-scoped, state-preserving WXSS hot reload will be supported in an
|
|
39
|
+
upcoming release.
|
|
30
40
|
|
|
31
41
|
## Scripts
|
|
32
42
|
|
|
@@ -18,7 +18,7 @@ export function NavigationBar({ title }: NavigationBarProps) {
|
|
|
18
18
|
const sideStyle: CSSProperties = { flexBasis: px(menuInfo.width), width: px(menuInfo.width) }
|
|
19
19
|
|
|
20
20
|
return (
|
|
21
|
-
<View className="flex w-full flex-col text-white
|
|
21
|
+
<View className="flex w-full flex-col bg-slate-950 text-white" style={containerStyle}>
|
|
22
22
|
<View className="shrink-0" style={statusBarStyle} />
|
|
23
23
|
<View className="flex w-full flex-1 flex-row items-center" style={contentStyle}>
|
|
24
24
|
<View className="flex h-full shrink-0" style={sideStyle} />
|
|
@@ -1,27 +1,167 @@
|
|
|
1
1
|
import Taro from 'virtual:taro/api'
|
|
2
|
-
import { Button, Text, View } from 'virtual:taro/components'
|
|
2
|
+
import { Button, ScrollView, Text, View } from 'virtual:taro/components'
|
|
3
|
+
import { useState } from 'react'
|
|
3
4
|
import { NavigationBar } from '../../components/navigation-bar/navigation-bar.tsx'
|
|
4
5
|
|
|
6
|
+
const features = [
|
|
7
|
+
{
|
|
8
|
+
number: '01',
|
|
9
|
+
title: 'Instant feedback',
|
|
10
|
+
description: 'Enjoy a fast Vite-powered development loop on every target.'
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
number: '02',
|
|
14
|
+
title: 'One React UI',
|
|
15
|
+
description: 'Share components and state between H5 and WeChat Mini Program.'
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
number: '03',
|
|
19
|
+
title: 'Native ready',
|
|
20
|
+
description: 'Reach Taro APIs and components without giving up modern tooling.'
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
|
|
5
24
|
function IndexPage() {
|
|
25
|
+
const [count, setCount] = useState(0)
|
|
26
|
+
|
|
6
27
|
return (
|
|
7
|
-
<View className="flex flex-col
|
|
28
|
+
<View className="flex h-screen flex-col overflow-hidden bg-slate-950 text-slate-950">
|
|
8
29
|
<NavigationBar title="Vite Taro App" />
|
|
9
|
-
<
|
|
10
|
-
<View className="
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
30
|
+
<ScrollView scrollY className="flex min-h-0 flex-1 flex-col bg-slate-50">
|
|
31
|
+
<View className="relative flex shrink-0 flex-col items-center overflow-hidden bg-slate-950 px-6 pb-16 pt-10">
|
|
32
|
+
<View className="relative flex w-full max-w-4xl flex-col gap-6">
|
|
33
|
+
<View className="flex flex-row">
|
|
34
|
+
<View className="flex flex-row items-center gap-2 rounded-full border border-slate-700 bg-slate-900 px-3 py-2">
|
|
35
|
+
<Text className="text-xs leading-none text-emerald-400">●</Text>
|
|
36
|
+
<Text className="text-xs font-semibold tracking-widest text-slate-300">
|
|
37
|
+
VITE × TARO
|
|
38
|
+
</Text>
|
|
39
|
+
</View>
|
|
40
|
+
</View>
|
|
41
|
+
|
|
42
|
+
<View className="flex flex-col">
|
|
43
|
+
<Text className="block text-4xl font-bold leading-tight text-white">One codebase.</Text>
|
|
44
|
+
<Text className="block text-4xl font-bold leading-tight text-blue-400">Every screen.</Text>
|
|
45
|
+
</View>
|
|
46
|
+
|
|
47
|
+
<Text className="block max-w-xl text-base leading-7 text-slate-300">
|
|
48
|
+
A modern React starter for building polished H5 and WeChat experiences without duplicating
|
|
49
|
+
work.
|
|
50
|
+
</Text>
|
|
51
|
+
|
|
52
|
+
<View className="flex flex-row gap-3">
|
|
53
|
+
<View className="flex items-center rounded-xl bg-white px-4 py-2">
|
|
54
|
+
<Text className="text-sm font-bold text-slate-950">WeChat Mini Program</Text>
|
|
55
|
+
</View>
|
|
56
|
+
<View className="flex items-center rounded-xl border border-slate-700 bg-slate-900 px-4 py-2">
|
|
57
|
+
<Text className="text-sm font-bold text-white">H5</Text>
|
|
58
|
+
</View>
|
|
59
|
+
</View>
|
|
60
|
+
</View>
|
|
61
|
+
</View>
|
|
62
|
+
|
|
63
|
+
<View className="relative z-10 flex shrink-0 flex-col items-center px-5">
|
|
64
|
+
<View className="-mt-10 flex w-full max-w-4xl flex-col rounded-3xl shadow-xl">
|
|
65
|
+
<View className="flex w-full flex-col gap-6 overflow-hidden rounded-3xl border border-slate-200 bg-white p-6">
|
|
66
|
+
<View className="flex flex-row items-start justify-between gap-4">
|
|
67
|
+
<View className="flex min-w-0 flex-1 flex-col gap-2">
|
|
68
|
+
<Text className="block text-xs font-bold tracking-widest text-blue-600">
|
|
69
|
+
LIVE DEMO
|
|
70
|
+
</Text>
|
|
71
|
+
<Text className="block text-xl font-bold text-slate-950">
|
|
72
|
+
A tiny shared counter
|
|
73
|
+
</Text>
|
|
74
|
+
<Text className="block text-sm leading-6 text-slate-500">
|
|
75
|
+
Change the counter, then edit this page to see hot reload update both targets.
|
|
76
|
+
</Text>
|
|
77
|
+
</View>
|
|
78
|
+
<View className="flex items-center justify-center rounded-2xl bg-blue-50 px-4 py-3">
|
|
79
|
+
<Text className="text-3xl font-bold text-blue-600">{count}</Text>
|
|
80
|
+
</View>
|
|
81
|
+
</View>
|
|
82
|
+
|
|
83
|
+
<View className="flex flex-col gap-3">
|
|
84
|
+
<View className="flex flex-row gap-3">
|
|
85
|
+
<View className="flex flex-1">
|
|
86
|
+
<Button
|
|
87
|
+
className="flex w-full items-center justify-center rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 after:border-0"
|
|
88
|
+
onClick={() => setCount((currentCount) => currentCount - 1)}
|
|
89
|
+
>
|
|
90
|
+
Decrease
|
|
91
|
+
</Button>
|
|
92
|
+
</View>
|
|
93
|
+
<View className="flex flex-1">
|
|
94
|
+
<Button
|
|
95
|
+
className="flex w-full items-center justify-center rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white after:border-0"
|
|
96
|
+
onClick={() => setCount((currentCount) => currentCount + 1)}
|
|
97
|
+
>
|
|
98
|
+
Increase
|
|
99
|
+
</Button>
|
|
100
|
+
</View>
|
|
101
|
+
</View>
|
|
102
|
+
<Button
|
|
103
|
+
className="flex w-full items-center justify-center rounded-xl bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-600 after:border-0"
|
|
104
|
+
onClick={() => Taro.showToast({ title: 'Hello from Taro!' })}
|
|
105
|
+
>
|
|
106
|
+
Show toast
|
|
107
|
+
</Button>
|
|
108
|
+
</View>
|
|
109
|
+
</View>
|
|
110
|
+
</View>
|
|
111
|
+
</View>
|
|
112
|
+
|
|
113
|
+
<View className="flex shrink-0 flex-col items-center px-5 pb-10 pt-10">
|
|
114
|
+
<View className="flex w-full max-w-4xl flex-col gap-6">
|
|
115
|
+
<View className="flex flex-col gap-2">
|
|
116
|
+
<Text className="block text-xs font-bold tracking-widest text-blue-600">
|
|
117
|
+
BUILT FOR MOMENTUM
|
|
118
|
+
</Text>
|
|
119
|
+
<Text className="block text-2xl font-bold text-slate-950">
|
|
120
|
+
Everything you need to start.
|
|
121
|
+
</Text>
|
|
122
|
+
</View>
|
|
123
|
+
|
|
124
|
+
<View className="flex flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white">
|
|
125
|
+
{features.map((feature, index) => (
|
|
126
|
+
<View
|
|
127
|
+
key={feature.number}
|
|
128
|
+
className={`flex flex-row gap-4 p-5 ${index < features.length - 1 ? 'border-b border-slate-200' : ''}`}
|
|
129
|
+
>
|
|
130
|
+
<View className="flex shrink-0 self-center items-center justify-center rounded-xl bg-slate-950 px-3 py-3">
|
|
131
|
+
<Text className="text-xs font-bold text-white">{feature.number}</Text>
|
|
132
|
+
</View>
|
|
133
|
+
<View className="flex min-w-0 flex-1 flex-col gap-1">
|
|
134
|
+
<Text className="block text-base font-bold text-slate-950">
|
|
135
|
+
{feature.title}
|
|
136
|
+
</Text>
|
|
137
|
+
<Text className="block text-sm leading-6 text-slate-500">
|
|
138
|
+
{feature.description}
|
|
139
|
+
</Text>
|
|
140
|
+
</View>
|
|
141
|
+
</View>
|
|
142
|
+
))}
|
|
143
|
+
</View>
|
|
144
|
+
|
|
145
|
+
<View className="flex flex-col gap-5 rounded-3xl bg-blue-600 p-6">
|
|
146
|
+
<View className="flex flex-col gap-2">
|
|
147
|
+
<Text className="block text-2xl font-bold text-white">Make it yours.</Text>
|
|
148
|
+
<Text className="block text-sm leading-6 text-blue-100">
|
|
149
|
+
Edit this page, add your routes, and ship your next idea everywhere.
|
|
150
|
+
</Text>
|
|
151
|
+
</View>
|
|
152
|
+
<View className="flex self-end rounded-xl bg-white px-4 py-3">
|
|
153
|
+
<Text className="text-sm font-bold text-blue-600">Ready to build →</Text>
|
|
154
|
+
</View>
|
|
155
|
+
</View>
|
|
156
|
+
|
|
157
|
+
<View className="flex flex-col px-2 pt-2">
|
|
158
|
+
<Text className="block text-center text-xs font-medium tracking-widest text-slate-400">
|
|
159
|
+
VITE 8 · REACT 19 · TARO
|
|
160
|
+
</Text>
|
|
161
|
+
</View>
|
|
162
|
+
</View>
|
|
23
163
|
</View>
|
|
24
|
-
</
|
|
164
|
+
</ScrollView>
|
|
25
165
|
</View>
|
|
26
166
|
)
|
|
27
167
|
}
|
|
File without changes
|