从 0 开始学习 VUE 的踩坑记录

1. 安装插件时没有将信息写入 package.json 文件

例如，当需要安装 vue-router 插件时，我通过以下命令安装：

npm install vue-router

安装成功后，我发现 package.json 文件中的依赖信息中却没有 vue-router。后来查询资料后，我才发现需要使用以下命令才能将插件信息写入 package.json 文件：

npm install vue-router --save

2. 忘记在 App.vue 文件中引入插件

在使用插件时，我经常会忘记在 App.vue 文件中引入插件。这会导致插件无法正常工作。例如，在使用 vue-router 插件时，需要在 App.vue 文件中引入该插件并将其添加到 Vue 实例的 plugins 选项中。

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

3. 路由配置不正确

在使用 vue-router 插件时，我经常会遇到路由配置不正确的问题。例如，我可能会忘记指定路由的 path 或 component 属性。这会导致路由无法正常工作。

// 错误的路由配置
const router = new VueRouter({
  routes: [
    { component: Home }, // 忘记指定 path 属性
    { path: '/about', component: About } // 忘记指定 component 属性
  ]
})

// 正确的路由配置
const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

4. 组件之间通信不当

在 VUE 中，组件之间可以相互通信。但是，如果通信方式不当，很容易出现问题。例如，我经常会遇到组件之间通信时，数据传递不正确的问题。这会导致组件无法正常工作。

// 父组件
<template>
  <child-component :message="message"></child-component>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, world!'
    }
  }
}
</script>

// 子组件
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  props: ['message']
}
</script>

在上面的代码中，父组件将 message 数据传递给子组件。但是，子组件没有将 message 作为 prop 接收。这会导致子组件无法正常显示 message 数据。

5. 不小心使用了 HTML 格式

在 VUE 中，可以使用 HTML 格式来编写模板。但是，如果不注意，很容易在模板中使用 HTML 格式的元素。这会导致编译器无法正常编译模板。

// 错误的模板
<template>
  <h1>{{ title }}</h1>
</template>

// 正确的模板
<template>
  <h1 v-text="title"></h1>
</template>

在上面的代码中，错误的模板使用了 HTML 格式的元素

。这会导致编译器无法正常编译模板。正确的模板使用 v-text 指令将 title 数据绑定到

元素。

总结

以上就是我从 0 开始学习 VUE 时遇到的踩坑经历。希望这些经验能够帮助其他初学者避免踩坑。在学习 VUE 的过程中，除了要学习 VUE 的基本知识外，还要注意一些容易踩的坑。只有这样，才能快速掌握 VUE 的开发技巧。