Vue.js 基础教程笔记(一):Vue入门与环境搭建
1. Vue.js 简介
1.1 什么是 Vue.js
Vue.js(通常简称为 Vue)是一套用于构建用户界面的渐进式 JavaScript 框架。与其他大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
Vue 由 Evan You(尤雨溪)于 2014 年创建,最初是作为 Angular.js 的轻量级替代方案。经过多年的发展,Vue 已经成为前端开发领域最受欢迎的框架之一,拥有庞大的社区支持和丰富的生态系统。
1.2 Vue 的发展历史
- 2014年2月:Evan You 在 GitHub 上发布了 Vue.js 的第一个版本(0.6.0)
- 2015年10月:Vue.js 1.0.0 正式发布,引入了组件系统和虚拟 DOM
- 2016年10月:Vue.js 2.0.0 发布,采用 Virtual DOM 架构,性能大幅提升
- 2019年2月:Vue.js 3.0.0 进入 alpha 阶段
- 2020年9月:Vue.js 3.0.0 正式发布,引入 Composition API 和 TypeScript 支持
- 2022年2月 :Vue.js 3.2.0 发布,引入
<script setup>语法糖,简化开发体验
1.3 Vue 的特点和优势
Vue 之所以能够在前端开发领域占据重要地位,与其独特的特点和优势密不可分:
1.3.1 渐进式框架
Vue 被设计为渐进式框架,这意味着你可以根据项目需求逐步采用其功能。你可以:
- 只使用 Vue 的核心库来增强简单的页面
- 结合 Vue Router 实现路由管理
- 使用 Vuex/Pinia 进行状态管理
- 集成 Vue CLI/Vite 等构建工具
这种渐进式的设计使得 Vue 既适合小型项目的快速开发,也能够胜任大型复杂应用的构建。
1.3.2 响应式数据绑定
Vue 最显著的特点之一是其响应式数据绑定系统。通过使用简洁的模板语法,你可以将 DOM 与 Vue 实例的数据轻松关联起来:
vue
<template>
<div>
<h1>{{ message }}</h1>
<input v-model="message" placeholder="编辑我">
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
}
}
}
</script>
当 message 的值发生变化时,页面上的内容会自动更新,无需手动操作 DOM。
1.3.3 组件化开发
Vue 鼓励使用组件化的方式构建用户界面。组件是可复用的 Vue 实例,拥有自己的模板、逻辑和样式。通过组件化,你可以将复杂的界面拆分为独立、可维护的小部件:
vue
<!-- 定义一个组件 -->
<template>
<div class="todo-item">
<input type="checkbox" v-model="todo.completed">
<span :class="{ completed: todo.completed }">{{ todo.text }}</span>
</div>
</template>
<script>
export default {
props: ['todo']
}
</script>
<style scoped>
.todo-item {
padding: 10px;
border-bottom: 1px solid #eee;
}
.completed {
text-decoration: line-through;
color: #999;
}
</style>
组件化开发带来了诸多好处,包括代码复用、维护性提升、团队协作效率提高等。
1.3.4 虚拟 DOM
Vue 2.0 引入了虚拟 DOM 技术,这是一种将真实 DOM 抽象为内存中的 JavaScript 对象的技术。当数据发生变化时,Vue 会先在虚拟 DOM 中进行计算,找出最小的变更量,然后只更新需要修改的真实 DOM 节点。
虚拟 DOM 技术带来了显著的性能提升,尤其是在大型应用中,避免了频繁的 DOM 操作导致的性能问题。
1.3.5 易于学习
Vue 的 API 设计简洁明了,学习曲线平缓。如果你有 HTML、CSS 和 JavaScript 的基础,很快就能上手 Vue 开发。Vue 的官方文档也非常完善,提供了详细的教程和示例。
1.4 Vue 与其他框架的对比
在前端开发领域,Vue 经常与 React 和 Angular 进行比较。以下是它们之间的主要区别:
1.4.1 Vue vs React
| 特性 | Vue | React |
|---|---|---|
| 模板语法 | 支持 HTML 模板和 JSX | 主要使用 JSX |
| 状态管理 | Vuex/Pinia(官方推荐) | Redux/MobX(社区主导) |
| 路由 | Vue Router(官方) | React Router(社区) |
| 学习曲线 | 较平缓 | 中等 |
| 性能 | 优秀 | 优秀 |
| 生态系统 | 成熟 | 非常成熟 |
1.4.2 Vue vs Angular
| 特性 | Vue | Angular |
|---|---|---|
| 语言 | JavaScript/TypeScript | 主要使用 TypeScript |
| 复杂度 | 较低 | 较高 |
| 学习曲线 | 平缓 | 陡峭 |
| 体积 | 较小 | 较大 |
| 灵活性 | 高 | 中等 |
| 适合项目 | 中小型到大型 | 大型企业应用 |
选择哪个框架取决于项目需求、团队技能和个人偏好。Vue 以其简洁的 API、良好的性能和渐进式设计,成为许多开发者的首选。
2. Vue 开发环境搭建
要开始 Vue 开发,你需要搭建一个合适的开发环境。本节将详细介绍环境搭建的步骤。
2.1 安装 Node.js
Vue 项目依赖 Node.js 环境,因此首先需要安装 Node.js。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时,允许在服务器端运行 JavaScript。
2.1.1 下载 Node.js
访问 Node.js 官方网站(https://nodejs.org/)下载适合你操作系统的安装包。推荐下载 LTS(长期支持)版本,它提供了更好的稳定性和安全性。
2.1.2 安装 Node.js
根据你的操作系统,按照安装向导完成安装:
- Windows:双击下载的 .msi 文件,按照提示完成安装
- macOS:双击下载的 .pkg 文件,按照提示完成安装
- Linux:可以使用包管理器(如 apt、yum 等)安装,也可以下载源码编译安装
2.1.3 验证安装
安装完成后,打开命令行工具(Windows 下为 CMD 或 PowerShell,macOS/Linux 下为 Terminal),输入以下命令验证安装是否成功:
bash
node -v
npm -v
如果安装成功,你将看到类似以下的输出:
v20.10.0
10.2.3
2.2 选择包管理器
Node.js 安装完成后,会自动安装 npm(Node Package Manager)。npm 是 Node.js 的包管理器,用于安装、管理和分享 JavaScript 包。
除了 npm,还有其他流行的包管理器可供选择:
2.2.1 Yarn
Yarn 是由 Facebook 开发的包管理器,提供了更快的安装速度和更可靠的依赖管理。你可以使用 npm 安装 Yarn:
bash
npm install -g yarn
验证安装:
bash
yarn -v
2.2.2 pnpm
pnpm 是一个快速、节省磁盘空间的包管理器,使用符号链接来共享依赖,减少重复安装。你可以使用 npm 安装 pnpm:
bash
npm install -g pnpm
验证安装:
bash
pnpm -v
在本教程中,我们将主要使用 npm,但你可以根据个人偏好选择其他包管理器。
2.3 安装 Vue CLI
Vue CLI 是 Vue 官方提供的脚手架工具,用于快速创建 Vue 项目。它提供了项目初始化、插件管理、构建部署等功能。
2.3.1 安装 Vue CLI
使用 npm 全局安装 Vue CLI:
bash
npm install -g @vue/cli
验证安装:
bash
vue --version
如果安装成功,你将看到 Vue CLI 的版本号,例如:
@vue/cli 5.0.8
2.3.2 Vue CLI 功能介绍
Vue CLI 提供了以下主要功能:
- 项目创建:快速创建 Vue 项目,支持自定义配置
- 插件系统:通过插件扩展功能,如 TypeScript、ESLint、Unit Testing 等
- 开发服务器:提供热重载的开发服务器
- 构建工具:将项目打包为生产环境可用的代码
- 配置管理:集中管理项目配置
2.4 使用 Vite
Vite 是 Vue 团队开发的新一代前端构建工具,提供了极速的开发体验。与 Vue CLI 相比,Vite 具有更快的启动速度和热更新性能。
2.4.1 安装 Vite
Vite 不需要全局安装,你可以直接使用 npm create 命令创建 Vite 项目:
bash
npm create vite@latest
2.4.2 Vite 的优势
- 极速启动:利用浏览器的 ES 模块支持,无需打包即可快速启动开发服务器
- 热模块替换(HMR):实时更新修改的组件,无需刷新页面
- 按需编译:只编译当前需要的模块,提高开发效率
- 优化的构建输出:使用 Rollup 进行生产构建,生成优化的代码
3. 创建第一个 Vue 项目
现在我们已经安装了必要的工具,接下来创建第一个 Vue 项目。我们将分别介绍使用 Vue CLI 和 Vite 创建项目的方法。
3.1 使用 Vue CLI 创建项目
3.1.1 初始化项目
打开命令行工具,进入你想要创建项目的目录,执行以下命令:
bash
vue create hello-vue
这里的 "hello-vue" 是项目名称,你可以根据需要修改。
3.1.2 选择配置
执行命令后,Vue CLI 会提示你选择项目配置:
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
- Default ([Vue 3]):使用 Vue 3 创建默认配置的项目,包含 Babel 和 ESLint
- Default ([Vue 2]):使用 Vue 2 创建默认配置的项目,包含 Babel 和 ESLint
- Manually select features:手动选择项目特性,自定义配置
对于初学者,推荐选择 "Default ([Vue 3])",然后按 Enter 键继续。
3.1.3 等待项目创建
Vue CLI 会自动下载依赖并创建项目结构。这个过程可能需要几分钟,取决于你的网络速度。
创建完成后,你会看到类似以下的输出:
🎉 Successfully created project hello-vue.
👉 Get started with the following commands:
$ cd hello-vue
$ npm run serve
3.1.4 启动开发服务器
进入项目目录并启动开发服务器:
bash
cd hello-vue
npm run serve
启动成功后,你会看到类似以下的输出:
DONE Compiled successfully in 2374ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.100:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
现在,你可以在浏览器中访问 http://localhost:8080/,看到你的第一个 Vue 应用。
3.2 使用 Vite 创建项目
3.2.1 初始化项目
执行以下命令创建 Vite 项目:
bash
npm create vite@latest hello-vue3 -- --template vue
这里的 "hello-vue3" 是项目名称,"--template vue" 指定使用 Vue 模板。
如果你想使用 TypeScript,可以使用 vue-ts 模板:
bash
npm create vite@latest hello-vue3-ts -- --template vue-ts
3.2.2 安装依赖
项目创建完成后,进入项目目录并安装依赖:
bash
cd hello-vue3
npm install
3.2.3 启动开发服务器
安装完成后,启动开发服务器:
bash
npm run dev
启动成功后,你会看到类似以下的输出:
VITE v5.0.11 ready in 386 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
在浏览器中访问 http://localhost:5173/,即可看到你的 Vue 应用。
4. Vue 项目结构解析
成功创建项目后,我们来解析一下 Vue 项目的基本结构。
4.1 Vue CLI 创建的项目结构
使用 Vue CLI 创建的项目结构如下:
hello-vue/
├── node_modules/ # 项目依赖
├── public/ # 静态资源目录
│ ├── favicon.ico # 网站图标
│ └── index.html # HTML 入口文件
├── src/ # 源代码目录
│ ├── assets/ # 资产目录(图片、样式等)
│ │ └── logo.png # Vue logo
│ ├── components/ # 组件目录
│ │ └── HelloWorld.vue # 示例组件
│ ├── App.vue # 根组件
│ └── main.js # 应用入口文件
├── .gitignore # Git 忽略文件配置
├── babel.config.js # Babel 配置
├── package.json # 项目配置和依赖
├── README.md # 项目说明文档
└── yarn.lock # Yarn 依赖锁定文件(如果使用 Yarn)
4.2 Vite 创建的项目结构
使用 Vite 创建的项目结构如下:
hello-vue3/
├── node_modules/ # 项目依赖
├── public/ # 静态资源目录
│ └── vite.svg # Vite logo
├── src/ # 源代码目录
│ ├── assets/ # 资产目录
│ │ └── vue.svg # Vue logo
│ ├── components/ # 组件目录
│ │ └── HelloWorld.vue # 示例组件
│ ├── App.vue # 根组件
│ ├── main.js # 应用入口文件
│ └── style.css # 全局样式
├── .gitignore # Git 忽略文件配置
├── index.html # HTML 入口文件
├── package.json # 项目配置和依赖
├── README.md # 项目说明文档
├── vite.config.js # Vite 配置
└── yarn.lock # Yarn 依赖锁定文件(如果使用 Yarn)
4.3 核心文件说明
4.3.1 index.html
HTML 入口文件,所有 Vue 组件最终都会渲染到这个文件中:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
注意 Vite 项目中,index.html 位于根目录,而 Vue CLI 项目中位于 public 目录。
4.3.2 main.js
应用入口文件,负责创建 Vue 实例并挂载到 DOM 上:
javascript
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')
4.3.3 App.vue
根组件,是所有其他组件的父组件:
vue
<template>
<div>
<img alt="Vue logo" src="./assets/vue.svg" />
<HelloWorld msg="Hello Vue 3 + Vite" />
</div>
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<style scoped>
img {
height: 200px;
}
</style>
Vue 组件由三个部分组成:
<template>:组件的模板结构<script>:组件的逻辑<style>:组件的样式
4.3.4 HelloWorld.vue
示例组件,展示了 Vue 组件的基本结构:
vue
<template>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code>
and save to test HMR
</p>
</template>
<script setup>
import { ref } from 'vue'
defineProps({
msg: String
})
const count = ref(0)
</script>
<!-- scoped 表示样式只作用于当前组件 -->
<style scoped>
h1 {
color: #42b883;
}
</style>
4.4 配置文件说明
4.4.1 package.json
项目配置和依赖管理文件:
json
{
"name": "hello-vue3",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"vite": "^5.0.8"
}
}
主要字段说明:
name:项目名称version:项目版本scripts:脚本命令(dev、build、preview 等)dependencies:生产环境依赖devDependencies:开发环境依赖
4.4.2 vite.config.js
Vite 配置文件:
javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})
4.4.3 babel.config.js(Vue CLI 项目)
Babel 配置文件,用于将 ES6+ 代码转换为兼容的 JavaScript:
javascript
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
5. 第一个 Vue 应用:Hello World
现在我们来创建一个简单的 Hello World 应用,展示 Vue 的基本用法。
5.1 使用 CDN 引入 Vue
如果只是想快速体验 Vue,你可以使用 CDN 直接在 HTML 中引入 Vue:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue Hello World</title>
<!-- 引入 Vue -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
<input v-model="message" placeholder="编辑我">
</div>
<script>
const { createApp } = Vue
createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
</body>
</html>
保存为 index.html 文件,然后在浏览器中打开,你会看到一个简单的 Vue 应用,输入框中的内容会实时反映到标题中。
5.2 应用结构解析
这个简单的应用包含以下几个部分:
- 引入 Vue:通过 CDN 引入 Vue 库
- 挂载点 :HTML 中的
<div id="app"></div>是 Vue 应用的挂载点 - 模板 :挂载点内的内容是 Vue 的模板,使用双花括号
{``{ }}绑定数据 - Vue 实例 :使用
createApp()创建 Vue 应用实例 - 数据 :
data()函数返回应用的数据对象 - 挂载 :使用
mount('#app')将 Vue 应用挂载到 DOM 上
5.3 基本语法演示
5.3.1 数据绑定
html
<!-- 文本插值 -->
<h1>{{ message }}</h1>
<!-- 原始 HTML -->
<div v-html="rawHtml"></div>
<!-- 属性绑定 -->
<img v-bind:src="imageSrc">
<!-- 简写 -->
<img :src="imageSrc">
<!-- 双向绑定 -->
<input v-model="message">
5.3.2 条件渲染
html
<!-- v-if -->
<div v-if="isShow">这是显示的内容</div>
<div v-else>这是隐藏时显示的内容</div>
<!-- v-show -->
<div v-show="isShow">这是显示的内容</div>
5.3.3 列表渲染
html
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }}
</li>
</ul>
5.3.4 事件处理
html
<!-- 基本事件处理 -->
<button v-on:click="handleClick">点击我</button>
<!-- 简写 -->
<button @click="handleClick">点击我</button>
<!-- 传递参数 -->
<button @click="handleClick('hello')">点击我</button>
这些是 Vue 的基本语法,我们将在后续笔记中详细介绍。
6. Vue 开发工具推荐
选择合适的开发工具可以极大地提高开发效率。以下是一些推荐的 Vue 开发工具。
6.1 VS Code
Visual Studio Code(VS Code)是目前最受欢迎的代码编辑器之一,具有丰富的插件生态系统和强大的功能。
6.1.1 安装 VS Code
访问 VS Code 官方网站(https://code.visualstudio.com/)下载并安装适合你操作系统的版本。
6.1.2 推荐插件
- Volar:Vue 3 官方推荐的 VS Code 扩展,提供语法高亮、智能提示、代码格式化等功能
- Vue VSCode Snippets:提供 Vue 代码片段,加快开发速度
- ESLint:代码质量检查工具,帮助规范代码风格
- Prettier:代码格式化工具,保持代码风格一致
- GitLens:增强 Git 功能,方便查看代码提交历史
6.2 Vue DevTools
Vue DevTools 是 Vue 官方提供的浏览器扩展,用于调试 Vue 应用。
6.2.1 安装 Vue DevTools
Vue DevTools 支持 Chrome、Firefox 和 Edge 浏览器:
- Chrome:在 Chrome Web Store 搜索 "Vue DevTools" 并安装
- Firefox:在 Firefox Add-ons 搜索 "Vue DevTools" 并安装
- Edge:在 Edge Add-ons 搜索 "Vue DevTools" 并安装
6.2.2 Vue DevTools 功能
- 组件树:查看应用的组件结构
- 数据检查:查看和修改组件的数据和 props
- 事件追踪:监控组件触发的事件
- 性能分析:分析组件的渲染性能
- 路由管理:查看和管理路由(如果使用 Vue Router)
7. 常见问题与解决方案
在 Vue 开发过程中,可能会遇到一些常见问题。本节介绍一些常见问题及其解决方案。
7.1 环境安装问题
7.1.1 Node.js 安装失败
问题:安装 Node.js 时出现错误。
解决方案:
- 确保下载了与操作系统匹配的安装包
- 关闭防病毒软件后重试
- 使用管理员权限运行安装程序
- 尝试安装其他版本的 Node.js
7.1.2 npm 命令无法使用
问题:安装 Node.js 后,npm 命令无法使用。
解决方案:
- 检查 Node.js 是否正确安装
- 确保 Node.js 的安装目录已添加到系统环境变量
- 重新启动命令行工具
7.2 项目创建错误
7.2.1 Vue CLI 创建项目失败
问题:使用 Vue CLI 创建项目时出现错误。
解决方案:
- 确保 Vue CLI 已正确安装
- 检查网络连接是否正常
- 尝试使用国内镜像:
npm config set registry https://registry.npmmirror.com/ - 清理 npm 缓存:
npm cache clean --force
7.2.2 Vite 创建项目失败
问题:使用 Vite 创建项目时出现错误。
解决方案:
- 确保使用了最新版本的 Vite:
npm create vite@latest - 检查网络连接
- 尝试使用不同的模板
7.3 依赖安装失败
问题 :执行 npm install 时依赖安装失败。
解决方案:
- 检查网络连接
- 使用国内镜像
- 删除
node_modules目录和package-lock.json文件,重新安装 - 尝试使用其他包管理器(如 Yarn、pnpm)
7.4 开发服务器启动失败
问题 :执行 npm run serve 或 npm run dev 时服务器启动失败。
解决方案:
- 检查端口是否被占用
- 确保依赖已正确安装
- 查看错误信息,根据提示解决问题
- 尝试重启命令行工具
8. Vue 学习资源推荐
学习 Vue 有很多优质的资源,以下是一些推荐:
8.1 官方文档
- Vue 3 官方文档:https://vuejs.org/guide/introduction.html
- Vue 2 官方文档:https://v2.vuejs.org/v2/guide/
- Vue Router 文档:https://router.vuejs.org/zh/
- Pinia 文档:https://pinia.vuejs.org/
- Vite 文档:https://vitejs.dev/guide/
8.2 在线课程
- Vue Mastery:https://www.vuemastery.com/
- Vue School:https://vueschool.io/
- 网易云课堂 Vue.js 视频教程:https://study.163.com/course/courseMain.htm?courseId=1004714008
- B站 Vue 教程:搜索 "Vue 3 教程" 或 "Vue 2 教程"
8.3 社区资源
- Vue Forum:https://forum.vuejs.org/
- Vue.js 中文社区:https://vuejs.org.cn/
- GitHub:https://github.com/vuejs/
- 知乎 Vue 话题:https://www.zhihu.com/topic/19552408
- 掘金 Vue 专栏:https://juejin.cn/column/6844737682072930311
8.4 书籍推荐
- 《Vue.js 实战》
- 《Vue.js 设计与实现》
- 《深入浅出 Vue.js》
- 《Vue.js 3 企业级应用开发》
9. 总结
本文介绍了 Vue.js 的基本概念、发展历史、特点以及开发环境的搭建方法。我们学习了如何使用 Vue CLI 和 Vite 创建 Vue 项目,解析了 Vue 项目的结构,并创建了第一个 Vue 应用。最后,我们推荐了一些 Vue 开发工具和学习资源。
通过本文的学习,你应该已经对 Vue.js 有了初步的了解,并能够搭建 Vue 开发环境,创建简单的 Vue 应用。在后续的笔记中,我们将深入学习 Vue 的模板语法、组件系统、响应式原理等核心内容。
Vue 是一个功能强大且易于学习的框架,掌握 Vue 开发将为你打开前端开发的大门。继续努力学习,你将能够构建出更加复杂和优秀的 Vue 应用。