一、准备工作

1.大前提:已安装好node、 npm、 vue、 vue-cli、stylus(此项目使用stylus来编译)

2.开发软件:Google Chrome(建议安装插件vue-devtools,方便调试),webstorm / sublime Text / VS Code (推荐使用webstorm,sublime 和 VS Code需要安装相应的插件)

3.项目结构

4.项目结构分析

5. 图标准备

推荐在阿里巴巴矢量图库查找需要的图标,官网地址:https://www.iconfont.cn

使用步骤:

a.注册用户

b.按照项目需求将相应的图标添加到库(购物车)

c.点击购物车,将图标添加到项目中

d.选中Font-class,此时会出现相应的代码连接,将链接复制到项目的index.html中,如下所示:

<link href="//at.alicdn.com/t/font_955721_h2wm4c3aixr.css" rel="stylesheet">

此时在编辑vue文件时可以直接使用相应的class=“iconfont icon-xxx”来获取相应的图标。示例:

<span>
<i class="iconfont icon-shangcheng"></i>
</span>

6.编译基础样式

reset.css

二、移动端配置与基础路由配置

1.使编辑页面自适应手机屏幕(解决双击缩放)

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="stylesheet" href="./static/css/reset.css">

2.解决点击响应的延时0.3s问题

300ms延迟问题:移动端的双击缩放

解决方法:使用fastclick,具体查看链接:http://www.cnblogs.com/lyyguniang/p/9284968.html

在index.html中编辑

<script type='application/javascript' src='https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js'></script>
<script>
if('addEventListener' in document) {
document.addEventListener('DOMContentLoaded',function(){
FastClick.attach(document.body);
},false);
}
</script>

3.使用vue-router编辑基础路由

参考链接:http://www.cnblogs.com/SamWeb/p/6610733.html

首先下载vue-router

npm install vue-router --save

index.js

// 导入模块
import Vue from 'vue'
import Router from 'vue-router' // 引入组件
import Msite from '../pages/Msite/Msite.vue'
import Search from '../pages/Search/Search.vue'
import Order from '../pages/Order/Order.vue'
import Profile from '../pages/Profile/Profile.vue' // 告诉vue使用vueRouter
Vue.use(Router) // routes是路由的数组,有两部分组成:path和 component,最后由router来管理路由
export default new Router({
routes: [
{
path: '/',
redirect: '/msite'
},
{
path: '/msite',
component: Msite
},
{
path: '/search',
component: Search
},
{
path: '/order',
component: Order
},
{
path: '/profile',
component: Profile
}
]
})

main.js

import Vue from 'vue'
import App from './App'
// 引用路由
import router from './router' /* eslint-disable no-new */
new Vue({
el: '#app',
render: h => h(App),
router //将路由注入到跟实例中
})

问:什么是render: h=> h(App)

查看链接:https://segmentfault.com/q/1010000007130348

vue-router包含router-link和router-view,前者负责点击跳转,后者负责页面渲染。在饿了么app中,是点击底部导航来跳转到相应的路由页面的,此时在app.vue中导入底部导航组件,当点击相应的图标时,跳转路由

App.vue

<template>
<div id="app">
<router-view/>
<FooterGuide></FooterGuide>
</div>
</template> <script>
import FooterGuide from './components/FooterGuide/FooterGuide.vue'
export default {
components: {
FooterGuide
}
}
</script>
<style lang="stylus" rel="stylesheet/stylus">
.app
width 100%
height 100%
background #f5f5f5
</style>

三、编辑底部导航FooterGuide组件

技术点:用v-on:click,$route实现点击相应图标跳转路由

$route.path和class实现点击相应的图标的时候,图标样式动态改变

问:$router和$route的区别

查看链接:https://www.jianshu.com/p/fa0b5d919615

示例:

       <div class="guide_item" :class="{on: '/msite'===$route.path}" @click="goto('/msite')">
<span class="item_icon">
<i class="iconfont icon-changyonglogo40"></i>
</span>
<span>首页</span>
</div>
<script>
export default {
methods: {
goto (path) {
this.$router.replace(path)
}
}
}
</script>

四、各路由静态页面的编辑

提示:在首页中使用swiper来实现图片轮播

查看官方文档:https://www.swiper.com.cn/

首先npm install swiper --save

接着编写html,大体格式如下:

<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>

编写JavaScript

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
export default {
mounted () {
/* eslint-disable no-new */
new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination'
},
loop: true
})
}
}
</script>

注意:这个时候运行会有一个报错

报错:Do not use 'new' for side effects

解决方法:在new上加上注释 /* eslint-disable no-new */

查看链接:https://www.jianshu.com/p/3a7982110656

五、最后运行npm run dev

六、各种注意点归纳

1.vue运行的时候报错: Parsing error:x-invalid-end-tag

解决方法:https://blog.csdn.net/zy13608089849/article/details/79545738

2.报错:Newline required at end of file but not found

原因:编辑style时底部要空多一行

解决方法:https://www.cnblogs.com/qingqingzou-143/p/7067604.html

3.报错:Component template should contain exactly one root element.

解决方法:https://segmentfault.com/q/1010000008361637

4.在编写stylus样式的时候,切记按着格式编写,如果运行的时候没有报错,但是样式没有显示,估计就是格式编写错误,注意空格

最后附上项目源码:

https://github.com/xinhua6/gshop.git

之后会逐步完善该项目,敬请期待。

基于vue来开发一个仿饿了么的外卖商城(一)的更多相关文章

  1. 基于vue来开发一个仿饿了么的外卖商城(二)

    一.抽出头部作为一个组件,在底部导航的时候可以相应的显示不同的标题 技术点:使用slot进行组件间的通信:父组件给子组件传值(子组件里面通过props接收父组件传过来的数据) 查看链接:https:/ ...

  2. 基于vue模块化开发后台系统——准备工作

    文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 本文章是以学习为主,练习一下v ...

  3. 基于vue模块化开发后台系统——构建项目

    文章目录如下:项目效果预览地址项目开源代码基于vue模块化开发后台系统--准备工作基于vue模块化开发后台系统--构建项目基于vue模块化开发后台系统--权限控制 前言 在熟悉上一篇说到准备工具之后, ...

  4. 与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室

    原文:与众不同 windows phone (31) - Communication(通信)之基于 Socket UDP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...

  5. 与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室

    原文:与众不同 windows phone (30) - Communication(通信)之基于 Socket TCP 开发一个多人聊天室 [索引页][源码下载] 与众不同 windows phon ...

  6. 基于django快速开发一个网站(一)

    基于django快速开发一个网站(一) *  创建虚拟环境.基于虚拟环境创建django==2.0.0和图片加载库和mysql数据库驱动 1. 创建目录并创建虚拟环境 ╰$ mkdir Cornuco ...

  7. 如何基于 PHP-X 快速开发一个 PHP 扩展

    0x01 起步 PHP-X本身基于C++11开发,使用cmake进行编译配置.首先,你需要确定所有依赖项已安装好.包括: gcc-4.8 或更高版本 PHP7.0 或更高版本,需要php7-dev 开 ...

  8. 用Vue.js开发一个电影App的前端界面

    我们要构建一个什么样的App? 我们大多数人使用在线流媒体服务(如Netflix)观看我们最喜欢的电影或者节目.这篇文章将重点介绍如何通过使用vue.js 2 建立一个类似风格的电影流媒体WEB交互界 ...

  9. 基于Vue手写一个下拉刷新

    当然不乏有很多下拉刷新的插件可以直接使用,但是自定义程度不强,大部分都只能改改文字,很难满足设计师的创意,譬如淘宝和京东首页那种效果,就需要自己花心思倒腾了,最近刚好有这种需求,做完了稍微总结一下,具 ...

随机推荐

  1. github 专案介绍 – Python 范例:透过互动式的 Jupyter 和数学解释流行的机器学习演算法

    对于机器学习有兴趣,不少人应该会先从 Andrew Ng ( 吴恩达 ) 的机器学习课程开始,但是吴恩达的课程是使用 octave 这个工具当作练习.这个 github 项目包含使用 Python 实 ...

  2. Windows 2012R2远程桌面服务简介

    一.远程桌面服务概述 远程桌面服务加快并扩展了到任何设备的桌面和应用程序部署,在帮助保护关键知识产权的安全的同时提高了工作人员的工作效率,简化了法规遵从性. 远程桌面服务启用虚拟机基础结构 (VDI) ...

  3. python27 文件读写

    fileobject = open(文件的绝对路径或相对路径,读写模式,其他可选参数) '''r-读 文件不存在报错FileNotFoundError''' try: f = open('file0. ...

  4. C语言 字符串处理函数

    #include <stdio.h> #include <string.h> // strlen void test() { // 测量字符串常量的字符长度(不包括\0这个字符 ...

  5. IOS 应用管理(九宫格) 总结笔记

    1. 开发前的思路 ========================================1> 从mainBundle中加载Plist2> 按照plist中的数据数量先确定各个a ...

  6. IOS VFL语言(页面布局)

    ● 什么是VFL语言 ● VFL全称是Visual Format Language,翻译过来是“可视化格式语言” ● VFL是苹果公司为了简化Autolayout的编码而推出的抽象语言     VFL ...

  7. [转]Linux学习

    Linux简介与厂商版本 http://www.cnblogs.com/vamei/archive/2012/09/04/2671103.html Linux开机启动(bootstrap) http: ...

  8. Android(java)学习笔记46:反射机制

    1. 反射机制: JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于任意一个对象,都能够调用它的任意一个方法和属性:这种动态获取的信息以及动态调用对象的方法的功能称 ...

  9. xml解析-jaxp之dom解析

    package day06_parser.dom; /** * xml的解析技术:JAXP是Java API for XML Processing的英文字头缩写, * 中文含义是:用于XML文档处理的 ...

  10. IO缓冲区

    标准IO提供的三种类型的缓冲模式: (1)按块缓存:在填满缓冲区后才进行实际的设备读写操作 (2)按行缓存:指在接收到换行符('\n’)之前,数据都是先缓存在缓冲区的 (3)不缓存:允许你直接读写设备 ...