create-vue 与 TypeScript
npm create vue@latest 用官方脚手架初始化项目：交互式选择是否启用 TypeScript、Router、Pinia、Vitest、ESLint。生成的项目基于 Vite，开发服务器秒级启动、改代码即时热更新（HMR）。
单文件组件（.vue）把模板、脚本、样式写在一个文件里：<template> 放结构、<script setup> 放逻辑（语法糖，无需 return）、<style scoped> 让样式只作用于当前组件。TypeScript 配合主要是 defineProps<T>() 泛型声明与 ref<number>() 类型标注。
- create vue 脚手架可选 TS/Router/Pinia/测试，基于 Vite
- <script setup> 中声明的变量自动暴露给模板，无需 return
- TS 增强：defineProps<{ msg: string }>()、ref
(0)
HTML
<!-- 单文件组件示例：MyCounter.vue（项目结构中最常见的文件形态） --> <!-- 1. 模板：结构 --> <template> <div class="counter"> <p>{{ msg }}：{{ count }}</p> <button @click="count++">+1</button> </div> </template> <!-- 2. 脚本：逻辑（setup 语法糖） --> <script setup lang="ts"> import { ref, computed } from 'vue'; // defineProps 泛型声明：父组件必传 msg const props = defineProps<{ msg: string }>(); // 类型化 ref const count = ref<number>(0); const double = computed(() => count.value * 2); </script> <!-- 3. 样式：scoped 仅作用于本组件 --> <style scoped> .counter { border: 1px solid #42b883; padding: 12px; } .counter button { color: #42b883; } </style>
HTML
<!-- 终端命令 --> <!-- 创建项目 --> npm create vue@latest my-app <!-- 选项：TypeScript? Yes / Vue Router? Yes / Pinia? Yes --> cd my-app npm install <!-- 安装依赖 --> npm run dev <!-- 启动开发服务器（Vite） --> npm run build <!-- 打包到 dist/ 部署 -->
本节要点工程化起点：create-vue 生成项目；.vue 三段式 template/script setup/style scoped 是日常开发形态。
