当前位置：首页 > news >正文

第一个 Vue 程序：从入门到实战笔记（初学者专属）

news 2025/10/15 12:43:51

第一个 Vue 程序：从入门到实战笔记（初学者专属）

各位刚接触 Vue 的小伙伴，这篇笔记会带我们从 “为什么选 Vue” 到 “写出第一个能运行的 Vue 程序”，一步步拆透每个环节的逻辑和操作。跟着学完，也能独立搭建 Vue 项目、修改组件和配置路由～

一、为什么选择 Vue？—— 初学者的友好选择

Vue.js 能成为前端主流框架之一，核心原因是它对初学者太友好了！我们先搞懂它的核心优势，明白 “为什么学 Vue”。

1.1 Vue 的核心定位：渐进式 JavaScript 框架

“渐进式” 是 Vue 最关键的特点，意思是我们可以按需使用它的功能，不用一次性全盘采用。比如：

小需求：只在现有项目（比如 jQuery 项目）里加一个 Vue 组件，处理数据绑定；
中需求：用 Vue 的组件化开发页面；
大需求：配合 Vue Router（路由）、Vuex（状态管理）搭建复杂单页应用。

这种 “从小到大” 的扩展方式，让我们不会一开始就被复杂概念吓住。

1.2 基于 MVVM 架构：告别手动操作 DOM

Vue 采用MVVM（Model-View-ViewModel） 架构，把 “数据” 和 “视图” 分开：

Model：数据（比如组件里的count、接口返回的列表）；
View：视图（页面上看到的按钮、文字）；
ViewModel：Vue 的核心，负责把数据和视图绑定起来。

最爽的是双向绑定：当数据变了，视图会自动更新；当用户改了视图（比如输入框打字），数据也会自动同步。不用像 jQuery 那样手动写$('#box').text(data)，专注业务逻辑就行！

1.3 对初学者的 3 大核心优势

学习曲线平缓：API 设计简洁，比如绑定数据用{{ 数据名 }}，事件绑定用@click，一看就懂；
中文生态完善：官方文档是中文的（https://cn.vuejs.org/），还有大量中文社区教程，遇到问题容易查；
应用广泛：中小企业、创业公司常用 Vue，学会了好找工作，小到个人项目、大到企业应用都能做。

二、前端框架简史：明白 Vue 的 “出身”

学 Vue 前先了解前端框架的演变，能帮我们理解 “Vue 解决了什么问题”。

时间阶段	代表技术 / 框架	核心特点 / 问题
2006-2010 年	jQuery	解决：原生 JS DOM 操作繁琐、跨浏览器兼容性问题；问题：大型项目代码混乱，没有统一结构
2010-2014 年	Backbone.js、AngularJS	引入 MVC/MVVM 架构，让代码有组织；问题：AngularJS 学习成本高，Backbone 功能太基础
2014 年 - 至今	Vue、React、Angular	核心：组件化（拆成独立单元）+ 虚拟 DOM（提升渲染性能）；优势：兼顾开发效率和性能

划重点：在中国市场，Vue 因为 “易上手 + 中文支持”，采用率稳居前三，特别适合新手入门。

三、Vue 核心理念：2 个必须懂的概念

Vue 的所有功能都是围绕 “数据驱动” 和 “组件化开发” 这两个理念设计的，我们必须吃透！

3.1 理念 1：数据驱动视图（不用手动改 DOM）

Vue 是 “声明式渲染”，我们只需要做 2 件事：

定义数据（比如count: 0）；
写模板（比如<button>{{ count }}</button>）；

剩下的事（数据变了→视图更新）全由 Vue 自动完成！

对比：命令式（jQuery）vs 声明式（Vue）

jQuery（命令式）：我们要手动找 DOM、改内容，步骤多且繁琐：

// 1. 找到按钮DOM → 2. 绑定点击事件 → 3. 改DOM内容
$('#btn').click(function() {let count = parseInt($('#count').text())$('#count').text(count + 1)
})

Vue（声明式）：我们只关心 “数据是什么”，不用管 DOM 操作：

<template><button @click="count++">{{ count }}</button>
</template>
<script>
export default {data() {return { count: 0 } // 只定义数据}
}
</script>

3.2 理念 2：组件化开发（拆成独立单元）

把页面拆成一个个独立、可复用的组件，比如 “导航栏组件”“按钮组件”“列表组件”，每个组件包含自己的：

模板（HTML 结构）；
逻辑（JS 代码）；
样式（CSS）。

组件化的好处：

复用性：比如 “按钮组件” 在多个页面都能用，不用重复写代码；
可维护性：组件出问题了，只改这一个文件就行，不会影响其他部分；
团队协作：甲写导航栏，乙写列表，不用互相等，效率高。

3.3 底层支撑：Vue 的响应式原理

为什么数据变了视图会自动变？靠的是 Vue 的 “响应式追踪”：

Vue 2：用Object.defineProperty监听数据变化；
Vue 3：用Proxy监听（功能更强，能监听数组、对象新增属性）。

不用深究底层代码，我们记住 “数据变，视图自动变” 这个结果就行，专注写业务！

四、Vue 生态系统：一套工具解决所有需求

Vue 不只是一个 “视图框架”，还有一套配套工具，帮我们搞定路由、状态管理、项目构建等问题，形成完整的生态。

工具 / 库	核心用途	适用场景
Vue CLI	命令行工具（脚手架）	创建项目、启动开发服务器、打包生产版本
vue-router	官方路由管理器	单页应用（SPA）的页面切换（比如首页→关于页）
Vuex/Pinia	状态管理库（Pinia 是 Vue 3 推荐替代 Vuex）	中大型项目，多个组件共享数据（比如用户信息）
Vue DevTools	浏览器扩展（Chrome/Firefox）	调试 Vue 应用（查看组件结构、数据变化）
UI 组件库	Element Plus（Vue 3）、Vuetify 等	快速搭建页面（不用自己写按钮、表格样式）

补充：小项目不用全用！比如做个简单的表单页面，只用 Vue CLI+vue-router 就行；中大型项目再加 Pinia。

五、环境准备：3 步搭好开发环境

在写第一个 Vue 程序前，我们要先装好 3 个东西：Node.js、npm、VS Code+Vetur 插件。

5.1 1. 安装 Node.js（必须！）

Vue CLI 依赖 Node.js，所以先装 Node.js：

下载地址：https://nodejs.org/ （选 “LTS” 版本，稳定，推荐 v14.0+）；
安装：双击安装包，一路下一步（可以自定义安装路径，没有中文且自己能找到就行）；
验证：打开 cmd，输入node -v，能显示版本号（比如v16.18.0）就是装好了；
- 同时会自动安装npm（包管理工具），输入npm -v验证（比如8.19.2）。

易错点：

Node.js 版本太低：比如 v12 以下，创建 Vue 项目会报错，遇到就升级 Node.js；
命令行输node -v没反应：可能是没配置环境变量，重装时勾选 “Add to PATH”。

5.2 2. 安装 VS Code+Vetur 插件

用 VS Code 写 Vue 代码最方便，配合 Vetur 插件有语法高亮、智能提示：

下载 VS Code：https://code.visualstudio.com/ （免费）；
安装 Vetur 插件：
- 打开 VS Code → 左侧 “扩展” 图标 → 搜索 “Vetur” → 点击 “安装”；
验证：新建一个.vue文件，输入<template>，能自动补全就是生效了。

替代插件：

如果用 Vue 3，也可以装 “Volar”（官方推荐，对 Vue 3 支持更好），二选一就行。

六、创建第一个 Vue 项目：手把手操作

用 Vue CLI 的命令行创建项目，步骤很简单，我们一步一步来。

6.1 步骤 1：打开命令行（CMD / 终端）

Windows：按Win+R，输入cmd，回车；
Mac：按Command+空格，输入terminal，回车。

6.2 步骤 2：执行创建命令

输入以下命令，创建名为 “my-vue-project” 的项目（项目名随便改，不能有大写字母）：

# 1. 创建Vue项目（会弹出选项）
vue create my-vue-project# 2. 进入项目目录（必须进入目录才能启动）
cd my-vue-project# 3. 启动开发服务器（启动后就能在浏览器看效果）
npm run serve

6.3 关键：项目创建选项详解

执行vue create my-vue-project后，会弹出选项，我们逐个解释怎么选：

选项 1：选择预设（Preset）

? Please pick a preset: (Use arrow keys)Default ([Vue 3] babel, eslint)  # Vue 3默认配置（只装Babel和ESLint）Default ([Vue 2] babel, eslint)  # Vue 2默认配置
> Manually select features         # 手动选择功能（推荐，学得多）

选Manually select features（按方向键→回车），手动选常用功能，避免后续缺组件。

选项 2：手动选择功能（必选这 4 个）

按空格勾选，勾选需要的之后再回车确认，开始下一步：

? Check the features needed for your project:√ Babel                          # 转译ES6+语法（兼容旧浏览器）TypeScript                     # 不用（初学者先学JS）Progressive Web App (PWA) Support # 不用（进阶功能）√ Router                         # 路由（页面切换必须）√ Vuex                           # 状态管理（中大型项目用，先装上）√ CSS Pre-processors             # CSS预处理器（比如Sass，写样式方便）√ Linter / Formatter             # 代码规范检查（避免写乱代码）Unit Testing                   # 不用（测试进阶）E2E Testing                    # 不用（测试进阶）

选项 3：选择 Vue 版本

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x                             # 选Vue 3（最新版，推荐学）2.x

选项 4：路由是否用 “历史模式”

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

输入y（回车），开启历史模式：
- 好处：URL 里没有#（比如http://localhost:8080/about，不是#/about）；
- 注意：生产环境（部署后）刷新页面会 404，需要服务器配置index.html fallback（后面部署会讲）。

选项 5：选择 CSS 预处理器

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
> Sass/SCSS (with dart-sass)      # 选Sass（最常用，语法简单）LessStylus

选项 6：选择代码规范

? Pick a linter / formatter config:
> ESLint with error prevention only  # 只报错误，不强制格式（对初学者友好）ESLint + Airbnb config             # 严格规范（新手容易报错）ESLint + Standard config

选项 7：配置文件放哪

? Where do you prefer placing config for Babel, ESLint, etc.?
> In dedicated config files  # 单独放配置文件（清晰，推荐）In package.json            # 放package.json里（乱）

选项 8：是否保存为预设

? Save this as a preset for future projects? (y/N)

输入n（回车），不用保存（以后熟悉了再保存）。

6.4 步骤 3：启动项目，查看效果

执行npm run serve，等待启动完成；

看到以下提示，说明启动成功：

DONE  Compiled successfully in 3000msApp running at:
- Local:   http://localhost:8080/
- Network: http://192.168.1.100:8080/

打开浏览器，输入http://localhost:8080，能看到 Vue 的默认页面（有 Home 和 About 链接），第一个 Vue 项目就跑起来了！

七、Vue 项目结构：每个文件是干嘛的？

创建项目后，我们打开 VS Code，看看项目里的文件和文件夹，搞懂每个部分的作用。

my-vue-project/          # 项目根目录
├── public/              # 不经webpack处理的静态资源（直接复制到dist）
│   ├── favicon.ico      # 浏览器标签图标
│   └── index.html       # HTML模板（Vue挂载的根文件）
├── src/                 # 项目核心代码（我们主要写这里）
│   ├── assets/          # 静态资源（图片、字体，经webpack处理）
│   │   └── logo.png     # Vue默认logo
│   ├── components/      # 可复用组件（按钮、卡片等小组件）
│   │   └── HelloWorld.vue # 默认示例组件
│   ├── views/           # 页面级组件（首页、关于页等完整页面）
│   │   ├── HomeView.vue # 首页组件
│   │   └── AboutView.vue # 关于页组件
│   ├── router/          # 路由配置
│   │   └── index.js     # 路由规则定义
│   ├── store/           # 状态管理（Vuex）
│   │   └── index.js     # 状态配置
│   ├── App.vue          # 根组件（所有组件的父容器）
│   └── main.js          # 入口JS文件（初始化Vue实例）
├── .eslintrc.js         # ESLint代码规范配置
├── babel.config.js      # Babel转译配置
├── package.json         # 项目依赖、脚本配置
└── vue.config.js        # Vue项目自定义配置（可选，需自己创建）

关键区别：

public vs src/assets：
- public 里的文件：直接复制到 dist 根目录，用绝对路径访问（比如<img src="/favicon.ico">）；
- src/assets 里的文件：经 webpack 打包，需要 import 引入（比如<img src="@/assets/logo.png">）；
views vs components：
- views：页面级组件，对应路由（比如 HomeView 对应/路径）；
- components：小组件，被 views 或其他 components 引用（比如 HelloWorld 被 HomeView 引用）。

八、常用命令：记住这 4 个就够了

日常开发中，我们常用的命令就 4 个，记下来不用每次查：

命令	作用	使用场景
`npm run serve`	启动开发服务器（热更新）	开发时用，改代码后页面自动刷新
`npm run build`	打包生产版本（生成 dist 目录）	项目写完后，打包部署到服务器
`npm run lint`	检查并修复代码规范错误	提交代码前用，避免 ESLint 报错
`npm install <包名>`	安装依赖包（比如 axios、Element Plus）	需要用第三方库时（比如发请求用 axios）

补充：npm run build后生成的dist目录，里面的文件都是压缩过的，体积小，适合部署到服务器。

九、配置文件：vue.config.js（自定义项目）

默认没有vue.config.js文件，我们可以在项目根目录手动创建，用来改端口、配置跨域等。以下是常用配置示例，逐行解释：

// 引入Vue CLI的defineConfig函数，规范配置格式
const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({// 转译第三方依赖（避免兼容性问题）transpileDependencies: true,// 开发服务器配置（开发时生效）devServer: {port: 8888, // 改端口（默认8080，冲突时用）open: true, // 启动项目后自动打开浏览器proxy: { // 配置跨域（解决开发时前端调用后端接口的跨域问题）'/api': { // 匹配所有以“/api”开头的请求target: 'http://localhost:8080', // 后端接口的基础地址changeOrigin: true, // 开启跨域（模拟同源请求，浏览器不拦截）pathRewrite: { // 路径重写：去掉请求里的“/api”'^/api': '' // 例：请求“/api/user” → 实际请求“http://localhost:8080/user”}}}},// 生产环境配置（打包时生效）publicPath: process.env.NODE_ENV === 'production' ? '/my-project/' : '/',// 解释：生产环境部署到“/my-project/”路径下（比如服务器域名/my-project/），开发环境用“/”// 自定义webpack配置（可选）configureWebpack: {plugins: [] // 可以加webpack插件}
})

易错点：

跨域配置proxy的target写错：比如后端接口是http://192.168.1.101:3000，写成localhost:8080，会导致请求失败；
pathRewrite没写：请求会带/api，比如http://localhost:8080/api/user，后端没有/api前缀就会 404。

十、修改组件：写第一个自定义功能

我们来修改HelloWorld.vue，加一个 “点击按钮计数” 的功能，熟悉 Vue 组件的写法。

10.1 组件的 3 大组成部分

每个.vue文件都由 3 部分组成：<template>（模板）、<script>（逻辑）、<style>（样式），缺一不可。

示例：修改后的 HelloWorld.vue

<template><!-- 1. 模板：HTML结构，用Vue语法绑定数据和事件 --><div class="hello"><h1>{{ msg }}</h1> <!-- 绑定父组件传的msg数据 --><!-- 点击按钮，count加1 --><button @click="count++">点击计数：{{ count }}</button><!-- 也可以调用methods里的方法：@click="increment" --></div>
</template><script>
// 2. 脚本：JS逻辑，定义数据、方法、接收父组件参数
export default {name: 'HelloWorld', // 组件名（可选，调试时用）props: { // 父组件传给子组件的参数（类似函数参数）msg: String // 规定msg是字符串类型，确保传参正确},data() { // 组件内部的响应式数据（必须是函数，返回对象）return {count: 0 // 计数变量，初始值0}},methods: { // 组件内部的方法（处理事件、逻辑）increment() {this.count++ // 用this访问data里的count}}
}
</script><style scoped>
/* 3. 样式：CSS，scoped属性让样式只作用于当前组件（不污染其他组件） */
.hello {text-align: center;margin-top: 20px;
}button {padding: 10px 20px;background-color: #42b983; /* Vue的主题色 */color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background-color: #359469; /*  hover效果 */
}
</style>

10.2 关键知识点：

export default：导出组件，让其他组件能通过import引入；
- 区别export和export default：
  - export：能导出多个命名模块（比如export const a = 1; export const b = 2）；
  - export default：只能导出一个默认模块（每个组件只有一个默认导出）；
props：父组件传参的 “接口”，比如App.vue给HelloWorld传msg="欢迎..."；
data是函数：每个组件实例要独立拥有数据，比如两个HelloWorld组件，count 不会互相影响；如果写成对象，所有实例会共用一个数据，会出错；
scoped属性：样式隔离，比如button样式只改当前组件的按钮，不会改其他组件的按钮。

10.3 在 App.vue 中使用组件

App.vue是根组件，我们要在这里引入并使用HelloWorld组件：

<template><div id="app"><!-- 路由链接：切换页面（类似a标签，但不刷新） --><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link></nav><!-- 路由视图：渲染当前路由对应的组件（比如HomeView） --><router-view/><!-- 使用HelloWorld组件，传msg参数 --><HelloWorld msg="欢迎来到我的第一个Vue程序！"/></div>
</template><script>
// 1. 引入HelloWorld组件
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: { // 2. 注册组件（必须注册才能在template里用）HelloWorld}
}
</script><style>
/* 全局样式（没有scoped，作用于所有组件） */
#app {font-family: Avenir, Helvetica, Arial, sans-serif;text-align: center;color: #2c3e50;
}nav {padding: 30px;
}nav a {font-weight: bold;color: #2c3e50;text-decoration: none;margin: 0 10px;
}/* 路由链接激活时的样式（比如当前在Home，Home链接变绿色） */
nav a.router-link-exact-active {color: #42b983;
}
</style>

效果：

启动项目后，页面会显示 “欢迎来到我的第一个 Vue 程序！” 和计数按钮，点击按钮，数字会递增，这就是我们写的第一个自定义功能！

十一、使用 Vue Router：实现页面切换

Vue Router 是用来做 “单页应用（SPA）” 页面切换的，比如从 “首页” 点到 “关于页”，不用刷新浏览器，只切换内容。

11.1 路由配置文件：src/router/index.js

默认已经配置好了路由，我们来理解代码：

// 1. 从vue-router引入核心函数
import { createRouter, createWebHistory } from 'vue-router'
// 2. 引入页面组件（HomeView对应首页，AboutView对应关于页）
import HomeView from '../views/HomeView.vue'// 3. 定义路由规则：路径→组件的映射
const routes = [{path: '/', // 路径：http://localhost:8080/name: 'home', // 路由名（可选，跳转时用）component: HomeView // 对应组件},{path: '/about', // 路径：http://localhost:8080/aboutname: 'about',// 懒加载：只有访问“/about”时才加载AboutView组件（首屏加载更快）component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')}
]// 4. 创建路由实例
const router = createRouter({history: createWebHistory(process.env.BASE_URL), // 历史模式（去掉URL里的#）routes // 传入路由规则
})// 5. 导出路由实例，供main.js使用
export default router

11.2 关键知识点：

懒加载组件：() => import(...)这种写法，不是一开始就加载所有组件，而是访问对应路由时才加载，减少首屏加载时间；
路由链接<router-link>：不用<a href="/about">，因为<a>标签会刷新页面，router-link是 Vue Router 提供的，只切换内容，不刷新；
路由视图<router-view>：是一个 “容器”，当前路由对应的组件会渲染到这里，比如访问/about，AboutView就会替换router-view的内容。

11.3 新增一个路由（实战）

我们来加一个 “测试页” 路由，步骤：

在src/views下新建TestView.vue（页面组件）：

<template><div><h1>这是测试页</h1></div>
</template>

在src/router/index.js中添加路由规则：

// 引入TestView
import TestView from '../views/TestView.vue'const routes = [// ...原有规则{path: '/test', // 新路径：/testname: 'test',component: TestView}
]

在App.vue的<nav>中加路由链接：

<nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link> |<router-link to="/test">测试页</router-link> <!-- 新增 -->
</nav>

刷新浏览器，点击 “测试页”，就能切换到测试页，页面不刷新，这就是路由的作用！

十二、安装常用插件：提升开发效率

开发中我们会用到第三方插件，比如发请求用axios，UI 组件用Element Plus，安装方法很简单。

12.1 常用插件安装命令

插件 / 库	安装命令	用途
axios（发请求）	`npm install axios`	调用后端接口（比如获取列表数据）
Element Plus	`npm install element-plus`	Vue 3 UI 组件库（按钮、表格、表单等）
Sass（预处理器）	`npm install sass sass-loader -D`	增强 CSS（变量、嵌套语法）
Pinia（状态管理）	`npm install pinia`	Vue 3 推荐，替代 Vuex

注：-D表示 “开发依赖”（只开发时用，打包后不包含），比如 sass-loader 是编译 Sass 用的，生产环境不用。

12.2 示例：使用 axios 发请求

安装axios后，在组件中用它发请求：

<template><div><button @click="getUserList">获取用户列表</button><ul><li v-for="user in userList" :key="user.id">{{ user.name }}</li></ul></div>
</template>
<script>
import axios from 'axios' // 引入axiosexport default {data() {return {userList: []}},methods: {async getUserList() {// 发GET请求（假设后端接口是/api/user）const res = await axios.get('/api/user')this.userList = res.data // 把接口返回的数据赋值给userList}}
}
</script>

十三、部署 Vue 项目：让别人也能访问

项目写完后，要打包并部署到服务器，别人才能通过 URL 访问。

13.1 步骤 1：打包生产版本

执行npm run build命令，项目根目录会生成dist文件夹，里面是压缩后的静态文件（HTML、CSS、JS）。

13.2 步骤 2：部署到不同平台

1. 简单部署：本地打开

直接打开dist/index.html，会发现页面空白（因为路由是历史模式），解决方法：

改路由为hash模式（在src/router/index.js中，把createWebHistory改成createWebHashHistory）；
再打包，打开index.html就能正常显示（URL 里有#）。

2. 专业部署：服务器 / 平台

推荐部署到免费平台，操作简单：

Netlify：
1. 进入 Netlify 官网（https://www.netlify.com/），用 GitHub 账号登录；
2. 点击 “Add new site”→“Drag and drop”；
3. 把dist文件夹拖进去，等待部署完成，会生成一个公共 URL（比如https://xxx.netlify.app），别人就能访问了。
GitHub Pages：
1. 把dist文件夹上传到 GitHub 仓库；
2. 安装gh-pages包：npm install gh-pages -D；
3. 在package.json中加脚本："deploy": "gh-pages -d dist"；
4. 执行npm run deploy，部署到 GitHub Pages，访问https://用户名.github.io/仓库名。

13.3 部署易错点：

历史模式路由刷新 404：生产环境需要服务器配置index.html fallback（比如 Nginx 配置try_files $uri $uri/ /index.html;）；
publicPath配置错误：如果部署到/my-project/路径下，vue.config.js的publicPath要设为'/my-project/'，不然资源路径错了会加载失败。