Vue.js仿饿了么外卖App--(1)概述和项目准备

一、概述

1、项目简介

本项目主要实现的是高仿饿了么外卖App的商家模块

2、技术分析

• axios实现和后端的数据交互
• Vue-router路由实现页面切换
• Vue-cli
• 使用better-scroll第三方库实现页面滚动
• css sticky footer布局
• flex弹性布局
• 组件化开发
• webpack构建工具
• ES6+eslint规范代码
• 使用了MVVM框架

二、项目准备

1.效果展示

商品页

评价页

商家详情页

浮层

添加购物

2、组件拆分

根据页面划分，整个项目可以初步划分为header(头部)组件、goods(商品)组件、ratings(评价)组件、seller(商家)组件、App(导航)组件

3、安装

1.vue-cli安装

npm install -g @vue/cli

2.初始化sell项目

vue init webpack sell

3.进入项目目录

cd sell

4.运行项目

npm run dev

4、制作图标字体文件

这里使用的是阿里巴巴图标字体地址
步骤
1、搜索自己想要的字体


2、选择自己想要的图标，加入购物车->添加至项目

3、下载至本地

4、使用：将下载的本家保存在项目的font目录中

在后续使用中可以直接通过图标的class名称进行使用。注意要加上iconfont
例如

<span class="iconfont icon-shoucang" :class="{active:favorite}"></span>

更加详细方法可以参考iconfont网站

5、项目目录构建

common 存放项目的公共模块和资源，例如JS文件、font字体图标文件
components 组件

6、写mock数据接口

部分代码
添加代码的文件位置build\webpack.dev.conf.js

const express = require('express')
const app = express()
const appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
const apiRoutes = express.Router()
app.use('api', apiRoutes)

const HOST = process.env.HOST
const PORT = process.env.PORT && Number(process.env.PORT)

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    before(app) {
      app.get('/api/seller', (req, res) => {
        res.json({
          errno: 0,
          data: seller
        })
      }),
      app.get('/api/goods', (req, res) => {
        res.json({
          errno: 0,
          data: goods
        })
      }),
      app.get('/api/ratings', (req, res) => {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    },
    clientLogLevel: 'warning',