Vue.js 构建一个移动端美食应用

应用场景介绍

随着移动互联网的普及，美食类应用在人们的生活中扮演着越来越重要的角色。本文将介绍如何使用 Vue.js 构建一个移动端美食应用，该应用包含了菜谱搜索、菜品推荐、美食资讯等功能。

代码基本功能介绍

该代码实现了以下基本功能：

• 菜谱搜索：用户可以输入关键词搜索菜谱。
• 菜品推荐：应用会根据用户的喜好推荐菜品。
• 美食资讯：应用会提供最新的美食资讯。
• 菜谱详情：用户可以查看菜谱的详细信息，包括食材、做法等。
• 用户中心：用户可以管理自己的个人信息，收藏菜谱等。

功能实现步骤及关键代码分析说明

1. 构建 Vue.js 项目

vue create my-food-app

2. 安装依赖

npm install vue-router vuex axios

3. 创建 Vuex 状态管理

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    recipes: [],
    recommendations: [],
    news: [],
  },
  mutations: {
    setRecipes(state, recipes) {
      state.recipes = recipes
    },
    setRecommendations(state, recommendations) {
      state.recommendations = recommendations
    },
    setNews(state, news) {
      state.news = news
    },
  },
  actions: {
    fetchRecipes({ commit }) {
      axios.get('/api/recipes').then(res => {
        commit('setRecipes', res.data)
      })
    },
    fetchRecommendations({ commit }) {
      axios.get('/api/recommendations').then(res => {
        commit('setRecommendations', res.data)
      })
    },
    fetchNews({ commit }) {
      axios.get('/api/news').then(res => {
        commit('setNews', res.data)
      })
    },
  },
})

export default store

4. 创建路由

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import RecipeDetail from '../views/RecipeDetail.vue'
import UserCenter from '../views/UserCenter.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/recipe/:id',
    name: 'RecipeDetail',
    component: RecipeDetail
  },
  {
    path: '/user',
    name: 'UserCenter',
    component: UserCenter
  },
]

const router = new VueRouter({
  routes
})

export default router

5. 创建组件

// components/RecipeList.vue
<template>
  <ul>
    <li v-for="recipe in recipes" :key="recipe.id">
      <a :href="'/recipe/' + recipe.id">{{ recipe.title }}</a>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['recipes'])
  }
}
</script>

// components/RecipeDetail.vue
<template>
  <div>
    <h1>{{ recipe.title }}</h1>
    <p>{{ recipe.description }}</p>
    <ul>
      <li v-for="ingredient in recipe.ingredients" :key="ingredient">{{ ingredient }}</li>
    </ul>
    <ul>
      <li v-for="step in recipe.steps" :key="step">{{ step }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['recipe'])
  }
}
</script>

6. 编写主应用

// App.vue
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['recipes', 'recommendations', 'news'])
  }
}
</script>

总结与展望

通过本文介绍的步骤，可以构建一个基本的移动端美食应用。在未来，可以进一步拓展和优化该应用，例如：

• 集成地图功能，允许用户搜索附近的餐厅。
• 添加社交功能，允许用户分享菜谱和评论。
• 使用机器学习技术，为用户推荐个性化的菜谱。