2-1 Vite 建项目 + 单文件组件(SFC)+ <script setup>

从这一章开始,我们告别「CDN + 单 HTML」,进入公司里真正的前端开发方式:用 Vite 搭工程、用 .vue 单文件组件写代码。

本部分配套了一个完整可运行的项目:02-工程化/vue-demo/。装好 Node 后即可跑起来,边读讲义边看真实代码。

---

1. 先装 Node.js

Vite、npm 都依赖 Node.js。

1. 去 https://nodejs.org 下载 LTS 版(长期支持版),一路下一步装好。
2. 验证:打开终端(Windows 用 PowerShell 或 CMD),输入:

   node -v     # 显示版本号如 v20.x 即成功
   npm -v      # npm 是包管理器,随 Node 一起装好

后端类比:Node.js ≈ 运行时(像 JDK);npm ≈ 依赖管理 + 构建工具(像 Maven/Gradle);package.json ≈ pom.xml。

---

2. Vite 是什么

Vite 是现代前端构建工具:启动快、热更新快(改代码浏览器秒刷新)。公司新项目几乎都用它。

后端类比:Vite ≈ 开发服务器 + 打包器。npm run dev 起一个本地服务器跑你的页面;npm run build 把代码打包成可部署的静态文件。

---

3. 跑起来配套项目

进入项目目录,装依赖,启动:

cd 02-工程化/vue-demo     # 进入项目目录
npm install               # 安装 package.json 里的依赖(第一次较慢,需联网)
npm run dev               # 启动开发服务器

终端会显示一个地址,如 http://localhost:5173。浏览器打开它,就能看到项目页面。改任意 .vue 文件保存,页面自动刷新(热更新)。

如果你想自己从零建一个新项目,标准命令是:

npm create vite@latest 我的项目名 -- --template vue

然后 cd 进去 npm install。本教程已经帮你建好 vue-demo,直接用即可。

---

4. 项目结构(对照 vue-demo)

vue-demo/
├── index.html          ← 入口 HTML,只有一个 <div id="app">
├── package.json        ← 依赖和脚本(≈ pom.xml)
├── vite.config.js      ← Vite 配置
└── src/                ← 我们写的代码都在这
    ├── main.js         ← 程序入口:创建 app、装插件、挂载
    ├── App.vue         ← 根组件
    ├── style.css       ← 全局样式
    ├── router/         ← 路由配置(2-2 讲)
    ├── stores/         ← Pinia 状态(2-3 讲)
    ├── api/            ← axios 封装(2-4 讲)
    ├── components/     ← 可复用组件
    └── views/          ← 页面级组件

入口:main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import './style.css'

const app = createApp(App)
app.use(createPinia())   // 装 Pinia 插件
app.use(router)          // 装路由插件
app.mount('#app')        // 挂载到 index.html 的 #app

对比 1-1 的 CDN 写法,本质一样:createApp(根组件).mount('#app'),只是根组件从内联对象变成了 App.vue 文件,并多了 app.use(插件)。

---

5. 单文件组件(SFC):.vue 文件

一个 .vue 文件 = 一个组件,内含三块:

<script setup>
// JS 逻辑(数据、方法、import 别的组件)
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <!-- HTML 模板 -->
  <button @click="count++">点了 {{ count }} 次</button>
</template>

<style scoped>
/* CSS 样式;scoped 表示只作用于本组件,不污染别处 */
button { color: #42b883; }
</style>

三块各司其职:<script> 逻辑、<template> 结构、<style> 样式。比 CDN 方式清爽太多。

<script setup> 的好处

注意上面没有写 setup() { return {...} }。<script setup> 是语法糖:

• 顶层声明的变量、函数,模板里直接能用,不用手动 return。
• import 进来的组件,模板里直接当标签用,不用注册。

对比 1-1 的写法,代码量少一半。这是 Vue 3 当前最主流的写法,本教程后面全用它。

<style scoped>

加了 scoped,这段样式只对当前组件生效,不会意外影响别的组件。项目里几乎都加 scoped,避免样式冲突。

---

6. 在组件里使用别的组件

<script setup>
import MyButton from './components/MyButton.vue'  // import 进来
</script>

<template>
  <MyButton />   <!-- 直接用,无需注册 -->
</template>

打开 vue-demo/src/App.vue 和 src/components/MyButton.vue 对照看。

---

动手练习

1. 跑起 vue-demo(npm install → npm run dev),浏览器打开看到首页。
2. 打开 src/views/HomeView.vue,改一句标题文字,保存,看浏览器自动刷新。
3. 在 HomeView.vue 的 <script setup> 里加 const today = new Date().toLocaleDateString(),在模板里 显示出来。
4. 体会:你只在顶层声明了 today,模板就能直接用(<script setup> 的便利)。

---

小结

• Node.js + Vite 是工程化基础:npm install 装依赖,npm run dev 起服务,npm run build 打包。
• .vue 单文件组件 = <script setup> + <template> + <style scoped>。
• <script setup> 顶层声明的东西,模板直接用,无需 return / 注册。
• main.js 是入口,app.use() 装插件(路由、Pinia)。

➡️ 下一章:2-2 Vue Router 路由