Vue 学习指南

# 使用 Vue CLI
npm create vue@latest my-vue-app
 
# 使用 Vite (推荐)
npm create vite@latest my-vue-app -- --template vue
 
# 使用 Nuxt.js
npx nuxi@latest init my-nuxt-app

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <p v-if="showText">Welcome to Vue!</p>
    <button @click="incrementCount">Count: {{ count }}</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue'
 
const message = ref('Hello, Vue!')
const count = ref(0)
const showText = ref(true)
 
const incrementCount = () => {
  count.value++
}
</script>

<!-- 单文件组件 (SFC) -->
<template>
  <div class="welcome">
    <h2>Hello, {{ name }}!</h2>
    <slot>默认内容</slot>
  </div>
</template>
 
<script setup>
defineProps({
  name: {
    type: String,
    required: true
  }
})
</script>
 
<style scoped>
.welcome {
  padding: 20px;
  border: 1px solid #ddd;
}
</style>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>User: {{ user.name }} - {{ user.age }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
 
<script setup>
import { ref, reactive } from 'vue'
 
// ref 用于基本类型
const count = ref(0)
 
// reactive 用于对象
const user = reactive({
  name: 'John',
  age: 25
})
 
const increment = () => {
  count.value++
  user.age++
}
</script>

<template>
  <div>
    <input v-model="firstName" placeholder="First name" />
    <input v-model="lastName" placeholder="Last name" />
    <p>Full name: {{ fullName }}</p>
    <p>Name length: {{ nameLength }}</p>
  </div>
</template>
 
<script setup>
import { ref, computed } from 'vue'
 
const firstName = ref('')
const lastName = ref('')
 
// 计算属性
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`.trim()
})
 
const nameLength = computed(() => fullName.value.length)
</script>

<script setup>
import { ref, watch, watchEffect } from 'vue'
 
const count = ref(0)
const message = ref('')
 
// 侦听特定数据
watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`)
  message.value = `Count is now ${newValue}`
})
 
// 自动侦听依赖
watchEffect(() => {
  console.log(`Count is ${count.value}`)
  if (count.value > 10) {
    message.value = 'Count is too high!'
  }
})
</script>

<script setup>
import { defineAsyncComponent } from 'vue'
 
// 异步组件
const AsyncComponent = defineAsyncComponent(() => 
  import('./HeavyComponent.vue')
)
</script>
 
<template>
  <AsyncComponent />
</template>

<template>
  <div v-memo="[user.id, user.name]">
    <!-- 只有当 user.id 或 user.name 改变时才重新渲染 -->
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
 
const LazyComponent = defineAsyncComponent({
  loader: () => import('./LazyComponent.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})
</script>

npm install pinia

// stores/counter.js
import { defineStore } from 'pinia'
 
export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
    name: 'Counter'
  }),
  
  getters: {
    doubleCount: (state) => state.count * 2,
    doubleCountPlusOne() {
      return this.doubleCount + 1
    }
  },
  
  actions: {
    increment() {
      this.count++
    },
    async fetchCount() {
      const response = await fetch('/api/count')
      this.count = await response.json()
    }
  }
})

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">Increment</button>
  </div>
</template>
 
<script setup>
import { useCounterStore } from '@/stores/counter'
 
const counter = useCounterStore()
</script>

// store/index.js
import { createStore } from 'vuex'
 
export default createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    async incrementAsync({ commit }) {
      await new Promise(resolve => setTimeout(resolve, 1000))
      commit('increment')
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  }
})

npm install vue-router@4

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '@/views/Home.vue'
 
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('@/views/About.vue')
  },
  {
    path: '/user/:id',
    name: 'User',
    component: () => import('@/views/User.vue'),
    props: true
  }
]
 
const router = createRouter({
  history: createWebHistory(),
  routes
})
 
export default router

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
  
  <router-view />
</template>

npm install @vue/test-utils vitest

<script setup>
import { ref } from 'vue'
 
const count = ref(0)
const increment = () => count.value++
</script>
 
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

// Counter.test.js
import { mount } from '@vue/test-utils'
import Counter from './Counter.vue'
 
describe('Counter', () => {
  test('increments count when button is clicked', async () => {
    const wrapper = mount(Counter)
    
    expect(wrapper.text()).toContain('Count: 0')
    
    await wrapper.find('button').trigger('click')
    
    expect(wrapper.text()).toContain('Count: 1')
  })
})

<!-- 好的组件设计 -->
<template>
  <div class="user-card">
    <img :src="user.avatar" :alt="user.name" />
    <h3>{{ user.name }}</h3>
    <p>{{ user.email }}</p>
    <slot name="actions" />
  </div>
</template>
 
<script setup>
// 明确的 props 定义
const props = defineProps({
  user: {
    type: Object,
    required: true,
    validator: (value) => {
      return value.name && value.email
    }
  }
})
 
// 明确的事件定义
const emit = defineEmits(['edit', 'delete'])
</script>