Vue 学习笔记#

import { ref } from 'vue'

const count = ref(0)       // 数字
const name = ref('Vue')    // 字符串
const isActive = ref(true) // 布尔

// 访问/修改：需要 .value
console.log(count.value)   // 0
count.value++              // 1

// 在模板中自动解包，不需要 .value
// <p>{{ count }}</p>

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  user: { name: '张三', age: 25 }
})

// 直接访问，不需要 .value
state.count++
state.user.age = 26

// 注意：reactive 只对对象类型有效
// const num = reactive(0)  // 无效

// useCounter.js — 可复用的计数器逻辑
import { ref } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const increment = () => count.value++
  const decrement = () => count.value--
  const reset = () => count.value = initialValue

  return { count, increment, decrement, reset }
}

// useFetch.js — 数据请求
import { ref, onMounted } from 'vue'

export function useFetch(url) {
  const data = ref(null)
  const error = ref(null)
  const loading = ref(true)

  async function fetchData() {
    loading.value = true
    error.value = null
    try {
      const res = await fetch(url)
      data.value = await res.json()
    } catch (e) {
      error.value = e.message
    } finally {
      loading.value = false
    }
  }

  onMounted(fetchData)

  return { data, error, loading, refresh: fetchData }
}

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 注册全局指令
app.directive('focus', {
  mounted: (el) => el.focus()
})

// 常用：v-permission 权限控制
app.directive('permission', {
  mounted: (el, binding) => {
    if (!checkPermission(binding.value)) {
      el.parentNode.removeChild(el)
    }
  }
})

app.mount('#app')

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', name: 'home', component: () => import('../views/Home.vue') },
  { path: '/about', name: 'about', component: () => import('../views/About.vue') },
  { path: '/user/:id', name: 'user', component: () => import('../views/User.vue'), props: true },
  { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('../views/NotFound.vue') }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

// 全局前置守卫
router.beforeEach((to, from, next) => {
  const isAuthenticated = localStorage.getItem('token')
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

// 路由独享守卫
{
  path: '/admin',
  component: Admin,
  beforeEnter: (to, from, next) => {
    if (isAdmin()) next()
    else next('/403')
  }
}

// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

// stores/counter.js
import { defineStore } from 'pinia'

// 方式 1：Options Store
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    history: []
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
    // 访问其他 getter
    doubleCountPlusOne() {
      return this.doubleCount + 1
    }
  },
  actions: {
    increment() {
      this.count++
      this.history.push('increment')
    },
    async fetchData() {
      const res = await fetch('/api/data')
      this.count = await res.json()
    }
  }
})

// 方式 2：Setup Store（推荐，更灵活）
import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const history = ref([])

  const doubleCount = computed(() => count.value * 2)

  function increment() {
    count.value++
    history.value.push('increment')
  }

  return { count, history, doubleCount, increment }
})

import { useMouse, useLocalStorage, useDebounceFn, useEventListener, useDark, useToggle } from '@vueuse/core'

// 鼠标位置
const { x, y } = useMouse()

// 本地存储（自动序列化/反序列化，响应式）
const settings = useLocalStorage('settings', { theme: 'dark', lang: 'zh' })

// 防抖函数
const debouncedSearch = useDebounceFn((keyword) => {
  console.log('搜索：', keyword)
}, 500)

// 事件监听（自动清理）
useEventListener(window, 'scroll', () => {
  console.log('滚动位置：', window.scrollY)
})

// 暗黑模式
const isDark = useDark()
const toggleDark = useToggle(isDark)

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { fileURLToPath, URL } from 'node:url'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    port: 3000,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  },
  build: {
    outDir: 'dist',
    chunkSizeWarningLimit: 1000,
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor': ['vue', 'vue-router', 'pinia']
        }
      }
    }
  }
})

// 使用环境变量
const apiUrl = import.meta.env.VITE_API_URL

// api/request.js
import axios from 'axios'
import { useUserStore } from '@/stores/user'

const request = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  timeout: 10000
})

// 请求拦截器
request.interceptors.request.use((config) => {
  const userStore = useUserStore()
  if (userStore.token) {
    config.headers.Authorization = `Bearer ${userStore.token}`
  }
  return config
})

// 响应拦截器
request.interceptors.response.use(
  (response) => response.data,
  (error) => {
    if (error.response?.status === 401) {
      // 跳转登录
    }
    return Promise.reject(error)
  }
)

export default request

// 所有路由组件使用动态 import，按需加载
const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: () => import('@/views/About.vue') }
]

import { defineAsyncComponent } from 'vue'

const HeavyChart = defineAsyncComponent({
  loader: () => import('@/components/HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorDisplay,
  delay: 200,
  timeout: 10000
})