create-vite-taro 0.6.5 → 0.6.7
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/templates/default/README.md +88 -31
- package/templates/default/package.json +1 -1
- package/templates/default/src/app.css +4 -0
- package/templates/default/src/app.tsx +9 -1
- package/templates/default/src/components/footer/footer.tsx +11 -0
- package/templates/default/src/pages/home/index.tsx +1 -7
package/package.json
CHANGED
|
@@ -1,56 +1,113 @@
|
|
|
1
1
|
# Vite Taro App
|
|
2
2
|
|
|
3
|
-
Vite 8
|
|
3
|
+
A cross-platform app built with [Vite 8](https://vite.dev), React 19, Taro 4, TypeScript, and Tailwind CSS v4. The same React codebase runs as a WeChat Mini Program and a Web app.
|
|
4
4
|
|
|
5
|
-
Documentation
|
|
5
|
+
- [Documentation](https://vpt.js.org)
|
|
6
|
+
- [GitHub](https://github.com/sep2/vite-plugin-taro)
|
|
6
7
|
|
|
7
|
-
|
|
8
|
+
## Get started
|
|
8
9
|
|
|
9
|
-
|
|
10
|
+
Install the dependencies:
|
|
10
11
|
|
|
11
12
|
```sh
|
|
12
|
-
# Install dependencies after scaffolding
|
|
13
13
|
npm install
|
|
14
|
+
```
|
|
14
15
|
|
|
15
|
-
|
|
16
|
-
npm run dev:wx
|
|
16
|
+
### Web
|
|
17
17
|
|
|
18
|
-
|
|
18
|
+
```sh
|
|
19
19
|
npm run dev:h5
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Open the URL printed by Vite, usually <http://localhost:5173>.
|
|
23
|
+
|
|
24
|
+
### WeChat Mini Program
|
|
25
|
+
|
|
26
|
+
1. Replace the generated placeholder in `.env.local` with your WeChat App ID:
|
|
27
|
+
|
|
28
|
+
```dotenv
|
|
29
|
+
VITE_VPT_WECHAT_APP_ID=wx1234567890abcdef
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
2. Start the WeChat development build:
|
|
33
|
+
|
|
34
|
+
```sh
|
|
35
|
+
npm run dev:wx
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
3. In WeChat DevTools, import `dist/wx`—not the project root.
|
|
39
|
+
|
|
40
|
+
Keep the Vite process running while you work. The template configures WeChat DevTools for hot reload, disables URL checks for local development, and keeps Skyline rendering disabled in DevTools because Skyline does not currently support hot reload there.
|
|
41
|
+
|
|
42
|
+
You can run `dev:wx` and `dev:h5` in separate terminals to develop both targets at once.
|
|
20
43
|
|
|
21
|
-
|
|
22
|
-
|
|
44
|
+
## Start building
|
|
45
|
+
|
|
46
|
+
The default page is `src/pages/home/index.tsx`. Edit it while the counter is active to see React state survive a hot update.
|
|
47
|
+
|
|
48
|
+
Use VPT's virtual modules for Taro components and APIs:
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import Taro from 'virtual:taro/api'
|
|
52
|
+
import { Button, Text, View } from 'virtual:taro/components'
|
|
23
53
|
```
|
|
24
54
|
|
|
25
|
-
|
|
55
|
+
Do not install or import `@tarojs/*` packages directly. Add pages and change application or WeChat project settings in `vite.config.ts`.
|
|
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.
|
|
26
67
|
|
|
27
|
-
|
|
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.
|
|
68
|
+
## Styling
|
|
30
69
|
|
|
31
|
-
|
|
70
|
+
Global styles and Tailwind theme tokens live in `src/app.css`. Keep the Tailwind imports and `@source "./";` directive so classes used under `src` are discovered for both targets.
|
|
32
71
|
|
|
33
|
-
|
|
34
|
-
for both targets. Taro H5 component styles are injected by the plugin.
|
|
72
|
+
Use complete Tailwind class names in source code instead of constructing them from string fragments. For isolated component styles, create a `*.module.css` file and import it from the component.
|
|
35
73
|
|
|
36
|
-
For WeChat,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
74
|
+
VPT hot-updates imported styles in both targets. For WeChat, it publishes generated WXSS together with the component update so the current page and React state remain intact.
|
|
75
|
+
|
|
76
|
+
## Hot reload
|
|
77
|
+
|
|
78
|
+
During normal WeChat updates, VPT preserves the running App, current page, compatible React Hook state, and native input values. A full reload is expected after changes to Vite configuration, incompatible component or Hook structure, or an update that cannot be applied safely.
|
|
79
|
+
|
|
80
|
+
See the [hot reload guide](https://vpt.js.org/guides/hot-module-replacement/) for configuration and troubleshooting details.
|
|
40
81
|
|
|
41
82
|
## Scripts
|
|
42
83
|
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
npm run dev:
|
|
46
|
-
npm run
|
|
47
|
-
npm run build:
|
|
48
|
-
npm run
|
|
49
|
-
npm run
|
|
84
|
+
| Command | Description | Output |
|
|
85
|
+
| --- | --- | --- |
|
|
86
|
+
| `npm run dev:wx` | Develop the WeChat Mini Program with hot reload | `dist/wx` |
|
|
87
|
+
| `npm run dev:h5` | Start the Web development server | — |
|
|
88
|
+
| `npm run build:wx` | Build the WeChat Mini Program | `dist/wx` |
|
|
89
|
+
| `npm run build:h5` | Build the Web app | `dist/h5` |
|
|
90
|
+
| `npm run preview:h5` | Preview the Web production build | — |
|
|
91
|
+
| `npm run typecheck` | Typecheck the project with TypeScript | — |
|
|
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
|
|
50
104
|
```
|
|
51
105
|
|
|
52
106
|
## Troubleshooting
|
|
53
107
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
108
|
+
- **WeChat DevTools cannot open the app:** import `dist/wx` and verify that `.env.local` contains an App ID available to your WeChat account.
|
|
109
|
+
- **Changes do not appear in WeChat:** confirm `dev:wx` is still running, DevTools has the current `dist/wx` open, and the terminal has no build errors.
|
|
110
|
+
- **Tailwind classes are missing:** keep `@source "./";` in `src/app.css` and write each possible class name as a complete string.
|
|
111
|
+
- **pnpm reports ignored dependency build scripts:** run `pnpm approve-builds`, approve the requested scripts, and install again.
|
|
112
|
+
|
|
113
|
+
Continue with the [quick start guide](https://vpt.js.org/guides/quick-start/) or browse the [complete documentation](https://vpt.js.org).
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { useLaunch } from 'virtual:taro/api'
|
|
2
|
+
import { View } from 'virtual:taro/components'
|
|
2
3
|
import type { PropsWithChildren } from 'react'
|
|
3
4
|
import './app.css'
|
|
5
|
+
import { Footer } from './components/footer/footer.tsx'
|
|
4
6
|
import { initNavigationBar } from './components/navigation-bar/use-navigation-bar.ts'
|
|
5
7
|
|
|
6
8
|
function App({ children }: PropsWithChildren) {
|
|
@@ -9,7 +11,13 @@ function App({ children }: PropsWithChildren) {
|
|
|
9
11
|
initNavigationBar()
|
|
10
12
|
})
|
|
11
13
|
|
|
12
|
-
return
|
|
14
|
+
return (
|
|
15
|
+
<View className="app-shell flex h-screen flex-col overflow-hidden bg-canvas bg-canvas-botanical text-foreground">
|
|
16
|
+
{/* H5 requires the routed Page to remain the final child; flex order still places Footer below it. */}
|
|
17
|
+
<Footer />
|
|
18
|
+
<>{children}</>
|
|
19
|
+
</View>
|
|
20
|
+
)
|
|
13
21
|
}
|
|
14
22
|
|
|
15
23
|
export default App
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { Text, View } from 'virtual:taro/components'
|
|
2
|
+
|
|
3
|
+
export function Footer() {
|
|
4
|
+
return (
|
|
5
|
+
<View className="order-last mt-auto flex h-10 shrink-0 flex-row items-center justify-center border-t border-divider bg-surface-subtle/95 px-5">
|
|
6
|
+
<Text className="text-center text-xs font-bold tracking-widest text-quiet">
|
|
7
|
+
VPT · OPEN SOURCE · MIT
|
|
8
|
+
</Text>
|
|
9
|
+
</View>
|
|
10
|
+
)
|
|
11
|
+
}
|
|
@@ -32,7 +32,7 @@ function HomePage() {
|
|
|
32
32
|
const [count, setCount] = useState(0)
|
|
33
33
|
|
|
34
34
|
return (
|
|
35
|
-
<View className="flex h-
|
|
35
|
+
<View className="flex h-full min-h-0 flex-1 flex-col overflow-hidden">
|
|
36
36
|
<NavigationBar title="VPT" />
|
|
37
37
|
<ScrollView scrollY className="flex min-h-0 flex-1 flex-col">
|
|
38
38
|
<View className="relative flex shrink-0 flex-col items-center overflow-hidden px-5 pb-8 pt-6">
|
|
@@ -133,12 +133,6 @@ function HomePage() {
|
|
|
133
133
|
<Suspense fallback={<View className="mt-8 min-h-48 rounded-3xl bg-primary" />}>
|
|
134
134
|
<ApiCard />
|
|
135
135
|
</Suspense>
|
|
136
|
-
|
|
137
|
-
<View className="flex flex-col items-center px-2 pb-2 pt-9">
|
|
138
|
-
<Text className="text-center text-xs font-bold tracking-widest text-quiet">
|
|
139
|
-
VPT · OPEN SOURCE · MIT
|
|
140
|
-
</Text>
|
|
141
|
-
</View>
|
|
142
136
|
</View>
|
|
143
137
|
</View>
|
|
144
138
|
</ScrollView>
|