了解MVVM,vue.js搭建属于你的饿了吗项目

1.MVVM框架

view      <=>         viewModel   <=>        model

视图（DOM） 通讯（观察者） 数据（js对象）

• 基本概念：当数据发生变化，viewModel观察到数据变化，通知对应视图自动更新

当用户操纵视图，viewModel也能监听到视图变化，通知数据改变

• 应用场景：

针对具有复杂交互逻辑的前端应用

提供基础的架构抽象

通过ajax数据持久化，保证前端用户体验

2.什么是vue.js?

一个轻量级的MVVM框架 组件化+数据驱动的前端开发

• 数据驱动：数据改变驱动dom自动更新，dom是数据的自然映射
• 组件化：扩展HTML元素，封装可重用代码

组件设计原则：

页面每个独立的可视/可交互区域视为一个组件

每个组件对应一个工程目录，组件需要的资源在这个目录下就近维护

页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面

3.vue开发利器vue cli——Vue的脚手架

$npm install -g vue-cli//全局安装

$vue init webpack sell//初始化一个项目vue init <模板> <项目名>

$cd sell

$npm install//安装依赖，生成node_modeles文件

$npm run dev//运行项目

进入文件夹，查看了解各个项目文件是干嘛的（后续补充）

4.资源准备

需求分析：头部-商品页-评价页-商家 -详情页-购物车

项目资源准备：图片素材

图标字体制作：https://icomoon.io/app/#/select将svg文件上传生成对应的icon下载下来

目录设计：在src下面新建一个common文件，将上一步下载的文件copy过来。

模拟（mock）数据：在build./dev-server.js文件里写路由获取数据

...
const app = express()
const appData = require('../data.json')
const seller = appData.seller
const goods = appData.goods
const ratings = appData.ratings
// router
const apiRoutes = express.Router();
apiRoutes.get('/seller', function (req, res) {
  res.json({
    code: "SVCSTG.0000000",
    data: seller
  })
})
...
app.use('/api', apiRoutes)
...

5.页面骨架拆分

 <!--html5移动端Meta设置 强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览。 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
  

一个vue文件模板：

<template>
<div class="header">
    我是header
</div>
</template>

<script  type="text/ecmascript-6">
    export default {};
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

</style>

。。。

6.css-stick-footer布局写详情页

flex布局