第一步
1.1 前言
在我还在使用 requireJS 去管理模块化的 js 的时候,如今的前端三大框架 React Angular Vue 已经如火如茶。
这里我们来使用 ==webpack 和 vue==
来重构一下我们的代码,体验 MVVM 模式的乐趣。
1.2 什么是 vue ?
这里我们来比较一下常用的 jquery 和 vue 的区别
Vue就是和jQuery一样是一个前端框架,它的中心思想就是数据驱动,像远古时代的老前辈jQuery是结构驱动,什么意思呢,以前我们写代码时常用$('.dom').text('我把值改变了'),这种写法先要获得结构,然后再修改数据更新结构,而Vue的做法直接就是this.msg="我改变了",然后msg就会同步到某个结构上,视图管理抽象为数据管理,而不是管理dom结构了。
vue 的核心思想就是 双向绑定 数据劫持。
第一点:对数据进行劫持监听,设置一个数据监听器Observer,用来监听所有属性,如果有属性发生变化,就通知订阅者。
第二点:设置一个订阅者Watcher,订阅者可以收到属性的变化通知,从而执行相应的函数,来进行视图更新。
第三点:设置一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数。
第四点:入口函数。
1.3 搭建环境
默认你安装了 npm (推荐使用 cnpm) 和 node
然后进入一个自己的 demo 目录
webpack 作为打包工具会自动的处理你需要创建的 vue 项目,随后有几个选项。
这里的话,因为后面主要涉及了 router 这个选择 y 就可以 其他的不管或者默认回车就可以了。
最后 安装依赖(当然你可以在package.json中看看初始化的时候需要安装了那些依赖)
运行项目
然后看控制台提示,再打开 http://localhost:8080/#
如果你看到的不是这样的,或者报错。这个就需要看是哪一步遗忘或者错了。
1.4 代码目录详解
这是我们的代码目录
-
package.json 依赖信息
config 保存一些项目初始化配置
build里面保存一些webpack的初始化配置
index.html是我们的首页
最关键的代码都在src目录中
src 目录
main.js 入口文件
App.vue 主组件页面
看到我们文件内分为三大部分,分别是