三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

Vue.js 入门实战：从环境搭建到核心概念与工程化部署

发布时间：2026/8/13 15:52:07 三亩地 编程学习日记
Vue.js 入门实战：从环境搭建到核心概念与工程化部署

1. 为什么是Vue？一个前端开发者的视角

如果你刚接触前端开发，或者是从jQuery、原生JS时代过来的开发者，第一次听说Vue，可能会有点懵。框架这么多，React、Angular、Svelte，为什么偏偏要学Vue？我自己的经历是，几年前接手一个老项目，里面混杂着各种直接操作DOM的脚本，维护起来像在走迷宫。后来重构时选择了Vue，最大的感受是：它让“状态”和“视图”的同步变得理所当然，而不是一个需要手动维护的负担。

简单来说，Vue的核心是声明式渲染和响应式系统。你不用再告诉浏览器“先找到id为list的ul，然后遍历数据数组，为每一项创建一个li，设置innerText，最后append到ul里”。在Vue里，你只需要在模板里声明“这个ul的数据来源于这个list数组”，当list变化时，视图会自动更新。这种心智模型的转变，是现代化前端开发效率提升的关键。从网络热词也能看出它的生态活力：vue路由、vue项目实战、vue面试题、springboot vue前后端分离，这些都指向了Vue在实际企业级开发中的广泛应用场景。无论是快速搭建管理后台（如基于ruoyi-vue），还是开发复杂交互的C端应用，Vue都提供了一套渐进式、低门槛的解决方案。这篇文章，我就从一个实践者的角度，带你拆解Vue的核心概念和上手路径，避开我当初踩过的那些坑。

2. 环境搭建：从零到一启动你的第一个Vue项目

很多人卡在第一步：环境配置。看到vue安装及环境配置、idea搭建vue项目、linux部署vue这些热词就知道，这是普遍痛点。现在最主流、最推荐的方式是使用Vite + Vue。别再被那些老旧的、基于Webpack的教程误导了，Vite的启动速度和开发体验是革命性的。

2.1 核心工具链安装与选型

首先，你需要Node.js环境。去官网下载LTS（长期支持）版本安装即可，这同时会安装npm包管理器。安装后，打开终端（命令行），运行node -v和npm -v检查是否成功。

接下来是包管理器的选择。npm是内置的，但速度可能较慢。我更推荐使用pnpm或yarn，它们更快且采用锁文件确保依赖一致。这里以pnpm为例（你也可以用npm，命令类似）：

# 安装pnpm npm install -g pnpm # 使用pnpm创建Vue项目 pnpm create vue@latest

这个命令会启动一个交互式的项目创建向导。你会被询问项目名称、是否添加TypeScript、JSX支持、路由、状态管理、测试工具等。对于初学者，我的建议是：

  • 项目名称：用英文，不要用中文和空格。
  • TypeScript：强烈建议选 Yes。虽然初期学习曲线稍陡，但它的类型提示能极大减少低级错误，是现代前端开发的标配。别怕，Vue对TS的支持非常好。
  • JSX：先选 No。Vue主推的是单文件组件（SFC）模板语法，更直观易学。
  • Vue Router：选 Yes。这是实现vue路由、vue路由参数功能的核心，哪怕你现在觉得用不到，几乎任何稍复杂的项目都需要。
  • Pinia：选 Yes。这是Vue官方推荐的状态管理库，替代旧的Vuex，更简单直观。用于管理跨组件的共享状态。
  • 其他选项（如测试工具、Eslint）：按需选择，初学者可以先不选，保持项目简洁。

一路回车后，按照终端的提示，进入项目目录，安装依赖并启动开发服务器：

cd your-project-name pnpm install pnpm run dev

几秒钟后，浏览器打开http://localhost:5173，你就看到了Vue的欢迎页面。这个基于Vite的项目，热更新速度极快，开发体验流畅。

2.2 项目结构初窥与关键文件解读

创建好的项目目录结构清晰，这里挑几个最重要的文件说：

  • index.html：应用的入口HTML文件。注意其中<div id="app"></div>，这是Vue应用挂载的根容器。
  • src/main.js或src/main.ts：应用的主JavaScript/TypeScript入口文件。它的核心工作是创建Vue应用实例并挂载到DOM。
    import { createApp } from 'vue' import App from './App.vue' import router from './router' // 如果选择了Vue Router const app = createApp(App) app.use(router) // 使用路由插件 app.mount('#app') // 挂载到id为‘app’的div上
  • src/App.vue：根组件。所有其他组件都将作为它的子组件存在。这是你开始编写代码的主要地方之一。
  • src/components/：存放可复用组件的目录。
  • src/views/或src/pages/：存放页面级组件的目录（如果使用了路由）。
  • vite.config.js：Vite的配置文件。初期可以不用动，当需要配置代理、别名、构建选项时会用到。

注意：很多初学者会困惑于public文件夹（对应热词vue public文件夹）。放在这个目录下的资源会被直接复制到输出目录的根路径，且不会被Vite处理。适合放像favicon.ico、不被引用的静态文件。而通常在src/assets/下的图片、样式等资源，则会被Vite处理并优化（如转base64、哈希文件名）。

3. 核心概念拆解：模板、响应式与生命周期

理解了项目结构，我们深入到Vue最核心的三个概念，这是回答任何vue面试题的基础。

3.1 模板语法：连接视图与数据的桥梁

Vue的模板是一种基于HTML的语法，让你能够声明式地将组件实例的数据绑定到呈现的DOM上。所有Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析。

1. 文本插值与原始HTML：

<template> <p>消息：{{ message }}</p> <p>原始HTML：<span v-html="rawHtml"></span></p> </template> <script setup> const message = 'Hello Vue!' const rawHtml = '<strong>加粗文本</strong>' </script>

双大括号{{ }}会将数据解释为纯文本。如果要输出真正的HTML，需要使用v-html指令，但务必谨慎，因为它容易导致XSS攻击，永远不要用于用户提交的内容。

2. 属性绑定：动态绑定属性使用v-bind:或其缩写:。这是处理vue 怎么设置动态class、动态样式、动态属性的关键。

<template> <div :class="{ active: isActive, 'text-danger': hasError }">动态Class</div> <button :disabled="isButtonDisabled">按钮</button> <a :href="url">链接</a> </template>

vue 怎么设置动态class的常见用法就是通过对象语法（如上）、数组语法或计算属性，根据条件动态切换类名。

3. 指令：指令是带有v-前缀的特殊属性。v-if,v-for,v-on,v-model是最常用的。

  • v-if/v-show：条件渲染。v-if是真正的条件渲染，元素会被销毁/重建；v-show只是切换CSS的display属性。频繁切换用v-show，运行时条件很少改变用v-if。
  • v-for：列表渲染。必须提供唯一的key属性，这是Vue高效更新虚拟DOM的关键。
    <li v-for="(item, index) in items" :key="item.id">{{ index }} - {{ item.name }}</li>
  • v-on：监听DOM事件，缩写为@。如@click="handleClick"。
  • v-model：在表单输入元素或组件上创建双向数据绑定。它本质上是:value和@input的语法糖。

3.2 响应式系统：数据变化的自动追踪

这是Vue的魔法所在。你改变数据，视图自动更新。在Vue 3的Composition API中，主要通过ref和reactive函数创建响应式数据。

  • ref：用于定义基本类型（字符串、数字、布尔值）或任何值的响应式引用。在脚本中访问/修改需要用.value，在模板中会自动“解包”，直接使用。
    <script setup> import { ref } from 'vue' const count = ref(0) // 创建响应式引用 function increment() { count.value++ // 在脚本中修改需要 .value } </script> <template> <button @click="increment">{{ count }}</button> <!-- 模板中无需 .value --> </template>
  • reactive：用于定义对象类型的响应式数据。不需要.value。
    <script setup> import { reactive } from 'vue' const state = reactive({ count: 0, name: 'Vue' }) function changeName() { state.name = 'Vue 3' } </script>

为什么需要.value？ref返回的是一个包装对象，.value属性指向内部值。这使基本类型也能被响应式系统追踪。而reactive直接代理了整个对象。选择上，基本类型用ref，复杂的对象或关联紧密的一组数据用reactive。

3.3 生命周期钩子：组件生命历程的关键节点

vue生命周期是面试必问。它指的是一个Vue组件从创建、挂载、更新到销毁的整个过程。你可以在特定阶段插入自己的代码。

在Composition API中，生命周期钩子是以onX格式的函数形式引入的：

<script setup> import { onMounted, onUpdated, onUnmounted } from 'vue' onMounted(() => { // 组件挂载完成后执行，适合进行DOM操作、发起异步请求（如`vue获取短信验证码`的初始化） console.log('组件已挂载') }) onUpdated(() => { // 组件因响应式数据变化而更新DOM后执行，慎用，避免无限循环。 }) onUnmounted(() => { // 组件销毁前执行，适合清理定时器、取消事件监听、取消未完成的网络请求。 }) </script>

最重要的几个钩子：onMounted（初始化）、onUpdated（更新后）、onUnmounted（清理）。在Options API中，它们对应mounted，updated，unmounted选项。

4. 组件化开发：构建复杂应用的基石

Vue应用是由一个个组件树构成的。App.vue是根，其他组件是分支和树叶。掌握组件通信和复用是进阶的关键。

4.1 单文件组件（SFC）结构与Props传递

一个.vue文件包含三部分：<template>、<script>、<style>。这就是单文件组件，它让关注点分离变得清晰。

父传子：Props子组件通过defineProps宏来声明它接收的属性。父组件通过属性绑定的方式传递数据。

<!-- ChildComponent.vue --> <script setup> const props = defineProps({ title: String, count: { type: Number, default: 0, required: false } }) // 在脚本中通过 props.title 访问 </script> <template> <h2>{{ title }}</h2> <p>数量：{{ count }}</p> </template> <!-- ParentComponent.vue --> <template> <ChildComponent title="子组件标题" :count="parentCount" /> </template> <script setup> import ChildComponent from './ChildComponent.vue' const parentCount = ref(10) </script>

Props是只读的，子组件不能直接修改。如果需要修改，应该触发一个事件通知父组件去改（子传父）。

4.2 子传父与事件发射

子组件通过defineEmits宏声明它可以触发的事件，并通过emit函数触发。

<!-- ChildComponent.vue --> <script setup> const emit = defineEmits(['updateCount']) // 声明事件 function handleClick() { emit('updateCount', 5) // 触发事件，并传递值5 } </script> <template> <button @click="handleClick">通知父组件</button> </template> <!-- ParentComponent.vue --> <template> <ChildComponent @update-count="handleUpdate" /> <p>父组件计数：{{ count }}</p> </template> <script setup> import ChildComponent from './ChildComponent.vue' const count = ref(0) function handleUpdate(newValue) { count.value = newValue // 接收子组件传递的值并更新 } </script>

注意事件名在子组件用驼峰命名（updateCount），在父组件模板中推荐使用kebab-case（update-count）。

4.3 跨层级通信与状态管理

当组件嵌套很深，或者多个不相关的组件需要共享状态时，频繁的Props/Events会变得繁琐。这时就需要状态管理。对于简单场景，可以使用provide和inject。对于复杂应用，就轮到Pinia（对应热词vue后端管理框架中常集成的部分）登场了。

Pinia快速上手：

  1. 安装：创建项目时已选，或手动pnpm add pinia。
  2. 创建Store：在src/stores/下创建counter.js。
    import { defineStore } from 'pinia' // ‘counter’ 是 store 的唯一ID export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ }, }, getters: { doubleCount: (state) => state.count * 2, }, })
  3. 在组件中使用：
    <script setup> import { useCounterStore } from '@/stores/counter' const counterStore = useCounterStore() </script> <template> <p>{{ counterStore.count }}</p> <p>双倍：{{ counterStore.doubleCount }}</p> <button @click="counterStore.increment()">增加</button> </template>

Pinia的Store是响应式的，可以直接修改state（counterStore.count++），但推荐通过actions修改，逻辑更集中。它完美解决了跨组件状态共享的问题，是构建中大型Vue应用的标配。

5. 路由与导航：构建单页面应用（SPA）的骨架

单页面应用（SPA）的所有内容都在一个HTML页面中动态加载和替换，vue路由（Vue Router）就是管理这个“动态替换”的管家。它让应用看起来像有多个页面，实现了无刷新的视图切换。

5.1 路由配置与视图渲染

创建项目时如果选择了Vue Router，src/router/index.js已经配置好了。核心是routes数组，它定义了路径（path）和组件（component）的映射关系。

import { createRouter, createWebHistory } from 'vue-router' import HomeView from '../views/HomeView.vue' const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes: [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', // 路由级代码分割，生成单独的代码块（about.[hash].js） // 当访问路由时才会加载这个组件，优化首屏加载 component: () => import('../views/AboutView.vue') }, { path: '/user/:id', // 动态路由，匹配 /user/1, /user/abc 等 name: 'user', component: () => import('../views/UserView.vue') } ] })

在根组件App.vue中，你需要一个<router-view>来作为路由组件的渲染出口。

<!-- App.vue --> <template> <header>...</header> <main> <!-- 当前路由匹配的组件将渲染在这里 --> <router-view /> </main> <footer>...</footer> </template>

5.2 导航方式与参数获取

导航有两种方式：声明式<router-link>和编程式router.push。

<template> <!-- 声明式导航，会被渲染成 <a> 标签 --> <router-link to="/">首页</router-link> <router-link :to="{ name: 'user', params: { id: 123 }}">用户123</router-link> <button @click="goToAbout">去关于页</button> </template> <script setup> import { useRouter } from 'vue-router' const router = useRouter() const goToAbout = () => { // 编程式导航 router.push('/about') // 或者使用命名路由 // router.push({ name: 'about' }) } </script>

在目标组件（如UserView.vue）中，如何获取vue路由参数（如上面的:id）？

<script setup> import { useRoute } from 'vue-router' const route = useRoute() // 获取动态段参数 const userId = route.params.id // 类型是 string | string[] // 获取查询参数（如 /user/123?name=vue） const userName = route.query.name </script>

注意：route.params和route.query都是响应式的，但直接解构会失去响应性。如果需要响应式解构，可以使用toRefs：const { params, query } = toRefs(route)。

5.3 导航守卫：控制访问权限

导航守卫主要用于权限控制。例如，检查用户是否登录，未登录则跳转到登录页。

// 在 router/index.js 中 router.beforeEach((to, from) => { // 假设有一个全局状态存储登录信息 const isAuthenticated = /* 从Pinia store或本地存储获取 */ false // 检查目标路由是否需要认证（可以通过路由元信息 meta 定义） if (to.meta.requiresAuth && !isAuthenticated) { // 重定向到登录页 return { name: 'login' } } // 否则，继续导航 })

你可以在路由配置中定义meta字段来标记哪些路由需要守卫。

6. 工程化实践：从开发到部署的完整链路

掌握了核心概念，我们来看看如何把一个Vue项目变成真正可上线的产品。这涉及到构建、优化、部署等一系列工程化问题。

6.1 开发工具与调试

  • 浏览器开发者工具：安装Vue Devtools浏览器扩展（对应热词vue devtools插件下载）。这是调试Vue应用的利器，可以查看组件树、状态、事件，甚至进行时间旅行调试。在Chrome或Firefox商店搜索即可下载。
  • 代码编辑器：VS Code + Volar扩展是当前开发Vue的绝配。Volar提供了强大的语法高亮、类型提示、自动补全。确保禁用旧的Vetur扩展。
  • 代码规范：项目创建时如果选择了ESLint和Prettier，它们会自动帮你格式化代码并检查潜在问题。保持一致的代码风格对团队协作至关重要。

6.2 构建与部署

开发完成后，需要构建生产版本。

pnpm run build

这个命令会调用Vite，将你的源代码（.vue，.js文件）进行打包、压缩、代码分割、Tree-shaking等优化，输出到dist目录。dist目录里是纯粹的HTML、CSS、JS和静态资源，可以被任何静态文件服务器托管。

部署到不同环境：

  • 静态托管（如GitHub Pages, Vercel, Netlify）：最简单。只需将dist目录的内容上传即可。注意，如果使用了createWebHistory模式（干净URL，无#），需要在服务器配置中设置所有路由都回退到index.html（单页应用重定向）。
  • Nginx部署（对应热词linux部署vue）：
    server { listen 80; server_name your-domain.com; root /path/to/your/dist; index index.html; location / { try_files $uri $uri/ /index.html; # 关键：SPA重定向 } # 可以添加静态资源缓存、Gzip压缩等优化配置 }
  • 与后端集成（如springboot vue前后端分离）：前端构建产物（dist）可以放到Spring Boot项目的src/main/resources/static目录下，Spring Boot会将其作为静态资源服务。更常见的做法是前后端完全分离，部署在不同的服务器或容器，通过API通信，前端通过Nginx或CDN独立部署。

6.3 常见问题排查（踩坑实录）

这里结合热词，列举几个高频问题：

  • vue启动后浏览器访问不了：首先检查终端是否成功启动，端口是否被占用（默认5173）。如果是部署后访问不了，检查服务器防火墙是否开放了对应端口，以及Nginx等代理配置是否正确。
  • vue获取元素距离顶部位置：在Vue中，应避免直接使用document.querySelector。应在组件挂载后（onMounted），通过模板引用（ref）来获取DOM元素并计算位置。
    <template> <div ref="myElement">...</div> </template> <script setup> import { ref, onMounted } from 'vue' const myElement = ref(null) // 创建模板引用 onMounted(() => { if (myElement.value) { const rect = myElement.value.getBoundingClientRect() const distanceFromTop = rect.top + window.pageYOffset console.log('距离顶部：', distanceFromTop) } }) </script>
  • 在vue项目中添加全局提示框：这通常需要创建一个全局组件（如Message）并通过Vue插件机制或依赖注入（provide/inject）使其在任何组件内可调用。更优雅的做法是使用像Element Plus、Naive UI这样的UI库，它们已经提供了现成的、可通过方法调用的全局消息/通知组件。
  • idea怎么打包vue项目：如果你使用IntelliJ IDEA或WebStorm，通常不需要在IDE内找打包按钮。正确做法是打开内置的终端（Terminal），在项目根目录执行npm run build或pnpm run build命令。IDE只是提供了一个集成的终端和代码编辑器，打包行为由package.json中的脚本定义。

7. 生态与进阶：下一步该学什么？

当你掌握了上述基础，就可以根据项目需求探索Vue丰富的生态。

  • UI组件库：加速开发的不二法门。国内主流有Element Plus（桌面端）、Vant（移动端），国外有Naive UI、Quasar等。它们提供了按钮、表单、表格、弹窗等大量预制组件。
  • 可视化图表：如热词amchart vue，还有更流行的ECharts、AntV都有优秀的Vue集成方案。
  • 动画：Vue提供了内置的<Transition>和<TransitionGroup>组件来处理进入/离开和列表动画。复杂动画可以考虑GSAP或anime.js。
  • SSR/SSG：如果你需要更好的SEO或首屏性能，可以学习Nuxt.js。它是一个基于Vue的元框架，默认支持服务端渲染（SSR）和静态站点生成（SSG），极大地简化了配置。
  • 移动端与跨端：uniapp是怎么把vue代码转化成html的？UniApp是一个使用Vue语法开发多端应用（小程序、H5、App）的框架。它通过编译器将你的Vue组件代码编译成各平台原生能运行的代码，并不是直接转化成HTML，对于小程序会生成WXML/WXSS，对于App会生成原生渲染代码。
  • 状态管理进阶：深入理解Pinia的插件、持久化存储（如pinia-plugin-persistedstate）、以及如何组织大型项目中的Store模块。
  • 性能优化：关注虚拟DOM、组件懒加载（异步组件）、keep-alive、列表渲染优化（key的使用）、计算属性和侦听器的合理使用等。

学习Vue最好的方式永远是动手。从一个简单的TODO List开始，逐步加入路由、状态管理，尝试集成一个UI库，连接一个真实的后端API（比如springboot vue 失物招领这种小项目idea），在解决实际问题的过程中，你会对上述概念有更深刻的理解。遇到问题，多查官方文档（vue官网，尤其是vue官网中文3.0），多利用Vue Devtools观察组件状态和数据流，社区的解决方案通常也很丰富。记住，框架是工具，核心思想是组件化、响应式和声明式编程，掌握了这些，无论Vue未来如何迭代，你都能快速上手。

编程学习 学习日记 实战经验
← 返回列表