Vue.js仿eleme项目(1)

一，学习背景及介绍

目标
掌握Vue.js在实战中的运用,
学会使用Vue.js完整地开发移动端APP
学会组件化、模块化的开发方式
内容
vue.js框架介绍
vue-cli脚手架 搭建基本代码框架
vue-router 官方插件管理路由
vue-resource Ajax通信
Webpack 构建工具
es6+eslint eslint--es6代码风格检查工具
工程化、组件化、模块化
移动端常用开发技巧：flex弹性布局，css stickyfooter，酷炫的交互设计

背景
vuejs是基于es5特性开发，旧浏览器无法支持，适用移动端和IE9+的高级浏览器。

传统的后台mvc方式是前端和后端发生数据交互时，会刷新整个页面。因此我们通过Ajax方式和后端rest api做通讯，一部分刷新页面的某个区块，来优化和提升体验，同时把mv*拿到前端来做。
架构从传统后台MVC 向REST API+前端MV* 迁移。
MV*包含{ MVC, MVP, MVVM(vuejs)}。

mvvm = model（数据部分--js对象）+view（视图--dom）+viewmodel（通讯--连接视图和数据的中间件）。 视图和数据不能直接通讯，通常需要通过viewmodel做通讯。

Vue 借鉴了 angular 的指令 和 react 的组件化。

vuejs核心思想

数据驱动+组件化

实现双向绑定

过程：1. Vue实例化时，调用Object.defineproperty()为a.b设置getter和setter； 2.Vue编译模板生成Directive指令对象，如v-text="a.b"，每一个指令对象关联一个Watcher； 3.当指令对表达式a.b求值时，调用Watcher计算a.b，最终执行a.b.getter； 4.当改变数据a.b，即对a.b赋值时，触发a.b.setter，通知Watcher对a.b重新求值，当发现值改变，则向指令对象发送Notify（事件）； 5.指令对象监听到Notify，触发update更新DOM。由于指令是对dom的封装，所以它会调用原生dom的方法去更新视图，这样我们就完成了数据改变到视图更新的自动过程。
用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。浏览器控制台在打印数据对象时 getter/setter 的格式化并不同,可以使用vue-devtools 。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖。

接下来我们看一下组件的三个设计原则。1.页面上每个独立的可视、可交互区域视为一个组件，比如我们一个页面的头部，尾部。2. 每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护，这个就近原则其实就体现了前端工程化的思想，提供了一个很好的分治策略，每个开发者都将清楚地知道自己开发维护的功能单元，样式也好，js也好，页面结构也好，都在那里。 在Vue中，可以通过.vue文件把组件依赖的模板，js和样式都写在一个文件中，这可以把组件化的就近维护思想发挥到了极致。 3. 页面不过是组件的容器，组件可以嵌套自由组合，形成完整的页面。左侧是我们的页面， 他被拆分成一个个小的区块，每个区块其实都对应着一个组件，在Vue中每个组件都对应着一个view model， 那最终我们生成这个view model的一个树，他跟我们的dom树，就是一个一一对应的关系。

几个快捷方式

打开chrome的devtools，cmd+option+I.
Intellij Idea中Reformat代码，cmd+option+L.

二，vue-cli脚手架工具

vue-cli 脚手架工具的作用：目录结构、本地调试、代码部署、热加载、单元测试，静态资源编译。
搭完环境后，看看里面的文件。熟悉index.html -> src/main.js. src/App.vue -> src/components/Hello.vue.

.vue文件有三部分，template,script,style.

看一下src/App.vue:

  ...

必须要在script中注册Hello组件才能在template中使用。components: { Hello }用到了es6的简写格式，完整的是{Hello: Hello}第二个Hello由import引用引入。在template中用hello小写字母是因为html对大小写不敏感。

项目文件结构

• 一级目录
  build+config:webpack配置相关。
  node_modules:通过npm install安装的依赖代码库。
  src：存放我们的项目源码。
  static：存放第三方静态资源。里面有一个文件 .gitkeep.js（作用：空目录也可以存放到git里面）。
• 文件
  babelrc：babel将es6编译成es5，rc是配置。 其中 presets:预设（预先需要安装的插件)；plugins:做转换的依赖插件代码；comments:false代表转换后代码不生成注释。转换具体内容在node_modules中。
  editorconfig:编辑器的配置。
  package.json：配置文件。 ^表示安装的最低要求版本。
  dependencies：项目生产环境下的依赖。
  devDependencies编译过程依赖，不会存在于打包后的代码中。
  .eslintignore:对指定目录文件build和config语法检查
  .eslintrc.js: eslint的配置文件。值为0就是不允许某个规则。
  gitgonre:git仓库忽略的文件，不会提交。
  index.html:入口文件
  README.md:项目描述文件

三，webpack

现谈的是开发时的webpack配置。

这篇文章详细介绍了vue-cli 2.0中的webpack可以做参考。

从package.json 可以看出npm run dev运行的是node build/dev-server.js这个代码。

然后依次浏览一下相关文件，如webpack.base.conf.js，webpack.ev.conf.js等。

四，项目准备工作

1. 需求分析

2. 项目资源准备

看张鑫旭的devicepixelratio（dpr）介绍，观察resource目录下的设计资源文件。

devicepixelratio笔记如下：

window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

dip或dp,（device independent pixels，设备独立像素）与屏幕密度有关。dip可以用来辅助区分视网膜设备还是非视网膜设备。

1.devicePixelRatio在大多数浏览器是值得信赖的。
2.在iOS设备，screen.width乘以devicePixelRatio得到的是物理像素值。
3.在Android以及Windows Phone设备，screen.width除以devicePixelRatio得到的是设备独立像素(dips)值。
注：本文的DIPs切勿和DPI搞混了！DPI指每英寸点的个数，本文的DIPs指设备独立像素。

3. 图标字体制作

https://icomoon.io/
用svg格式的图片来制作图标字体，来引用一些小的颜色单一的图片，好处是图片缩放不会失真。 工具：www.icomoon.io 操作步骤：将svg图标导入网站，并生成图标字体，然后导出，将里面的fonts文件和style.css文件拿到项目里即可。

4.项目目录设计

这样添加目录结构

然后将style.css更名为icon.styl。改成stylus语法删除括号和分号。最后删除assets文件夹。

5. mock数据

新建一个json文件data.json，里面写了一些mock的数据。dev-server.js 编写接口，用express框架起一个node sever，用express router编写接口请求。 定义路由 var apiRoutes = express.Router()。
定义接口

apiRoutes.get('/seller',funtion(req, res){
     res.json({ 
        errrno: 0 //一般返回一个errno 
        data： seller 
    }) 
});
app.use('/api',apiRoutes)