# 1. 创建项目
npm create vite@latest my-vue-app -- --template vue

# 2. 进入目录并安装依赖
cd my-vue-app
npm install

# 3. 启动开发服务器
npm run dev

<template>
  <!-- HTML模板，只能有一个根元素 -->
  <div>
    <h1>{{ title }}</h1>
    <button @click="count++">计数：{{ count }}</button>
  </div>
</template>

<script setup>
// 这里是脚本，使用 Composition API（推荐）
import { ref } from 'vue'

const title = ref('Hello Vue')
const count = ref(0)
</script>

<style scoped>
/* CSS，scoped表示只作用于当前组件 */
h1 { color: blue; }
</style>

<script setup>
import { ref, reactive } from 'vue'

// 基本类型用 ref
const count = ref(0)

// 对象/数组用 reactive（更方便）
const state = reactive({
  name: '张三',
  list: [1, 2, 3]
})
</script>

<template>
  <p>计数：{{ count }}</p>
  <p>姓名：{{ state.name }}</p>
  <button @click="count++">+1</button>
  <button @click="state.list.push(4)">添加</button>
</template>

<template>
  <div v-if="loggedIn">欢迎回来！</div>
  <div v-else>请登录</div>

  <ul>
    <li v-for="item in list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
import { ref, computed } from 'vue'

const list = ref([1, 2, 3, 4])
const evenList = computed(() => list.value.filter(n => n % 2 === 0))
</script>

<template>
  <p>偶数：{{ evenList }}</p>
</template>

<script setup>
const handleClick = () => {
  alert('点击了！')
}
</script>

<template>
  <button @click="handleClick">点我</button>
  <!-- 传参 -->
  <button @click="add($event, 5)">加5</button>
</template>

创建阶段 → 挂载阶段 → 更新阶段 → 销毁阶段

<script>
export default {
  data() {
    return { count: 0 }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created：数据已初始化，可以发请求')
    // 常见：this.axios.get(...)
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted：DOM 已插入，可以操作 DOM')
    // 常见：获取 DOM 元素、第三方库初始化
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted：彻底清理')
    // 常见：clearInterval、removeEventListener
  }
}
</script>

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'

onBeforeMount(() => console.log('onBeforeMount'))
onMounted(() => {
  console.log('onMounted：最常用，发请求、操作 DOM')
  // 这里发 axios 请求
})
onBeforeUpdate(() => console.log('onBeforeUpdate'))
onUpdated(() => console.log('onUpdated（慎用）'))
onBeforeUnmount(() => console.log('onBeforeUnmount'))
onUnmounted(() => {
  console.log('onUnmounted：清理资源')
  // 清理定时器、订阅等
})
</script>

<script setup>
defineProps({
  msg: String,
  count: Number
})
</script>

<template>
  <p>收到：{{ msg }}，数字：{{ count }}</p>
</template>

<template>
  <Child msg="hello" :count="123" />
</template>

<script setup>
const emit = defineEmits(['update'])
const send = () => emit('update', '新数据')
</script>

<template>
  <button @click="send">发送</button>
</template>

<Child @update="handleUpdate" />

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

export default router

import router from './router'
app.use(router)

<router-link to="/about">去关于页</router-link>
<router-view />  <!-- 这里渲染对应组件 -->

import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: state => state.count * 2
  },
  actions: {
    increment() { this.count++ }
  }
})

<script setup>
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()

// 直接用
counter.increment()
</script>

<template>
  <p>计数：{{ counter.count }}，双倍：{{ counter.double }}</p>
</template>