了解MVVM,vue.js搭建属于你的饿了吗项目
2019-02-22 22:06
323 查看
1.MVVM框架
view <=> viewModel <=> model
视图(DOM) 通讯(观察者) 数据(js对象)
- 基本概念:当数据发生变化,viewModel观察到数据变化,通知对应视图自动更新
当用户操纵视图,viewModel也能监听到视图变化,通知数据改变
- 应用场景:
针对具有复杂交互逻辑的前端应用
提供基础的架构抽象
通过ajax数据持久化,保证前端用户体验
2.什么是vue.js?
一个轻量级的MVVM框架 组件化+数据驱动的前端开发
- 数据驱动:数据改变驱动dom自动更新,dom是数据的自然映射
- 组件化:扩展HTML元素,封装可重用代码
组件设计原则:
页面每个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录,组件需要的资源在这个目录下就近维护
页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面
3.vue开发利器vue cli——Vue的脚手架
[code]$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文件里写路由获取数据
[code]... 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.页面骨架拆分
[code] <!--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文件模板:
[code]<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布局
相关文章推荐
- vue.js在windows本地下搭建环境和创建项目
- 从零开始搭建vue.js项目
- vuejsLearn---通过手脚架快速搭建一个vuejs项目
- Vue.js项目模板搭建图文教程
- Vue.js学习---脚手架方式搭建vue项目
- 【vue】vue.js安装教程/vue项目搭建
- Vue.js系列之项目搭建(1)
- vue.js在windows本地下搭建环境和创建项目
- vue.js在windows本地下搭建环境和创建项目
- vue.js学习02之vue-cli脚手架创建项目环境搭建
- vue2.0 使用vue-cli搭建的项目如何在index.html里引入静态css和js
- vue.js学习10之动手使用vue-cli搭建项目及生成的代码进行修改练手
- ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
- vue.js 项目 环境搭建、打包发布
- vue.js2.0实战:搭建开发环境及构建项目
- node.js 快速搭建vue项目
- vue.js在windows本地下搭建环境和创建项目
- ASP.NET Core 实战:使用ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目
- vue.js在windows本地下搭建环境和创建项目。
- [置顶] ubuntu下vue.js环境搭建初始化项目