第一步
1.2 前言
在我还在使用 requireJS 去管理模块化的 js 的时候，如今的前端三大框架 React Angular Vue 已经如火如荼。
这里我们来使用 ==webpack 和 vue==
来重构一下我们的代码，体验 MVVM 模式的乐趣。
image
1.2 什么是 vue ？
这里我们来比较一下常用的 jquery 和 vue 的区别
Vue就是和jQuery一样是一个前端框架，它的中心思想就是数据驱动，像远古时代的老前辈jQuery是结构驱动，什么意思呢，以前我们写代码时常用$('.dom').text('我把值改变了')，这种写法先要获得结构，然后再修改数据更新结构，而Vue的做法直接就是this.msg="我改变了"，然后msg就会同步到某个结构上，视图管理抽象为数据管理，而不是管理dom结构了。
- vue 的核心思想就是 双向绑定 数据劫持。
- 第一点：对数据进行劫持监听，设置一个数据监听器Observer，用来监听所有属性，如果有属性发生变化，就通知订阅者。
- 第二点：设置一个订阅者Watcher，订阅者可以收到属性的变化通知，从而执行相应的函数，来进行视图更新。
- 第三点：设置一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
- 第四点：入口函数。
image
image
1.3 搭建环境
- 默认你安装了 npm (推荐使用 cnpm) 和 node
npm install -g vue-cli
- 然后进入一个自己的 demo 目录
vue init webpack myProject
webpack 作为打包工具会自动的处理你需要创建的 vue 项目，随后有几个选项。
image
这里的话，因为后面主要涉及了 router 这个选择 y 就可以 其他的不管或者默认回车就可以了。
- 最后 安装依赖(当然你可以在package.json中看看初始化的时候需要安装了那些依赖)
- 运行项目
cd myProject
npm install
npm run dev
- 然后看控制台提示，再打开 http://localhost:8080/#/
image
如果你看到的不是这样的，或者报错。这个就需要看是哪一步遗忘或者错了。
1.4 代码目录详解
-
这是我们的代码目录
image- package.json 依赖信息
- config 保存一些项目初始化配置
- build里面保存一些webpack的初始化配置
- index.html是我们的首页
- 最关键的代码都在src目录中
-
src 目录
main.js 入口文件
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue' //import => 文件引入
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 设置为 false 以阻止 vue 在启动时生成生产提示。
/* eslint-disable no-new */
new Vue({
el: '#app',
// 对应 app.vue页面的 id //最后效果将会替换页面中id为app的div元素
router,
// 路由设置
template: '<App/>',
// 告知页面这个组件用这样的标签来包裹着,并且使用它
components: { App }
// 组件的使用
})
- App.vue 主组件页面
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
看到我们文件内分为三大部分，分别是<template><script><style>，很好理解结构，脚本，样式；script就像node一样暴露一些接口，可以看到我们的template标签中除了一张图片之外就只有一行代码：<router-view></router-view>
- router/index.js (路由配置)
import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
}
]
})
