json最后一个大括号出错_一个简单 vue+webpack 的配置和demo 2018.1.15

第一步

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 主组件页面

看到我们文件内分为三大部分，分别是