Vue3和Vant3技术栈下实现网页端掘金APP样式开发初探——圈子搜索功能

2023-12-13 19:03:37

前言

掘金APP是一款深受广大技术人员喜爱的知识分享社区，其界面设计简洁大方，功能丰富齐全，受到广大技术人员的喜爱。本篇文章将带领大家使用Vue3和Vant3技术栈，开发一个具有搜索功能的圈子列表网页，同时分享一些在开发过程中遇到的问题和解决方案。

技术栈

Vue3：一个渐进式JavaScript框架，用于构建用户界面。
Vant3：一个移动端UI库，基于Vue3开发，提供了丰富的组件和样式。
Axios：一个基于Promise的HTTP库，用于发送HTTP请求。
Pinia：一个轻量级的状态管理库，用于在组件之间共享状态。

开发步骤

1. 搭建项目环境

首先，我们需要创建一个Vue3项目。我们可以使用Vue CLI工具来快速搭建项目环境。

vue create vue3-circle-search

2. 安装依赖

接下来，我们需要安装Vue3和Vant3等依赖。

cd vue3-circle-search
npm install vue@next vant@next axios pinia

3. 创建组件

接下来，我们需要创建组件。我们将创建一个CircleList组件来显示圈子列表，一个CircleSearch组件来实现圈子搜索功能。

# 创建CircleList组件
vue create component CircleList

# 创建CircleSearch组件
vue create component CircleSearch

4. 实现组件功能

在CircleList组件中，我们需要实现圈子列表的显示功能。我们可以使用Vant3的List组件来实现。

<template>
  <van-list>
    <van-cell v-for="item in circleList" :key="item.id">
      {{ item.name }}
    </van-cell>
  </van-list>
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useStore } from 'pinia';

export default defineComponent({
  setup() {
    const store = useStore();
    const circleList = ref(store.getters['circle/getCircleList']);

    return {
      circleList,
    };
  },
});
</script>

在CircleSearch组件中，我们需要实现圈子搜索功能。我们可以使用Vant3的SearchBar组件来实现。

<template>
  <van-search-bar
    v-model="keyword"
    placeholder="搜索圈子"
    @input="onSearch"
  />
</template>

<script>
import { defineComponent, ref } from 'vue';
import { useStore } from 'pinia';

export default defineComponent({
  setup() {
    const store = useStore();
    const keyword = ref('');

    const onSearch = () => {
      store.dispatch('circle/searchCircle', keyword.value);
    };

    return {
      keyword,
      onSearch,
    };
  },
});
</script>

5. 创建页面

接下来，我们需要创建一个页面来集成CircleList组件和CircleSearch组件。

<template>
  <div>
    <circle-search />
    <circle-list />
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'CirclePage',
});
</script>

6. 注册组件和页面

接下来，我们需要在main.js文件中注册组件和页面。

import { createApp } from 'vue';
import App from './App.vue';
import CircleList from './components/CircleList.vue';
import CircleSearch from './components/CircleSearch.vue';
import CirclePage from './pages/CirclePage.vue';

const app = createApp(App);

app.component('circle-list', CircleList);
app.component('circle-search', CircleSearch);
app.component('circle-page', CirclePage);

app.mount('#app');

7. 运行项目

最后，我们可以运行项目。

npm run serve

遇到的问题和解决方案

1. Vant3组件样式失效

在开发过程中，我们遇到了Vant3组件样式失效的问题。这个问题是由于我们在main.js文件中没有正确引入Vant3的样式文件造成的。解决办法是将Vant3的样式文件引入到main.js文件中。

import 'vant/es/style/index';

2. Axios请求失败

在开发过程中，我们还遇到了Axios请求失败的问题。这个问题是由于我们在Axios请求中没有正确设置请求头造成的。解决办法是将请求头添加到Axios请求中。

axios.get('/api/circle/list', {
  headers: {
    'Content-Type': 'application/json',
  },
});

总结

本文介绍了如何使用Vue3和Vant3技术栈开发一个具有搜索功能的圈子列表网页。我们首先搭建了项目环境，然后安装了依赖，然后创建了组件和页面，最后注册了组件和页面并运行了项目。在开发过程中，我们还遇到了Vant3组件样式失效和Axios请求失败的问题，并找到了解决办法。希望本文对有兴趣开发类似项目的朋友有所帮助。