搭建 Vue 3 开发环境，理解 Vite 与 SFC——Vue 基础，第 1 篇
📅
npm create vite@latestproject name: 输入项目名称，例如 my-vue-app。Select a framework: 用方向键选择 Vue，再按回车。Select a variant: 在 JavaScript 和 TypeScript 中选择一种。本次练习建议选 JavaScript。cd my-vue-app
npm installnpm install 用于下载并安装项目所需的依赖包。
安装完成后，就可以启动开发服务器。npm run devhttp://localhost:5173 的地址。
在浏览器中打开该地址，就能看到“You did it!”的提示以及旋转的 Vue 标志。.vue 文件编写.vue 文件都是一个独立的组件。
一个文件可以同时包含 HTML、JavaScript 和 CSS，把相关代码放在一起，便于管理。src/components/HelloWorld.vue，应该能看到类似以下结构。<script setup>
// JavaScript 로직이 들어가는 부분
// 컴포넌트의 데이터, 함수 등을 정의합니다.
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
</div>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</template>
<style scoped>
/* CSS 스타일이 들어가는 부분 */
/* `scoped` 속성을 사용하면 이 스타일은 현재 컴포넌트에만 적용됩니다. */
.read-the-docs {
color: #888;
}
</style><template> 🔗template 内的特殊语法（例如 {{ }}）将数据呈现在界面上。<script setup> 🔗setup 属性可以更简洁地编写组件逻辑。
使用 setup 时，这段代码就像在创建组件时执行一次的函数，可以在其中声明响应式数据并定义函数。<style scoped> 🔗scoped 属性。
添加 scoped 后，这个 <style> 标签里的 CSS 规则.vue 单文件组件（SFC）中各个部分的用途。
SFC 有助于有条理地管理 Vue 项目，提高开发效率。下一篇将深入介绍 Vue 模板语法，学习如何在界面上显示数据并处理用户输入。