第 1 章: 准备

1.1. 项目描述

1) 此项目为外卖 WebApp(SPA)
2) 包括商家, 商品, 购物车, 用户等多个子模块
3) 使用 Vue 全家桶+ES6+Webpack 等前端最新最热的技术
4) 采用模块化、组件化、工程化的模式开发

1.2. 项目功能界面







1.3. 技术选型

1.4. 前端路由

1.5. API 接口

1.6. 项目 vue 组件

1.7. 你能从此项目中学到什么?

1) 熟悉一个项目的开发流程
2) 学会组件化、模块化、工程化的开发模式
3) 掌握使用 vue-cli 脚手架初始化 Vue.js 项目
4) 学会模拟 json 后端数据,实现前后端分离开发
5) 学会 ES6+eslint 的开发方式
6) 掌握一些项目优化技巧

1.7.2. Vue 插件或第三方库

1) 学会使用 vue-router 开发单页应用
2) 学会使用 axios/vue-resource 与后端进行数据交互
3) 学会使用 vuex 管理应用组件状态
4) 学会使用 better-scroll/vue-scroller 实现页面滑动效果
5) 学会使用 mint-ui 组件库构建界面
6) 学会使用 vue-lazyload 实现图片惰加载
7) 学会使用 mockjs 模拟后台数据接口

1.7.3. 样式/布局/效果相关

1) 学会使用 stylus 编写模块化的 CSS
2) 学会使用 Vue.js 的过渡编写酷炫的交互动画
3) 学会制作并使用图标字体
4) 学会解决移动端 1px 边框问题
5) 学会移动端经典的 cssstickyfooter 布局
6) 学会 flex 弹性布局

Vue 实战项目: 硅谷外卖(1)的更多相关文章

  1. Vue 实战项目开发流程

    一 基础配备 ## 一.环境搭建 #### 1.安装node - 去[官网](https://nodejs.org/zh-cn/)下载node安装包 - 傻瓜式安装 - 万一安装后终端没有node环境 ...

  2. VUE实战项目-数据转换之道

    前言 公司的这个项目从去年底启动.至今经历winform版本与当前的VUE两个版本,前后经历不足3个月的时间.从纯技术角度来看,推进速度都很优异.究其原因,大抵我们都是喜欢“偷懒”的程序员,把能封装. ...

  3. 从无到有构建vue实战项目(一)

    vue的安装 首先下载nodehttp://nodejs.cn/download/ 有两种安装方式安装包安装和二进制文件安装 输入以下命令,出现版本提示表示安装成功: node -v 10.15.3 ...

  4. 从无到有构建vue实战项目(二)

    二.vue项目的初步搭建 该项目我采用了当下最流行的vue ui框架---element-ui,首先用vue-cli构建一个vue项目: vue create education 然后会出现一系列配置 ...

  5. 从无到有构建vue实战项目(四)

    六.webpack的安装和配置 为了快速构建vue项目,webpack是一个必不可少的工具,我们先来安装它,附上官网地址:https://www.webpackjs.com/ 要安装最新版本或特定版本 ...

  6. 从无到有构建vue实战项目(五)

    八.错误总结(一) webpack打包项目识别子组件路径问题 之所以出现了这样的问题是因为在webpack打包项目时,未将此处的子组件路径正确识别: 将此处的carousel改为carousel.vu ...

  7. 从无到有构建vue实战项目(六)

    十.徒手撸一个vue下拉左侧二级导航 先附上最终效果图: vue代码: <div class="dropdown-menu-explore" v-on:mouseover=& ...

  8. 从无到有构建vue实战项目(七)

    十四.Vuex的使用 Vuex是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vu ...

  9. 从无到有构建vue实战项目(八)

    十六.vue-lazyload的使用 首先,我们需要下载vue-lazyload包: npm i vue-lazyload -S 下载好之后,我们将它引入到自己的项目: //main.js //引入图 ...

随机推荐

  1. springboot项目中接口入参的简单校验

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  2. mysql 多个字段重复记录查询

    select * from productstockquantity t where () ORDER BY t.CombinationI

  3. Xamarine ContentPage.ToolbarItems 未显示/不显示在界面

    将页面封装到NavigationPage中.在App.xaml.cs的构造函数中 将 MainPage = new MainPage(); 替换为 MainPage = new NavigationP ...

  4. 使用Jmeter进行压力测试结果偏差较大原因分析

    Apache软件基金会(ASF)是一家总部位于美国的非营利性慈善组织.ASF的所有产品都通过公共论坛的在线协作开发,并从美国境内的中央服务器分发.Jmeter是ASF的一款开源免费软件 ,在国内被很多 ...

  5. Head First设计模式——原型模式和访问者模式

    原型 原型模式:当创建给定类的过程很昂贵或很复杂时,就使用原型模式. 我们在进行游戏的时候游戏会动态创建怪,而怪时根据场景的不同而变化创建的,英雄自己也会创建一些随从.创建各式各样的怪兽实例,已经越来 ...

  6. [Microsoft Teams]使用连接器接收Azure Devops的通知

    1. 什么是连接器 连接器(connector)是Teams中频道的一个接受消息的功能,官方的解释如下: 连接器允许用户订阅来自 web 服务的接收通知和消息. 它们公开服务的 HTTPS 终结点,通 ...

  7. System.Text.Json 序列化对所有 JSON 属性名称使用 camel 大小写

    asp.net core3.x 新增的序列号接口System.Text.Json 序列化时,如果要对所有 JSON 属性名称使用 camel 大小写 将 JsonSerializerOptions.P ...

  8. [Dynamic Programming]动态规划之背包问题

    动态规划之背包问题 例题 现有4样物品n = ['a', 'b', 'c', 'd'],重量分别为w = [2, 4, 5, 3],价值分别为v = [5, 4, 6, 2].背包最大承重c = 9. ...

  9. [贪心,dp] 2019中国大学生程序设计竞赛(CCPC) - 网络选拔赛 Fishing Master (Problem - 6709)

    题目:http://acm.hdu.edu.cn/showproblem.php?pid=6709 Fishing Master Time Limit: 2000/1000 MS (Java/Othe ...

  10. 旷视6号员工范浩强:高二开始实习,“兼职”读姚班,25岁在CVPR斩获第四个世界第一...

    初来乍到,这个人说话容易让人觉得"狂". "我们将比赛结果提交上去,果不其然,是第一名的成绩."当他说出这句话的时候,表情没有一丝波澜,仿佛一切顺理成章. 他说 ...