app

terry 6个月前 (06-05) 阅读数 169 #Vue

想快速入门前端框架,Vue2 绝对是友好度拉满的选择！轻量化的设计、直观的响应式原理、丰富的生态，让很多新手能快速摸到前端开发的门道，但“快速上手”不是瞎摸索，得抓准关键步骤和核心概念，今天就用问答形式，把 Vue2 从环境搭建到实战踩坑的事儿聊透，帮你少走弯路～

Vue2 开发环境怎么快速搭起来？

想写 Vue2 代码，得先把开发环境弄好，不同场景选不同方式：

快速体验：CDN 引入

要是你就想临时写个小 Demo、验证语法，直接用 CDN 引入最方便！打开 HTML 文件，复制两行代码，浏览器里就能跑：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

这种方式不用装任何工具,写完 HTML 直接在浏览器打开，适合快速试错，但要是做正经项目，得用工程化工具。

工程化开发：Vue CLI

做项目时,要代码规范、依赖管理、打包上线，得用 Vue 官方脚手架 Vue CLI，步骤如下：

先装 Node.js（版本建议 10+，装完后命令行输 node -v 能看到版本号）。
装 Vue CLI：命令行执行 npm install -g @vue/cli（Mac 或 Linux 可能要加 sudo）。
新建项目：执行 vue create my-project，选配置（新手选默认的 babel + eslint 就行，也能手动选功能）。
启动项目：进入项目目录 cd my-project，再执行 npm run serve，浏览器打开 http://localhost:8080 就能看到默认页面～

进阶选择：Vite（慎选，Vue2 支持有限）

Vite 是更现代的构建工具，启动快、热更新爽，但对 Vue2 的支持没 Vue3 好，要是你学 Vue2 同时想了解新工具，也能试试：

npm init vite@latest my-vue2-app --template vue@2

不过新手阶段优先把 Vue CLI 玩熟，再碰 Vite 更稳～

Vue2 最核心的基础概念有哪些？

基础打牢了,后面学啥都顺，Vue2 最核心的就是 实例、数据绑定、指令、组件 这几块，一个一个拆：

Vue 实例：项目的「心脏」

每个 Vue 应用都从 new Vue() 开始，它像个容器，把数据、方法、生命周期钩子全装进去。

new Vue({
  el: '#app', // 挂载到页面的 DOM 元素（<div id="app"></div>）
  data: { // 响应式数据：数据变了，页面自动更新
    message: 'Hello Vue!'
  },
  methods: { // 方法：处理事件、逻辑
    sayHi() {
      alert(this.message)
    }
  }
})

el 是“挂载点”，告诉 Vue 要控制页面哪个区域；data 里的变量一改，页面立马跟着变——这就是 Vue 响应式的魅力～

数据绑定：让数据和页面联动

Vue 提供了三种常用的“数据→页面”联动方式：

插值表达式（{{}}）：把 data 里的变量直接插到页面。<p>{{ message }}</p>，页面就显示 Hello Vue!。
v-bind（缩写）：给 HTML 属性绑定数据。<img :src="imgUrl">，imgUrl 是 data 里的变量，图片路径就能动态变化。
v-model：双向绑定，常用在表单元素（输入框、单选框这些）。<input v-model="username">，输入时 data 里的 username 会同步变；data 改了，输入框内容也会变，双向互通～

指令：Vue 特有的「语法糖」

指令以 v- 开头，是 Vue 帮我们操作 DOM 的捷径，常用的有这些：

v-if / v-show：控制元素显示隐藏。v-if 是“真删 DOM”，适合少切换的场景；v-show 是“改 display: none”，适合频繁切换。
v-for：循环渲染列表。<li v-for="(item, index) in list" :key="index">{{ item }}</li>，list 是 data 里的数组，key 用来帮 Vue 识别元素（必须写，否则控制台报错）。
v-on（缩写）：绑定事件。<button @click="sayHi">点我</button>，点击按钮就执行 sayHi 方法～

组件：前端「模块化」的关键

组件能把页面拆成小模块,重复用还方便维护，比如做个“按钮组件”：

// 全局注册：所有页面都能直接用
Vue.component('MyButton', {
  props: ['label'], // 接收父组件传的值
  template: '<button>{{ label }}</button>'
})
// 局部注册：只在当前 Vue 实例里用
new Vue({
  components: {
    'MyButton': { /* 组件配置 */ }
  }
})

用的时候就像 HTML 标签：<MyButton label="提交"></MyButton>，组件间传值靠 props（父传子）和 $emit（子传父），比如子组件触发事件 this.$emit('click-event')，父组件用 @click-event="handle" 接收～

怎么用 Vue2 做个简单页面 demo 练手？

光看理论没用,写个小项目才能把知识串起来，比如做个「待办事项列表（Todo List）」，功能基础但能覆盖核心知识点，步骤如下：

搭结构（用 Vue CLI 新建项目后，修改 `App.vue`）

<template>
  <div id="app">
    <h2>我的待办清单</h2>
    <!-- 输入框 + 按钮 -->
    <input v-model="newTodo" placeholder="输入待办事项">
    <button @click="addTodo">添加</button>
    <!-- 列表展示 -->
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="deleteTodo(index)">删除</button>
      </li>
    </ul>
  </div>
</template>

写逻辑（`script` 部分）

export default {
  name: 'App',
  data() { 
    // Vue2 里组件的 data 要写成函数，避免多个组件共享数据
    return {
      newTodo: '', // 输入框的内容
      todos: []    // 待办列表数组
    }
  },
  methods: {
    addTodo() {
      if (this.newTodo.trim()) { // 非空才添加
        this.todos.push(this.newTodo)
        this.newTodo = '' // 清空输入框
      }
    },
    deleteTodo(index) {
      this.todos.splice(index, 1) // 删掉对应下标元素
    }
  }
}

加样式（`style` 部分，简单美化）

  margin: 50px auto;
}
input {
  padding: 8px;
  margin-right: 5px;
}
button {
  padding: 8px 15px;
  cursor: pointer;
}
li {
  list-style: none;
  margin: 10px 0;
}

写完后运行 npm run serve，打开页面就能输入事项、添加、删除了～这个 Demo 里，v-model 绑定输入框，v-for 循环渲染列表，@click 绑定事件，data 和 methods 配合处理数据，是不是把基础概念都用上了？自己动手改改样式、加个“编辑”功能，还能更熟练～

Vue2 项目里常见报错咋解决？

新手写代码,报错是常态，别怕！先看懂报错信息，再找原因，举几个高频问题：

「Property or method "xxx" is not defined on the instance but referenced during render」

意思是你用了一个没定义的变量/方法，检查这几点：

data 里有没有声明这个变量？比如用了 {{ name }}，但 data 里没写 name: ''。
methods 里的方法名拼错没？@click="sayhi"，但方法是 sayHi()，大小写或者拼写错了。
箭头函数坑！methods 里用 sayHi: () => { ... }，this 会指向 window，而不是 Vue 实例，改成普通函数 sayHi() { ... } 就好。

「Component name "xxx" should always be multi-word」

这是 Vue CLI 里 ESLint 的规则，要求组件名用 多个单词（避免和 HTML 内置标签冲突，Button 改成 MyButton），解决方法：

组件名改成多单词,MyHeader、TodoItem。
要是不想改,在项目根目录的 .eslintrc.js 里关规则：
```
rules: {
  'vue/multi-word-component-names': 'off'
}
```

「v-model 绑定后，数据改了页面没反应」

v-model 只在 表单元素（input、textarea、select 这些）上双向绑定生效，如果绑在 div 上肯定没用！Vue2 里直接给对象新增属性不会触发响应式。this.user.age = 18（user 是 data 里的对象，但初始化时没 age），得用 this.$set(this.user, 'age', 18)。

「Maximum recursive updates exceeded」

递归更新溢出,一般是因为在计算属性（computed）或者监听器（watch）里，修改了触发自身更新的变量。computed 里的函数又改了自己依赖的 data，导致无限循环，检查逻辑，把循环依赖的地方拆解开。

学完基础后，怎么往深入走？

基础掌握后,得往「工程化、生态、优化」方向拓展——这些是实际项目里离不开的：

路由管理：Vue Router

单页面应用（SPA）要实现页面跳转，得用 Vue Router，步骤：

装依赖：npm install vue-router@3（Vue2 对应 router 3.x 版本）。

配路由：新建 router.js，定义路由规则、创建路由实例：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
Vue.use(Router)
export default new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

挂载到 Vue 实例：在 main.js 里引入 router，加到 new Vue({ router }) 里。
页面里用 <router-link to="/about">lt;/router-link> 跳转，<router-view> 显示匹配的组件。
进阶玩法：嵌套路由（比如首页里的子页面）、编程式导航（this.$router.push('/about')）。

状态管理：Vuex

多个组件共享数据（比如用户信息、购物车），用 Vuex 更高效，核心概念：

State：存全局数据，state: { user: {} }。
Mutations：修改 state 的唯一方式（同步操作），mutations: { SET_USER(state, data) { state.user = data } }。
Actions：处理异步（比如调接口），然后提交 mutation，actions: { fetchUser({ commit }) { axios.get(...).then(res => commit('SET_USER', res.data)) } }。
Getters：类似计算属性，处理 state 里的数据，getters: { userNickname: state => state.user.nickname }。

小项目也可以用「store 模式」临时替代：新建 store.js，导出一个包含 data 和 methods 的对象，组件里引入使用。

UI 组件库：Element UI

想快速做后台管理页面,Element UI 是 Vue2 生态里的经典选择，步骤：

装依赖：npm i element-ui。

全局引入：在 main.js 里

import ElementUI from 'element-ui'; 
import 'element-ui/lib/theme-chalk/index.css'; 
Vue.use(ElementUI);

用组件：<el-button type="primary">主要按钮</el-button>，直接抄文档示例，改参数就行。
按需引入：减少打包体积，用 babel-plugin-component 配置，只引入用到的组件。

性能优化：让项目跑得更快

组件缓存：用 <keep-alive> 包裹 <router-view>，缓存不活跃的组件，避免重复渲染：
```
<keep-alive>
  <router-view></router-view>
</keep-alive>
```
异步组件：把大组件拆分成异步加载，打包时分开 chunk，加快首屏速度：
```
const About = () => import('./views/About.vue')
```
减少响应式开销：不是所有数据都要响应式，比如纯展示的列表，用 Object.freeze(data) 冻结，不让 Vue 做依赖收集。
事件销毁：自定义事件（$on）在组件销毁前要 $off，避免内存泄漏。

Vue2 入门不难，但要真正用熟，得把「基础概念→小项目实践→生态拓展→踩坑解决」这串链路走通，刚开始别追求完美，先把环境跑起来，写几个小 Demo 练手感，遇到报错别怕，顺着错误信息找原因（控制台报错里的文件名、行数很关键），等基础扎实了，再去碰路由、Vuex 这些，慢慢就能独立做项目啦～要是过程中卡壳，回头看文档、搜社区（比如官方文档写得超详细，遇到组件通信、生命周期这些复杂点，反复读文档比瞎试高效多了），前端技术更新快，但 Vue2 的核心思想（响应式、组件化）在 Vue3 里也一脉相承，把 Vue2 学透了，后续转 Vue3 也会更顺～

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：一、vue2里挑二维码读取工具，选哪个更顺手？下一篇：Vue2 Quasar 协同开发有啥核心优势？

发表评论:取消回复

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。

app