Vue.js仿饿了么外卖App

2024-01-20 04:29| 来源: 网络整理| 查看: 265

文章目录一、概述1、项目简介2、技术分析二、项目准备1.效果展示2、组件拆分3、安装4、制作图标字体文件5、项目目录构建6、写mock数据接口

一、概述 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 例如

更加详细方法可以参考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',

【本文地址】

公司简介

联系我们

今日新闻

推荐新闻

专题文章