基于vue写一个微商城App的具体代码实现

很抱歉，由于篇幅限制，这里无法提供完整的代码实现。但我可以给您提供一个大致的代码框架，供您参考：

1. 项目结构：

├── public
│   ├── index.html
│   └── favicon.ico
├── src
│   ├── api
│   │   ├── goods.js
│   │   ├── cart.js
│   │   └── order.js
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── utils
│   ├── views
│   ├── App.vue
│   └── main.js
├── .eslintrc.js
├── babel.config.js
├── package.json
└── vue.config.js

2. UI 框架：

这里以 Element UI 为例，可以在 `main.js` 中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 接口请求：

这里以 Axios 为例，可以在 `api` 目录下创建一个 `goods.js` 文件，用于发送商品列表请求：

import Axios from 'axios';

export function getGoodsList(params) {
  return Axios.get('/api/goods', { params });
}

4. 数据管理：

这里以 Vuex 为例，可以在 `store` 目录下创建一个 `cart.js` 文件，用于管理购物车数据：

const state = {
  cartList: []
};

const mutations = {
  addGoodsToCart(state, goods) {
    state.cartList.push(goods);
  },
  updateGoodsCount(state, { goodsId, count }) {
    const goods = state.cartList.find(item => item.id === goodsId);
    if (goods) {
      goods.count = count;
    }
  },
  removeGoodsFromCart(state, goodsId) {
    state.cartList = state.cartList.filter(item => item.id !== goodsId);
  }
};

export default {
  namespaced: true,
  state,
  mutations
};

5. 路由管理：

这里以 Vue Router 为例，可以在 `router` 目录下创建一个 `index.js` 文件，用于管理路由：

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

import GoodsList from '../views/GoodsList.vue';
import GoodsDetail from '../views/GoodsDetail.vue';
import Cart from '../views/Cart.vue';
import Order from '../views/Order.vue';
import OrderConfirm from '../views/OrderConfirm.vue';
import OrderPay from '../views/OrderPay.vue';
import OrderComplete from '../views/OrderComplete.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: GoodsList },
  { path: '/goods/:id', component: GoodsDetail },
  { path: '/cart', component: Cart },
  { path: '/order', component: Order },
  { path: '/order/confirm', component: OrderConfirm },
  { path: '/order/pay/:orderId', component: OrderPay },
  { path: '/order/complete/:orderId', component: OrderComplete }
];

const router = new VueRouter({
  mode: 'history',
  routes
});

export default router;

6. 页面设计：

这里以商品列表页为例，可以在 `views` 目录下创建一个 `GoodsList.vue` 文件，实现商品列表的 UI 设计：

<template>
  <div class="goods-list">
    <div v-for="goods in goodsList" :key="goods.id" class="goods-item">
      <div class="goods-image">
        <img :src="goods.cover" alt="" />
      </div>
      <div class="goods-info">
        <h3 class="goods-title">{{ goods.title }}</h3>
        <div class="goods-price">
          <span class="price-symbol">¥</span>
          <span class="price-value">{{ goods.price }}</span>
        </div>
        <div class="goods-action">
          <el-button type="primary" size="small" @click="addToCart(goods)">加入购物车</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters('cart', ['getGoodsCount'])
  },
  methods: {
    ...mapActions('cart', ['addGoodsToCart']),
    addToCart(goods) {
      this.addGoodsToCart(goods);
      this.$message.success('商品已成功加入购物车！');
    }
  }
};
</script>

7. 功能实现：

这里以商品列表、商品详情、购物车、订单管理等核心功能为例，可以在 `views` 目录下创建对应的页面组件，通过调用接口获取数据，并使用 Vuex 进行数据管理和状态控制，实现对应功能。

以上是基于 Vue 框架写微商城 App 的大致代码框架，具体实现细节还需要根据具体需求进行调整。