# npm安裝（推薦）
npm install @vueuse/core
# yarn安裝
yarn add @vueuse/core

<script setup>
// 引入工具（按需引入，不浪費(fèi)體積）
import { useLocalStorage } from '@vueuse/core'
import { ref } from 'vue'

// 用法：參數(shù)1=存儲(chǔ)key，參數(shù)2=默認(rèn)值（自動(dòng)響應(yīng)式）
const userInfo = useLocalStorage('userInfo', { name: '測試', age: 20 })
const token = useLocalStorage('token', '')

// 直接修改，自動(dòng)同步到localStorage（無需手動(dòng)setItem）
const updateUser = () => {
  userInfo.value.name = '新名字' // 自動(dòng)同步到localStorage
  token.value = 'abc123456' // 自動(dòng)同步
}

// 清空存儲(chǔ)
const clearStorage = () => {
  userInfo.value = null
  token.value = ''
}
</script>

<template>
  <div>
    <p>用戶名：{{ userInfo.name }}</p>
    <button @click="updateUser">修改用戶信息</button>
    <button @click="clearStorage">清空存儲(chǔ)</button>
  </div>
</template>

<script setup>
import { useDebounceFn } from '@vueuse/core'
import { ref } from 'vue'

const inputVal = ref('')

// 防抖方法：參數(shù)1=要防抖的函數(shù)，參數(shù)2=防抖時(shí)間（ms）
const search = useDebounceFn((val) => {
  // 模擬搜索接口請(qǐng)求（防抖后，輸入停止500ms才觸發(fā)）
  console.log('搜索關(guān)鍵詞：', val)
}, 500)

// 輸入框輸入時(shí)觸發(fā)防抖方法
const handleInput = (e) => {
  inputVal.value = e.target.value
  search(inputVal.value)
}
</script>

<template>
  <input 
    v-model="inputVal" 
    placeholder="請(qǐng)輸入搜索關(guān)鍵詞"
    @input="handleInput"
  />
</template>

<script setup>
import { useThrottleFn } from '@vueuse/core'

// 節(jié)流方法：每隔1000ms只能觸發(fā)一次
const handleScroll = useThrottleFn(() => {
  console.log('滾動(dòng)事件觸發(fā)（節(jié)流）：', window.scrollY)
}, 1000)

// 監(jiān)聽滾動(dòng)事件
window.addEventListener('scroll', handleScroll)

// 組件卸載時(shí)移除監(jiān)聽（避免內(nèi)存泄漏）
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<script setup>
import { useWindowSize } from '@vueuse/core'

// 自動(dòng)監(jiān)聽窗口寬高，響應(yīng)式變化
const { width, height } = useWindowSize()

// 可直接判斷設(shè)備類型（比如移動(dòng)端寬小于768px）
const isMobile = computed(() => {
  return width.value < 768
})
</script>

<template>
  <div>
    <p>窗口寬度：{{ width }}px</p>
    <p>窗口高度：{{ height }}px</p>
    <p v-if="isMobile">當(dāng)前為移動(dòng)端布局</p>
    <p v-else>當(dāng)前為PC端布局</p>
  </div>
</template>

# npm安裝（推薦）
npm install vue-i18n@9
# yarn安裝
yarn add vue-i18n@9

// src/lang/zh-CN.js（中文）
export default {
  home: '首頁',
  about: '關(guān)于我們',
  login: '登錄',
  username: '用戶名',
  password: '密碼',
  submit: '提交',
  switchLang: '切換語言'
}

// src/lang/en-US.js（英文）
export default {
  home: 'Home',
  about: 'About Us',
  login: 'Login',
  username: 'Username',
  password: 'Password',
  submit: 'Submit',
  switchLang: 'Switch Language'
}

// src/lang/index.js
import { createI18n } from 'vue-i18n'
// 引入多語言文件
import zhCN from './zh-CN'
import enUS from './en-US'

// 創(chuàng)建i18n實(shí)例
const i18n = createI18n({
  legacy: false, // 必須設(shè)為false，適配Vue3的<script setup>語法糖
  locale: 'zh-CN', // 默認(rèn)語言（中文）
  fallbackLocale: 'en-US', // 備用語言（當(dāng)默認(rèn)語言沒有對(duì)應(yīng)翻譯時(shí)，使用英文）
  messages: {
    'zh-CN': zhCN, // 中文語言包
    'en-US': enUS  // 英文語言包
  }
})

export default i18n

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import i18n from './lang' // 引入i18n配置

const app = createApp(App)
app.use(i18n) // 全局注冊(cè)i18n
app.mount('#app')

<script setup>
// 引入useI18n，獲取翻譯方法和語言切換方法
import { useI18n } from 'vue-i18n'

// 解構(gòu)t（翻譯方法）、locale（當(dāng)前語言）、setLocale（切換語言）
const { t, locale, setLocale } = useI18n()

// 切換語言方法（中文 ? 英文）
const switchLanguage = () => {
  if (locale.value === 'zh-CN') {
    setLocale('en-US') // 切換為英文
  } else {
    setLocale('zh-CN') // 切換為中文
  }
}
</script>

<template>
  <div class="lang-demo">
    <h1>{{ t('home') }}</h1>
    <div class="login-form">
      <label>{{ t('username') }}：</label>
      <input placeholder="{{ t('username') }}" />
      
      <label>{{ t('password') }}：</label>
      <input type="password" placeholder="{{ t('password') }}" />
      
      <button @click="switchLanguage">{{ t('switchLang') }}</button>
      <button>{{ t('submit') }}</button>
    </div>
  </div>
</template>

# npm安裝（推薦）
npm install vant
# yarn安裝
yarn add vant

// main.js
import { createApp } from 'vue'
import App from './App.vue'
// 1. 引入Vant核心和樣式
import Vant from 'vant'
import 'vant/lib/index.css'

const app = createApp(App)
app.use(Vant) // 全局注冊(cè)Vant，所有組件可直接使用
app.mount('#app')

<template>
  <div class="button-demo">
    <!-- 基礎(chǔ)按鈕 -->
    <van-button>默認(rèn)按鈕</van-button>
    
    <!-- 不同類型按鈕（主色/成功/危險(xiǎn)） -->
    <van-button type="primary">主色按鈕</van-button>
    <van-button type="success">成功按鈕</van-button>
    <van-button type="danger">危險(xiǎn)按鈕</van-button>
    
    <!-- 禁用狀態(tài)/加載狀態(tài) -->
    <van-button disabled>禁用按鈕</van-button>
    <van-button loading>加載中按鈕</van-button>
    
    <!-- 自定義大小/顏色 -->
    <van-button size="small">小尺寸按鈕</van-button>
    <van-button color="#42b983">自定義顏色按鈕</van-button>
  </div>
</template>

<template>
  <!-- 輪播組件（自動(dòng)播放、指示器、點(diǎn)擊切換） -->
  <van-swipe class="swipe-demo" autoplay interval="3000" indicator-color="#fff">
    <van-swipe-item>
      <img src="/images/banner1.jpg" alt="輪播圖1" class="swipe-img" />
    </van-swipe-item>
    <van-swipe-item>
      <img src="/images/banner2.jpg" alt="輪播圖2" class="swipe-img" />
    </van-swipe-item>
    <van-swipe-item>
      <img src="/images/banner3.jpg" alt="輪播圖3" class="swipe-img" />
    </van-swipe-item>
  </van-swipe>
</template>

<style scoped>
.swipe-demo {
  height: 180px; /* 移動(dòng)端輪播圖常用高度 */
}
.swipe-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 圖片自適應(yīng)，不拉伸 */
}
</style>

<script setup>
import { ref } from 'vue'
import { useToast } from 'vant' // 引入Vant的提示組件（配合表單校驗(yàn)）

const toast = useToast()
// 表單數(shù)據(jù)
const form = ref({
  username: '',
  password: ''
})

// 表單校驗(yàn)+提交
const handleSubmit = () => {
  if (!form.value.username) {
    toast('請(qǐng)輸入用戶名')
    return
  }
  if (!form.value.password) {
    toast('請(qǐng)輸入密碼')
    return
  }
  // 校驗(yàn)通過，提交表單（模擬登錄接口）
  console.log('表單提交：', form.value)
  toast.success('登錄成功')
}
</script>

<template>
  <div class="form-demo">
    <van-form @submit="handleSubmit">
      <van-field
        v-model="form.username"
        label="用戶名"
        placeholder="請(qǐng)輸入用戶名"
        required
      />
      <van-field
        v-model="form.password"
        label="密碼"
        type="password"
        placeholder="請(qǐng)輸入密碼"
        required
      />
      <van-button type="primary" block native-type="submit">登錄</van-button>
    </van-form>
  </div>
</template>

<!-- public/index.html 必須添加viewport配置（移動(dòng)端適配） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">