Vue 练习填坑笔记：用心记录，扫清障碍

Vue 练习填坑笔记：用心记录，扫清障碍

作为一名前端开发人员，最近我一直在学习 Vue.js。这是一个非常流行的 JavaScript 框架，可以帮助我们快速构建用户界面。为了更好地掌握 Vue.js，我决定写一个简单的 demo，模仿网易音乐 h5 页面效果。这个项目虽然内容比较简单，只实现了基本的功能，但也让我学到了很多东西。同时，也遇到了一些坑，在此简单记录下遇到的坑以及简单的填坑记录。

坑一：Vue 路由动态路由

通常我们写的路由都是静态路由，就是写死路由的名字，但是有时我们需要根据某些条件来动态地生成路由。比如，在网易音乐 h5 页面中，歌曲列表是根据用户搜索的关键词动态生成的。为了实现这个功能，我们需要使用 Vue Router 的动态路由功能。

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/search/:keyword',
      component: () => import('@/views/SearchResult.vue')
    }
  ]
})

在上面的代码中，我们定义了一个名为 /search/:keyword 的动态路由。当用户访问这个路由时，Vue Router 会自动将 :keyword 的值作为参数传递给 SearchResult.vue 组件。

坑二：Vuex 状态管理

在大型项目中，我们需要管理很多状态。如果直接将这些状态存储在组件中，可能会导致代码混乱和难以维护。为了解决这个问题，我们可以使用 Vuex 来进行状态管理。

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    keyword: ''
  },
  mutations: {
    setSearchKeyword (state, keyword) {
      state.keyword = keyword
    }
  },
  actions: {
    searchSongs ({ commit }, keyword) {
      // 发起网络请求，获取歌曲列表
      commit('setSearchKeyword', keyword)
    }
  }
})

export default store

在上面的代码中，我们创建了一个 Vuex store，并定义了一个名为 keyword 的状态。我们还定义了一个名为 setSearchKeyword 的 mutation，用于更新 keyword 的值。最后，我们定义了一个名为 searchSongs 的 action，用于发起网络请求，获取歌曲列表。

坑三：Vant UI 库

Vant UI 是一个非常流行的移动端 UI 库。它提供了丰富的组件，可以帮助我们快速构建移动端应用。但是在使用 Vant UI 库时，我遇到了一些坑。

// App.vue
<template>
  <div id="app">
    <van-tabbar>
      <van-tabbar-item to="/">首页</van-tabbar-item>
      <van-tabbar-item to="/search">搜索</van-tabbar-item>
      <van-tabbar-item to="/mine">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { createApp } from 'vue'
import App from './App.vue'
import { Tabbar, TabbarItem } from 'vant'

const app = createApp(App)

app.use(Tabbar)
app.use(TabbarItem)

app.mount('#app')
</script>

在上面的代码中，我们使用 Vant UI 库的 Tabbar 和 TabbarItem 组件。但是，当我们运行项目时，却发现 Tabbar 组件没有显示出来。经过一番排查，我发现这是因为我没有在 main.js 文件中全局注册 Vant UI 库。

// main.js
import Vue from 'vue'
import App from './App.vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)

const app = new Vue({
  render: h => h(App)
})

app.$mount('#app')

在上面的代码中，我们全局注册了 Vant UI 库，并引入了 Vant UI 库的样式文件。这样，Tabbar 组件就可以正常显示了。

总结

以上就是我在学习 Vue.js 过程中遇到的坑和问题。通过解决这些问题，我不仅学到了很多东西，也对 Vue.js 有了更深入的了解。希望通过分享这些经验，能够帮助其他 Vue 初学者少走弯路，更轻松地掌握 Vue.js。

除了上面提到的坑之外，在学习 Vue.js 的过程中，我还遇到了一些其他问题。比如，如何优化 Vue.js 项目的性能，如何进行 Vue.js 项目的测试，如何使用 Vue.js 构建大型项目等等。这些问题我都还在继续学习和探索。我相信，只要不断努力，就一定能掌握 Vue.js，并用它来构建出更加出色