什么是Vue.js？为什么选择Vue？
Vue.js（通常简称为Vue）是一个用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。
Vue的核心优势
易学易用
：如果你有基本的HTML、CSS和JavaScript知识，你可以在短时间内掌握Vue的基础并开始构建应用。
性能卓越
：Vue通过高效的虚拟DOM和精细的变更检测机制，确保了应用的高性能。
灵活性和可扩展性
：从简单的静态页面到复杂的单页应用（SPA），Vue都能胜任。通过其生态系统（如Vue Router、Vuex/Pinia），你可以轻松扩展应用功能。
活跃的社区
：Vue拥有一个非常活跃和友好的社区，提供了大量的插件、教程和第三方库。
环境搭建与项目初始化
在开始编写Vue代码之前，我们需要先准备好开发环境。
1. 安装Node.js和npm
Vue的开发环境依赖于Node.js。Node.js是一个JavaScript运行环境，它允许你在服务器端运行JavaScript代码。npm（Node Package Manager）是Node.js的包管理器，用于安装和管理项目依赖。
下载地址
：
https://nodejs.org/
建议版本
：下载并安装最新的LTS（长期支持）版本。安装完成后，打开终端（命令行工具），输入以下命令检查是否安装成功：
node -v
npm -v
如果能看到版本号，说明安装成功。
2. 使用Vite创建第一个Vue项目
Vite是新一代的前端构建工具，由Vue的作者尤雨溪开发。它提供了极速的开发服务器启动速度和热更新体验。我们将使用Vite来创建我们的Vue项目。
打开终端，执行以下命令：
# npm 6.x
npm create vite@latest my-vue-app –template vue
# npm 7+, 需要额外的双横线
npm create vite@latest my-vue-app — –template vue
# yarn
yarn create vite my-vue-app –template vue
# pnpm
pnpm create vite my-vue-app –template vue
这个命令会创建一个名为
my-vue-app
的新项目目录。接下来，进入项目目录并安装依赖：
cd my-vue-app
npm install
最后，启动开发服务器：
npm run dev
终端会显示一个本地服务器地址（通常是
http://localhost:5173/
），在浏览器中打开这个地址，你将看到Vue的欢迎页面！
3. 项目目录结构解析
创建好的项目目录结构如下：
my-vue-app/
├── node_modules/ # 项目依赖包
├── public/ # 静态资源
├── src/ # 源代码目录
│ ├── assets/ # 静态资源（如图片、样式）
│ ├── components/ # Vue组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── .gitignore # Git忽略文件
├── index.html # 主HTML文件
├── package.json # 项目配置和依赖
├── package-lock.json # 依赖版本锁定
└── vite.config.js # Vite配置文件
Vue基础语法与核心概念
1. 第一个Vue组件：
App.vue
Vue的核心是组件。一个Vue组件通常包含三个部分：
（模板）、
：这是组件的HTML结构。Vue的模板语法是基于HTML的，你可以在这里使用Vue特有的指令和插值。
指令（Directives）
Vue提供了一些特殊的属性，以
v-
开头，称为指令。
v-bind
(缩写
:
)
：动态绑定一个或多个HTML属性。
v-on
(缩写
@
)
：监听DOM事件。
v-model
：在表单输入和应用状态之间创建双向数据绑定。
v-if
/
v-else
：条件性地渲染元素。
v-for
：基于一个数组来渲染一个列表。
综合示例：一个简单的待办事项列表
我的待办事项
-
{{ todo.text }}
暂无待办事项，请添加！
3. 组件化开发
组件化是Vue的核心思想之一。将UI拆分成独立、可复用的部分。
父子组件通信
父 -> 子 (Props)
：父组件通过
props
向子组件传递数据。
子 -> 父 (Emits)
：子组件通过
$emit
事件通知父组件。
示例：创建一个用户卡片组件
在
src/components/
下创建
UserCard.vue
：
{{ user.name }}
年龄: {{ user.age }}
在
App.vue
中使用它：
用户列表
上次联系了: {{ lastContacted }}
Vue 3 进阶：组合式API (Composition API)
Vue 3 引入了组合式API，它提供了更好的逻辑复用和代码组织方式，尤其是在处理复杂组件时。
1.
ref
vs
reactive
ref
：用于创建任何类型的响应式数据（基本类型、对象、数组）。在JS中访问或修改时需要
.value
，在模板中则不需要。
reactive
：专门用于创建对象或数组的响应式代理。它直接代理整个对象，所以不需要
.value
。
import { ref, reactive } from 'vue'
// ref
const count = ref(0)
console.log(count.value) // 0
count.value++
// reactive
const state = reactive({ count: 0 })
console.log(state.count) // 0
state.count++
2.
computed
计算属性
当需要根据响应式数据派生出一些状态时，使用计算属性。它具有缓存机制，只有依赖变化时才会重新计算。
原始价格: {{ price }}
折扣: {{ discount * 100 }}%
最终价格: {{ finalPrice }}
3.
watch
侦听器
当你需要在数据变化时执行异步或开销较大的操作时，
watch
是理想的选择。
搜索状态: {{ searchStatus }}
4. 生命周期钩子
组合式API中，生命周期钩子需要从
vue
中导入并在
setup
中调用。
import { onMounted, onUpdated, onUnmounted } from 'vue'
onMounted(() => {
console.log('组件已挂载到DOM')
})
onUpdated(() => {
console.log('组件更新了')
})
onUnmounted(() => {
console.log('组件已卸载')
})
路由管理：Vue Router
对于单页应用（SPA），路由是必不可少的。Vue Router是Vue的官方路由管理器。
1. 安装与配置
npm install vue-router@4
在
src
目录下创建
router/index.js
：
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: AboutView
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
在
main.js
中引入路由：
// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router' // 引入路由
const app = createApp(App)
app.use(router) // 使用路由
app.mount('#app')
2. 在组件中使用路由
在
App.vue
中添加路由导航和视图占位符：
状态管理：Pinia (推荐)
随着应用复杂度的增加，组件间共享状态会变得混乱。Pinia是Vue官方推荐的状态管理库，它比Vuex更轻量、更符合Composition API风格。
1. 安装与设置
npm install pinia
在
main.js
中引入：
// src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(router)
app.mount('#app')
2. 创建一个Store
在
src/stores
目录下创建
counter.js
：
// src/stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: 'Eduardo'
}),
getters: {
doubleCount: (state) => state.count * 2,
greeting: (state) => `Hello, ${state.name}`
},
actions: {
increment() {
this.count++
},
randomizeCounter() {
this.count = Math.round(Math.random() * 100)
}
}
})
3. 在组件中使用Store
Pinia 状态管理示例
计数: {{ counter.count }}
双倍计数 (Getter): {{ counter.doubleCount }}
问候 (Getter): {{ counter.greeting }}
实战项目：简易博客系统
让我们结合以上所有知识，构建一个简单的博客系统。
项目目标
展示博客文章列表。
点击文章查看详情。
可以添加新文章。
使用Pinia管理文章数据。
步骤 1：初始化项目与安装依赖
npm create vite@latest vue-blog -- --template vue
cd vue-blog
npm install
npm install pinia vue-router
步骤 2：设置 Pinia Store
创建
src/stores/posts.js
：
import { defineStore } from 'pinia'
export const usePostStore = defineStore('posts', {
state: () => ({
posts: [
{ id: 1, title: '欢迎使用Vue', content: '这是一个示例博客文章。' },
{ id: 2, title: 'Vue 3的新特性', content: '组合式API让代码更优雅。' }
]
}),
actions: {
addPost(post) {
// 简单的ID生成
post.id = this.posts.length > 0 ? Math.max(...this.posts.map(p => p.id)) + 1 : 1
this.posts.unshift(post) // 添加到开头
},
getPostById(id) {
return this.posts.find(post => post.id === parseInt(id))
}
}
})
步骤 3：配置路由
创建
src/router/index.js
：
import { createRouter, createWebHistory } from 'vue-router'
import PostList from '../views/PostList.vue'
import PostDetail from '../views/PostDetail.vue'
import PostCreate from '../views/PostCreate.vue'
const routes = [
{ path: '/', component: PostList },
{ path: '/post/:id', component: PostDetail, props: true },
{ path: '/create', component: PostCreate }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
步骤 4：创建视图组件
在
src/views/
目录下创建以下文件：
1.
PostList.vue
(文章列表)
博客文章
-
{{ post.title }}
{{ post.content.substring(0, 50) }}...
2.
PostDetail.vue
(文章详情)
{{ post.title }}
{{ post.content }}
文章未找到。
3.
PostCreate.vue
(创建文章)
写新文章
步骤 5：整合入口文件
修改
src/main.js
和
src/App.vue
。
src/main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import './style.css' // 默认的全局样式
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
src/App.vue
步骤 6：运行项目
npm run dev
现在，你的简易博客系统已经完成了！你可以浏览文章、查看详情、添加新文章，并且所有状态都由Pinia统一管理。
总结与下一步
通过这篇详尽的教程，你已经从零开始，逐步掌握了Vue.js的核心概念，包括：
环境搭建
：使用Vite快速启动项目。
组件基础
：模板、数据绑定、指令。
组合式API
：
ref
,
reactive
,
computed
,
watch
。
路由管理
：Vue Router的基本使用。
状态管理
：Pinia的集成与应用。
项目实战
：构建了一个完整的简易博客系统。
进阶建议
深入学习TypeScript
：Vue 3对TypeScript有极好的支持，使用TS可以让你的代码更健壮。
UI库
：尝试使用像Element Plus、Vuetify或Ant Design Vue这样的UI库来加速开发。
异步数据请求
：学习使用Axios或Fetch API与后端API进行交互。
测试
：了解Vitest（Vite官方推荐的测试框架）或Cypress进行单元测试和端到端测试。
部署
：学习如何将你的Vue应用构建并部署到Netlify、Vercel或GitHub Pages。
Vue是一个强大且不断发展的生态系统，保持学习和实践是成为Vue专家的关键。祝你在Vue的开发之旅中一切顺利！