天天看点
返回

基于vue的仿饿了么webapp1、项目介绍2、技术选型3、项目结构分析4、准备工作

1、项目介绍

  • 此项目为外卖App核心的商家模块的SPA
    • SPA是为构建WebApp设计的路由控制和视图转换框架
  • 包括商品、评论、商家介绍、购物车等多个子模块
  • 使用 Vuejs全家桶 + ES6 + Webpack 等前端热门的技术
  • 采用 模块化、组件化、工程化 的模式开发
  • 模块与组件
    • 模块
      • JS模块
      • 具有特定功能的JS文件
    • 组件
      • 功能组件/模块
      • 是实现界面某个局部功能的所有资源的集合(html/css/js/image等)
    • 联系
      • 一个组件中一般会使用到多个JS模块
  • 模块化 / 组件化 / 工程化
    • 这3个概念就是用来描述项目(应用)的
    • 模块化: 项目所有的JS都是一个模块, 一个模块编写的
    • 组件化: 项目的界面功能是以组件形式编写组合而成的
    • 工程化: 通过项目构建工程实现了项目的自动构建/打包处理

2、技术选型

  • 组件化（数据 / 交互）
    • vue
    • vue-cli
    • vue-router
    • axios
    • vuex
  • 后台处理（mock数据）
    • mockjs
    • express（Node.Js框架）
  • 模块化
    • ES6
    • babel
  • 工程化（项目构建 / 规范化）
    • vue-cli
    • webpack
  • 编码规范检查
    • eslint
  • css预编译器
    • stylus
  • 滑动库
    • better-scroll

2.1 Vue 框架

关于Vue的更多笔记，详见去年的笔记：Vue快速入门学习笔记(更新ing)

  • Vue

     (读音

    /vju/

     , 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。
  • 与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。
  • Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如:

    vue-router

     : 跳转，

    vue-resource

     : 通信，

    vuex

     :管理)或既有项目整合。

2.1 Vue CLI 脚手架

🛠️ Vue.js 开发的标准工具

什么是vue-cli

  • 官方提供的一个脚手架工具，用于

    快速生成一个 vue 的项目模板

     。
预先定义好的目录结构及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架，我们的开发更加的快速。

主要功能特点

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线
  • 功能丰富
  • 易于扩展
  • 无需 Eject
关于Vue CLI的更多笔记，详见去年的笔记：Vue快速入门学习笔记(更新ing)

2.3 Webpack 打包工具

基于vue的仿饿了么webapp1、项目介绍2、技术选型3、项目结构分析4、准备工作

从图中我们可以看出，

Webpack

可以将多种静态资源

js

、

css

、

less

转换成一个静态文件，减少了页面的请求。

什么是Webpack

  • Webpack

     是一款

    模块加载器兼打包工具

     ，它能把各种资源，如 JS、JSX、ES6、SASS、LESS、图片等都

    作为模块

     来处理和使用。

  • 本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)

     。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)（类似于Maven），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个

    bundle

     。

为什么要使用Webpack

  • ES5 (全浏览器支持)

  • ES6 (常用，当前主流版本: webpack打包成为ES5支持! )
Webpack是当下最热门的前端资源模块化管理和打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过

loader

 转换，任何形式的资源都可以当做模块，比如CommonsJS、AMD、ES6、 CSS、JSON、CoffeeScript、LESS等;

2.4 Node.js 服务端

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
  • 新版本都自带

    npm

什么是npm

  • npm

     ：一个软件包管理工具
    • 类似于Linux的

      apt
    • 类似于Java中的``Maven`

  • YARN

     : NPM的替代方案，类似于Maven和Gradle的关系
npm 是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。通过 npm 可以安装、共享、分发代码,管理项目依赖关系。

2.5 Git 版本控制

Git是什么？

  • Git是目前世界上最先进的分布式版本控制系统（没有之一）。

Git有什么特点？

  • 简单来说就是：高端大气上档次！

那什么是版本控制系统？

如果你用Microsoft Word写过长篇大论，那你一定有这样的经历：

想删除一个段落，又怕将来想恢复找不回来怎么办？有办法，先把当前文件“另存为……”一个新的Word文件，再接着改，改到一定程度，再“另存为……”一个新文件，这样一直改下去，最后你的Word文档变成了这样：

基于vue的仿饿了么webapp1、项目介绍2、技术选型3、项目结构分析4、准备工作
过了一周，你想找回被删除的文字，但是已经记不清删除前保存在哪个文件里了，只好一个一个文件去找，真麻烦。

​ 看着一堆乱七八糟的文件，想保留最新的一个，然后把其他的删掉，又怕哪天会用上，还不敢删，真郁闷。

​ 更要命的是，有些部分需要你的财务同事帮助填写，于是你把文件Copy到U盘里给她（也可能通过Email发送一份给她），然后，你继续修改Word文件。一天后，同事再把Word文件传给你，此时，你必须想想，发给她之后到你收到她的文件期间，你作了哪些改动，得把你的改动和她的部分合并，真困难。

​ 于是你想，如果有一个软件，不但能自动帮我记录每次文件的改动，还可以让同事协作编辑，这样就不用自己管理一堆类似的文件了，也不需要把文件传来传去。如果想查看某次改动，只需要在软件里瞄一眼就可以，岂不是很方便？

​ 这个软件用起来就应该像这个样子，能记录每次文件的改动：

版本 文件名 用户 说明 日期
1 service.doc 张三 删除了软件服务条款5 7/12 10:38
2 service.doc 张三 增加了License人数限制 7/12 18:09
3 service.doc 李四 财务部门调整了合同金额 7/13 9:51
4 service.doc 张三 延长了免费升级周期 7/14 15:17
​ 这样，你就结束了手动管理多个“版本”的史前时代，进入到版本控制的20世纪。

3、项目结构分析

3.1 文件夹结构 

webapp-vue-eleme
	|-- build : webpack相关的配置文件夹(基本不需要修改)
		|-- dev-server.js : 通过express启动后台服务器
	|-- config: webpack相关的配置文件夹(基本不需要修改)
		|-- index.js: 指定的后台服务的端口号和静态资源文件夹
	|-- node_modules
	|-- src : 源码文件夹
		|-- assets: 静态资源(js、css、图片等)
		|-- components: vue组件及其相关资源文件夹
		|-- app.vue: 应用根主组件
		|-- main.js: 应用入口js
	|-- static: 静态资源文件夹
	|-- .babelrc: babel的配置文件
	|-- .editorconfig: 通过编辑器的编码/格式进行一定的配置
	|-- .eslintignore: eslint检查忽略的配置
	|-- .eslintrc.js: eslint检查的配置
	|-- .gitignore: git版本管制忽略的配置
	|-- index.html: 主页面文件
	|-- package.json: 应用包配置文件 
	|-- README.md: 应用描述说明的readme文件

3.2 vue组件

  • app.vue
    • 应用的根组件
  • 所有的组件都在

    src/compoents/

     下
    • 1.header.vue
      • 页面头部显示商家基本信息的组件
    • 2.goods.vue
      • 商品分路由组件: 商品列表/购物车相关功能
    • 3.ratings.vue
      • 评价分路由组件: 商品评价列表
    • 4.seller.vue
      • 商家详情分路由组件: 显示商家详情
    • 5.star.vue
      • 星级评价组件
    • 6.food.vue
      • 商品列表组件: 显示商品分类/商品列表, 购物项加减
    • 7.cartcontrol.vue
      • 购物项操作组件: 增加/减少某个购物项的数量
    • 8.ratingselect.vue
      • 商品评论列表组件: 过滤查看商品评价列表
    • 9.split.vue
      • 分隔线小组件
    • 10.shopcart.vue
      • 底部购物车组件: 显示购物项列表及相关操作

4、准备工作

4.1 环境描述

  • Windows 10 2004 专业版
  • Node.js > 10.0（

    node --version

     ）
  • npm > 6.0（

    npm version

     ）
  • Git > 2.6（

    git --version

     ）
  • Vue > 2.5（

    vue -V

     ）

4.2 安装必要软件

  1. 安装Node.js
  • 官网：http://nodejs.cn/
  • 新版本的Node.js都内置

    npm

     了！
官网提供了各个平台的不同编译版本，按需下载。
  1. 安装Git
  • 官网：https://git-scm.com/
  • 安装好后，在文件见右键可看到两个新选项：
    • Git Bash（一般是使用这个）
    • Git GUI

4.3 搭建其他环境

  1. npm

     设置全局加速
  • 使用淘宝镜像加速 
# 若安装失败，则将源npm源换成淘宝镜像
# 因为npm安装插件是从国外服务器下载，受网络影响大
npm config set registry https://registry.npm.taobao.org
  1. 全局安装

    cnpm

  • cnpm

     ：中国

    npm

     镜像的客户端 
# -g表示全局安装
npm install cnpm -g
  1. 安装

    cue-cli

     
# 安装
cnpm install vue-cli -g

# 验证是否安装成功
vue list
  1. 本地电脑上新建一个存放本项目学习的根目录(文件夹)
  2. 在根目录下,鼠标右键,选择

    git bash
  3. 使用脚手架

    vue-cli

     生成

    webpack

     模板的初始化项目 
# 基于webpack模板
# vue init webpack name
vue init webpack vue-eleme
  1. 进入

    vue-eleme

     目录 
cd vue-eleme
  1. 安装环境依赖 
# 必要工作，尤其是运行别人的项目
cnpm install

# cnpm执行失败就换npm
# npm install
  1. 运行该项目 
cnpm run dev

# 一般使用上面的命令，用不了就换以下二选一
# npm run serve
# npm run start
注意事项：
  • 有时候网络的问题，会出现各种问题，因为

    npm

     的服务器在国外。这时候，重复执行命令多几次，或者换成

    cnpm

     试试。
前端 # Vue vue node npm
上一篇: vue实战：vue.js高仿饿了么webapp
下一篇: 高仿“饿了么”Vue项目（一）

继续阅读