Vue.js + cube-ui 高仿饿了么 App 项目学习笔记

1.Vue.js介绍

• MVVM框架

  
  
  MVVM

• 什么是Vue.js
  1，它是一个轻量级的MVVM框架
  2，数据驱动+组件化的前端开发
  3，社区完善（GitHub，论坛，聊天室，Twitter）

• 对比Angular、React
  Vue.js更轻量，gzip后大小只有20K+
  Vue.js更容易上手，学习曲线平稳
  吸取两家之长，借鉴了angular的指令和React的组件化

• 数据驱动

  
  
  数据驱动

  Vue.js通过Directives指令对DOM做一层封装，当数据发生改变，会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据的一种自然映射；Vue.js还会对操作做一些监听，当修改视图时，Vue.js监听到这些变化，从而改变数据，形成了数据的双向绑定。

• 数据响应原理

  
  
  数据响应原理

• 组件化
  扩展HTML元素，封装可重用的代码

• 组件设计原则
  页面上每个独立的可视、可交互区域视为一个组件
  每个组件对应一个工程目录，组件所需的各种资源在这个目录下就近维护
  页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面

更多Vue基础知识可以参考慕课网wiki：Vue.js 教程

2.准备工作

2.1 Vue CLI

  Vue的脚手架工具，帮助我们写好Vue.js基础代码的工具，能帮我们搞定目录结构、本地调试、代码部署、热加载、单元测试等工作。
  文档地址:Vue CLI 中文文档

• 安装Vue CLI(3.0以上版本)

#前提是已安装了node，查看node版本，确认已安装node,如未安装，自行百度
node -v

#安装Vue CLI (Mac系统安装操作涉及权限,需要在前面加sudo,下同)
npm install -g @vue/cli
# OR
yarn global add @vue/cli

#运行这个命令查看版本,验证是否安装成功
vue --version

• 创建一个项目

#运行以下命令来创建一个新项目eleme-vue-cube
vue create eleme-vue-cube

创建项目

• 启动项目

#进入目录
cd eleme-vue-cube
#启动项目
npm run serve

• 项目文件介绍

|-- eleme-vue-cube
    |-- .browserslistrc
    |-- .editorconfig
    |-- .eslintrc.js
    |-- .gitignore           //指定文件无需提交到git上
    |-- README.md
    |-- babel.config.js      //使用一些预设
    |-- package-lock.json    //版本管理使用的文件
    |-- package.json         //项目描述及依赖
    |-- postcss.config.js
    |-- node_modules         //项目依赖(对webpack进行了封装)
        |-- ...
    |-- public
    |   |-- favicon.ico      //网站图标
    |   |-- index.html       //入口html文件
    |-- src                  //项目源码
        |-- App.vue
        |-- main.js          //入口js文件
        |-- assets
            |-- logo.png
        |-- components
            |-- HelloWorld.vue

• webpack打包

  
  
  webpack

详细了解请参阅:webpack中文文档

2.2 cube-ui

• 安装cube-ui
  在vue-cli3.0的项目里，直接使用 vue add cube-ui 就可以安装;
  安装cube-ui
  
  后编译(post-compile):不去使用cube-ui编译后的代码,直接引用它的源码,用我们的应用去编译这块儿代码;好处是可以减少整个构建包的体积.
  官方文档地址:cube-ui中文文档 或 Cube-UI中文文档

2.3 api接口mock

通过data.json文件模拟后台数据

//向vue.config.js中添加:
// 1.引入data.json文件(在项目根目录)，获取对应的数据
const appData = require('./data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings

//2.module.exports = {}中添加devServer
devServer: {
    before (app) {
      app.get('/api/seller', function (req, res) {
        res.json({
          errno: 0,
          data: seller
        })
      })
      app.get('/api/goods', function (req, res) {
        res.json({
          errno: 0,
          data: goods
        })
      })
      app.get('/api/ratings', function (req, res) {
        res.json({
          errno: 0,
          data: ratings
        })
      })
    }
}

  devServer表示本地服务器，里面有个before方法，参数是app，可以在这里面定义接口，例如里面定义的app.get('/api/seller'，启动服务后，用浏览器访问http://localhost:8080/api/seller，可以在页面看到接口返回的json数据。

2.4 项目资源准备

• 1.删除了原来项目的src/assert目录、删除了HelloWorld.vue
• 2.public/index.html 修改,锁定禁止缩放(maximum-scale=1.0,minimum-scale=1.0,user-scalable=no)
• 3.新建src/common目录 用于存放资源
• 4.新建src/common/fonts 存放图标字体相关文件
• 5.新建src/common/stylus 存放base.styl(定义的基础样式),icon.styl(字体图标的一些样式 引用了fonts下面的文件),index.styl(内部import icon和base),mixin.styl(引用到cube-ui中的styl),variable.styl(引用了cube-ui的变量 并定义背景色和主题色)

    //修改后项目路径src下
    |-- src                  //项目源码
        |-- App.vue
        |-- main.js          //入口js文件
        |-- common           //公共资源
            |-- fonts        //字体图标相关文件
            |-- stylus      //样式
        |-- components
    //common文件夹及源码地址见文末

4.组件开发

html和css部分暂不详述

4.0 组件注册

  项目中使用了Babel 和 webpack 的模块系统的情况下，Vue官方推荐我们创建一个 components 目录，并将每个组件放置在其各自的文件中。
  然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：

import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

  现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
  更多组件注册方式，可查看文档：组件注册-Vue.js

4.1 头部组件相关技术点

4.1.1 axios

  请求数据使用了axios（类似ajax），一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。github地址：axios/axios，中文文档地址：翻译比较到位的axios中文文档

4.1.2 create-api

  点击弹出弹窗层，使用了create-api，一个能够让 Vue 组件通过 API 方式调用的插件。
  使用方法：先注册后使用。文档地址：Cube-UI中文文档 create-api 模块

4.2 Tab组件（另行补充）

4.3 商品页面（另行补充）

4.4 商品详情（另行补充）

4.5 评价和商家页面（另行补充）

5.打包部署

  使用命令 npm run build 编译，生成dist文件夹；将整个项目文件上传到阿里云，进入项目根路径下，执行 nohup node prod.server.js &，后台启动。

[root@pliuServer eleme-vue-cube]# nohup node prod.server.js &
[1] 13688
[root@pliuServer eleme-vue-cube]# nohup: ignoring input and appending output to ‘nohup.out’

写在最后：
  本人毕竟是一个Java后端，由于时间关系，有些地方没有深入，后续会再次补充；代码已上传至码云仓库，点击可查看完整代码。
  感谢慕课网ustbhuangyi老师的课程：Vue.js2.5+cube-ui重构饿了么App，受益匪浅。