# Vue CLI
npm install -g @vue/cli
vue create my-project

# Vite (推荐)
npm create vue@latest
# 或
npm init vue@latest

<template>
  <!-- 文本插值 -->
  <span>{{ message }}</span>

  <!-- 指令 -->
  <p v-if="seen">Now you see me</p>
  <a v-bind:href="url">Link</a>
  <button v-on:click="doSomething">Click</button>
  <input v-model="inputValue" />

  <!-- 列表渲染 -->
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</template>

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

// ref - 基本类型
const count = ref(0)
count.value++

// reactive - 对象
const state = reactive({ count: 0 })
state.count++

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

<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件已挂载')
})

onUnmounted(() => {
  console.log('组件已卸载')
})
</script>

<!-- 父组件 -->
<Child :msg="parentMsg" @update="handleUpdate" />

<!-- 子组件 -->
<script setup>
defineProps(['msg'])
const emit = defineEmits(['update'])

const sendToParent = () => {
  emit('update', 'new value')
}
</script>

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

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

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

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