Vue3开发环境搭建与基础语法

一、Vite4极速脚手架创建项目（对比Vue CLI）

1.1 Vite4快速创建

npm create vite@latest my-vue-app -- --template vue
cd my-vue-app
npm install
npm run dev

优势对比：

• 冷启动速度：Vite <1s vs Vue CLI 10s+
• 热更新：Vite保持ESM模块热替换 vs Webpack打包更新
• 构建工具：Vite基于Rollup vs Vue CLI基于Webpack

1.2 与Vue CLI创建对比

# Vue CLI方式（已不推荐新项目使用）
npm install -g @vue/cli
vue create my-old-app

项目创建参数对比：

二、项目结构解析：SFC架构

2.1 核心目录结构

├── src/
│   ├── assets/        # 静态资源
│   ├── components/    # 组件目录
│   ├── App.vue        # 根组件
│   └── main.js        # 入口文件
├── public/            # 公共资源
├── vite.config.js     # Vite配置
└── package.json       # 项目配置

2.2 单文件组件(SFC)结构

<template>
  <!-- HTML模板 -->
  <div>{{ message }}</div>
</template>

<script setup>
// 组合式API
const message = ref('Hello Vue3!')
</script>

<style scoped>
/* 局部样式 */
div {
  color: #42b983;
}
</style>

三、模板语法基础

3.1 数据插值

<template>
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p>
</template>

<script setup>
const message = ref('Hello World')
const reversedMessage = computed(() => message.value.split('').reverse().join(''))
</script>

3.2 常用指令

<template>
  <!-- 条件渲染 -->
  <div v-if="show">可见内容</div>
  
  <!-- 列表渲染 -->
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
  
  <!-- 表单绑定 -->
  <input v-model="inputText" type="text">
</template>

<script setup>
const show = ref(true)
const items = ref([{id:1, name:'Item1'}, {id:2, name:'Item2'}])
const inputText = ref('')
</script>

四、事件绑定与处理

4.1 基础事件绑定

<template>
  <button @click="count++">Add +1</button>
  <p>Count: {{ count }}</p>
  
  <button @click="greet">Greet</button>
</template>

<script setup>
const count = ref(0)
const greet = () => alert('Hello Vue3!')
</script>

4.2 事件修饰符

<template>
  <!-- 阻止默认行为 -->
  <form @submit.prevent="onSubmit">
  
  <!-- 按键修饰符 -->
  <input @keyup.enter="submitForm">
  
  <!-- 链式修饰符 -->
  <div @click.stop.prevent="doSomething"></div>
</template>