VUE

0. 命令集

测试：npm run dev 发布：npm run build 版本：npm list vue

环境搭建：准备“工作台”

• 安装 Node.js：这是前端开发的基石。
• 去 Node.js 官网 下载 LTS（长期支持） 版本。
• 安装完后，打开终端（Windows 用 PowerShell，Mac 用终端），输入 node -v，看到数字版本号就说明装好了。

初始化项目：拆开“积木包”

我们不需要从零开始建文件夹，Vue 官方提供了一个快速生成模版的工具。

1. 在你想放代码的地方打开终端。
2. 输入以下命令（这是目前最快、最现代的搭建方式）：

   npm create vue@latest
   

3. 跟着提示走：
4. Project name: 输入 my-vue-app

5. 其他选项（TypeScript, Router 等）暂时全部选 No（按回车即可）。

6. 进入文件夹并安装依赖：

   cd my-vue-app
   npm install
   

   这一步是在下载 Vue 运行需要的各种小零件。

---

编写代码：按照“图纸”拼装

现在用 VS Code 打开 my-vue-app 文件夹。你会看到很多文件，我们只看最核心的一个：src/App.vue。

Vue 的核心逻辑是 SFC（单文件组件），就像一根火腿肠分三段：

• <script>：写逻辑（大脑）。
• <template>：写 HTML 结构（骨架）。
• <style>：写 CSS 样式（衣服）。

你可以把 App.vue 的内容全部删掉，换成这段最简单的代码：

代码段

<template>
  <div class="container">
    <h1>{{ message }}</h1>
    <button @click="changeText">点我试试</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 定义一个响应式变量（数据）
const message = ref('你好，Vue！')

// 定义一个函数（逻辑）
const changeText = () => {
  message.value = '太棒了，你已经学会了最简单的 Vue！'
}
</script>

<style scoped>
.container {
  text-align: center;
  margin-top: 50px;
  font-family: Arial, sans-serif;
}
button {
  padding: 10px 20px;
  cursor: pointer;
}
</style>

---

本地测试：先在自家厨房试吃

代码写好了，我们需要运行一个本地服务器来看看效果。

1. 在终端输入：

npm run dev

2. 你会看到一个网址（通常是 http://localhost:5173/）。

1. 按住 Ctrl/Command 点击这个链接，或者手动在浏览器打开。 你会看到： 页面上显示“你好，Vue！”，点击按钮后文字会瞬间改变。这就是 Vue 的“响应式”魅力——数据变了，页面自动跟着变。

---

发布到服务器：摆上“展示柜”

当你想让全世界看到你的作品时，需要执行以下两步：

第一步：打包

在终端输入：

Bash

npm run build

执行完后，你的项目里会多出一个 dist 文件夹。这个文件夹里的东西就是最终的“制成品”，它可以运行在任何服务器上。

第二步：部署（大白话推荐方案）

如果你没有自己的服务器，推荐两个对新人极度友好的平台：

• Vercel / Netlify：你只需要注册账号，把 dist 文件夹拖进去，它们就会给你一个公网网址。
• GitHub Pages：如果你懂一点 Git，可以把代码推送到 GitHub，开启 Pages 功能。

---

与js对比

特性	传统 JavaScript (Vanilla JS)	Vue.js
DOM 操作	手动操作，代码冗长且易错	自动更新，开发者只需关注数据
状态管理	难以追踪数据流向，容易混乱	单向数据流，配合 Pinia/Vuex 状态清晰
开发效率	低（需要处理大量底层 UI 逻辑）	高（内置大量指令和工具）
维护性	随着项目增大，代码变成“面条代码”	结构化、模块化，易于长期维护
生态系统	零散，需自行集成各种库	拥有成熟的路由、状态管理、脚手架