### Install project dependencies
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/getting-started
Installs all required project dependencies using pnpm.
```bash
pnpm install
```
--------------------------------
### Run development server
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/getting-started
Starts the local development server at http://localhost:3000.
```bash
pnpm dev
```
--------------------------------
### Atomic CSS Example with Unocss
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/browser-adaptation
Demonstrates using Unocss with the REM to PX preset for styling. The utility classes will be automatically converted to responsive VW units.
```vue
Hello, Unocss!
This is a simple example of Unocss in action.
```
--------------------------------
### Install pnpm globally
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/getting-started
Installs the pnpm package manager globally using npm.
```bash
npm install -g pnpm
```
--------------------------------
### Install Iconify Carbon Icons
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/icons
Install the Carbon icon set from Iconify using pnpm. This is a prerequisite for using Carbon icons with Unocss.
```bash
pnpm add -D @iconify-json/carbon
```
--------------------------------
### Use Built-in Vant Icon
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/icons
Directly use Vant's Icon component for common UI elements. Ensure Vant is installed and configured.
```vue
```
--------------------------------
### Preview production build
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/getting-started
Serves the production build locally for testing at http://localhost:4173/.
```bash
pnpm preview
```
--------------------------------
### Build for production
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/getting-started
Compiles the project for production and outputs files to the dist directory.
```bash
pnpm build
```
--------------------------------
### Clone project locally
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/getting-started
Uses tiged to clone the project template into a new directory and navigates into it.
```bash
npx tiged vue-zone/vue3-vant-mobile my-mobile-app
cd my-mobile-app
```
--------------------------------
### Initialize Dark Mode via Script
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/dark-mode
Inject this script to automatically apply the dark class based on local storage or system preferences.
```ts
```
--------------------------------
### Basic HTML and Body Styles for REM Layout
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/browser-adaptation
Minimal global styles required for REM layout configuration. Ensure an empty `` style is present if not already defined.
```css
html { }
body, p, li {
margin: 0;
/* 省略样式 */
}
/* 省略其它选择器样式 */
```
--------------------------------
### Configure Fixed Theme Mode
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/dark-mode
Force a specific theme by setting the value in the composable file.
```ts
// these APIs are auto-imported from @vueuse/core
useDark().value = false
export const isDark = useDark()
export const toggleDark = useToggle(isDark)
export const preferredDark = usePreferredDark()
```
--------------------------------
### Using Inline PX to VW Conversion in Templates
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/browser-adaptation
Apply the `vw` utility function directly within template styles to convert pixel values to responsive viewport units.
```vue
```
--------------------------------
### PostCSS Configuration for VW Units with Max Display Width
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/browser-adaptation
Enhance desktop accessibility by limiting the viewport unit's maximum width. This prevents excessive scaling on larger screens.
```typescript
postcss: {
plugins: [
viewport({
appSelector: '#app',
viewportWidth: 375,
maxDisplayWidth: 600
}),
]
}
```
--------------------------------
### Configure npm registry
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/getting-started
Sets the npm registry to the npmmirror mirror for faster package downloads.
```bash
npm config set registry https://registry.npmmirror.com
```
--------------------------------
### PostCSS Configuration for VW Units
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/browser-adaptation
Configure PostCSS to convert px units to vw units using the viewport plugin. Set the design draft width to 375px.
```typescript
postcss: {
plugins: [
viewport({
// 最外层选择器
appSelector: '#app',
// 设计稿宽度（Vant 设计稿的尺寸是375）
viewportWidth: 375,
}),
]
}
```
--------------------------------
### Unocss Configuration with REM to PX Preset
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/browser-adaptation
Integrate the `@unocss/preset-rem-to-px` preset into Unocss configuration to convert REM units to PX, facilitating subsequent VW conversion.
```typescript
import presetRemToPx from '@unocss/preset-rem-to-px'
export default defineConfig({
presets: [
...
presetRemToPx({
baseFontSize: 4,
}),
],
})
```
--------------------------------
### PostCSS Configuration for REM Layout
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/browser-adaptation
Configure PostCSS for REM layout adaptation, ensuring compatibility with older devices and limiting maximum view width.
```typescript
// vite.config.ts
postcss: {
plugins: [
viewport({
appSelector: '#app',
viewportWidth: 375,
maxDisplayWidth: 600,
mobileUnit: 'rem',
}),
]
}
```
--------------------------------
### Define Dark Mode Composables
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/dark-mode
Structure for the dark.ts file to manage theme state using VueUse auto-imports.
```text
src/composables/
└── composables/
└── dark.ts
```
```ts
// these APIs are auto-imported from @vueuse/core
export const isDark = useDark()
export const toggleDark = useToggle(isDark)
export const preferredDark = usePreferredDark()
```
--------------------------------
### Access Dark Mode State
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/dark-mode
Retrieve the current theme mode or user preference.
```ts
const mode = isDark.value ? 'dark' : 'light'
```
```ts
const userPreferredDark = preferredDark.value ? 'dark' : 'light'
```
--------------------------------
### Toggle Dark Mode
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/dark-mode
Trigger the theme switch function.
```ts
toggleDark()
```
--------------------------------
### Utility Function for Inline PX to VW Conversion
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/browser-adaptation
A runtime utility function to convert inline pixel values to viewport units, ensuring responsiveness for inline styles.
```typescript
// src/utils/inline-px-to-vw.ts
...
export default function vw(n: number) {
if (n === 0)
return n
const vwN = round(n * 100 / idealWidth, 3)
const maxN = round(n * maxWidth / idealWidth, 3)
const cssF = n > 0 ? 'min' : 'max'
return `${cssF}(${vwN}vw, ${maxN}px)`
}
```
--------------------------------
### Use Iconify Icons with Unocss
Source: https://vue-zone.github.io/docs/vue3-vant-mobile/icons
Apply Iconify icons directly in your Vue templates using Unocss class syntax. Supports dark mode variants.
```vue
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.