vue 实现 应用市场

Vue 实现应用市场功能

使用 Vue 实现应用市场功能需要结合前端框架和后端数据交互，以下是一个完整的实现方案。

项目结构搭建

使用 Vue CLI 创建项目，安装必要的依赖：

vue create app-market
cd app-market
npm install axios vue-router vuex

路由配置

在 src/router/index.js 中配置路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
import AppDetail from '@/views/AppDetail.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/app/:id', name: 'app-detail', component: AppDetail }
  ]
})

状态管理

在 src/store/index.js 中设置 Vuex 状态管理：

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    apps: [],
    categories: []
  },
  mutations: {
    SET_APPS(state, apps) {
      state.apps = apps
    },
    SET_CATEGORIES(state, categories) {
      state.categories = categories
    }
  },
  actions: {
    async fetchApps({ commit }) {
      const response = await axios.get('/api/apps')
      commit('SET_APPS', response.data)
    },
    async fetchCategories({ commit }) {
      const response = await axios.get('/api/categories')
      commit('SET_CATEGORIES', response.data)
    }
  }
})

应用列表组件

创建 src/components/AppList.vue：

<template>
  <div class="app-list">
    <div v-for="app in apps" :key="app.id" class="app-card">
      <img :src="app.icon" :alt="app.name">
      <h3>{{ app.name }}</h3>
      <p>{{ app.description }}</p>
      <router-link :to="'/app/' + app.id">查看详情</router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    apps: {
      type: Array,
      required: true
    }
  }
}
</script>

<style>
.app-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}
.app-card {
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 8px;
}
</style>

应用详情页

创建 src/views/AppDetail.vue：

<template>
  <div v-if="app" class="app-detail">
    <img :src="app.icon" :alt="app.name">
    <h1>{{ app.name }}</h1>
    <p>{{ app.description }}</p>
    <button @click="download">下载</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      app: null
    }
  },
  async created() {
    const response = await axios.get(`/api/apps/${this.$route.params.id}`)
    this.app = response.data
  },
  methods: {
    download() {
      // 下载逻辑
    }
  }
}
</script>

主页面

修改 src/views/Home.vue：

<template>
  <div class="home">
    <h1>应用市场</h1>
    <AppList :apps="apps" />
  </div>
</template>

<script>
import AppList from '@/components/AppList.vue'
import { mapState } from 'vuex'

export default {
  components: {
    AppList
  },
  computed: {
    ...mapState(['apps'])
  },
  created() {
    this.$store.dispatch('fetchApps')
  }
}
</script>

后端 API 模拟

在 public/api/apps.json 创建模拟数据：

[
  {
    "id": 1,
    "name": "示例应用",
    "description": "这是一个示例应用",
    "icon": "/icons/app1.png"
  }
]

部署配置

在 vue.config.js 中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true
      }
    }
  }
}

功能扩展建议

分类筛选

在状态管理中添加分类过滤功能：

// store/index.js
getters: {
  filteredApps: (state) => (categoryId) => {
    if (!categoryId) return state.apps
    return state.apps.filter(app => app.category === categoryId)
  }
}

搜索功能

添加搜索组件：

<template>
  <input v-model="searchQuery" placeholder="搜索应用">
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  watch: {
    searchQuery(newVal) {
      this.$store.dispatch('searchApps', newVal)
    }
  }
}
</script>

用户评价

添加评价组件：

<template>
  <div class="reviews">
    <div v-for="review in app.reviews" :key="review.id">
      <p>{{ review.content }}</p>
      <span>{{ review.rating }}星</span>
    </div>
  </div>
</template>

性能优化

使用懒加载提高性能：

// router/index.js
const AppDetail = () => import('@/views/AppDetail.vue')

添加分页功能：

// store/actions.js
async fetchApps({ commit }, { page = 1, limit = 10 }) {
  const response = await axios.get(`/api/apps?page=${page}&limit=${limit}`)
  commit('SET_APPS', response.data)
}

以上方案提供了完整的 Vue 实现应用市场的基本架构，可根据实际需求进一步扩展功能。