VueZone

https://vue-zone.github.io/docs
Admin
VueZone is an open-source template organization for building ready-to-use Vue 3 mobile and admin...
Tokens:3,922
Snippets:65
Trust Score:9.7
Update:6 months ago
Show doc for...
Tokens:
Raw
### 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
<h1 class="text-6xl color-pink font-semibold">
  Hello, Unocss!
</h1>

<p class="mt-4 text-gray-700 dark:text-white">
  This is a simple example of Unocss in action.
</p>
```

--------------------------------

### 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
<van-icon name="chat-o" />
```

--------------------------------

### 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
<script>
  ;(function () {
    const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
    const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'
    if (setting === 'dark' || (prefersDark && setting !== 'light'))
      document.documentElement.classList.toggle('dark', true)
  })()
</script>
```

--------------------------------

### 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 `<html>` 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
<div :style="`width: ${vw(width)}; height: ${vw(height)}`"></div>
```

--------------------------------

### 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
<!-- Sun in light mode, Moon in dark mode, from Carbon -->
<button class="i-carbon-sun dark:i-carbon-moon" />
```
Tokens:
Raw