文章允许非篡改署名转载，删除或修改本段版权信息转载的，视为侵犯知识产权，我们保留追求您法律责任的权利，特此声明！

Vue 是一个前端框架，特点是

比如你改变一个输入框 Input 标签的值，会自动同步更新到页面上其他绑定该输入框的组件的值

页面上小到一个按钮都可以是一个单独的文件.vue，这些小组件直接可以像乐高积木一样通过互相引用而组装起来

// 这里是处理正确的回调

// 这里是处理正确的回调 // 这里是处理错误的回调

这里使用的是豆瓣的公开 GET 接口，如果接口是跨域的 POST 请求，则需要在服务器端配置:

这时候运行看看。等一会接口返回数据，咦，数据加载出来了，棒棒哒 !

组件、双向绑定、路由、数据请求等基本特性都能用了，写到这里一个单页应用基本上成型了。但是，这几面也太 TM 难看了吧。自己写 UI 框架太费劲？那就上网找一个吧。
本来想给大家介绍 Vux 的，因为他用的是微信的 WeUI 设计规范，对于开发微信小程序或者微信内的网页非常和谐，但由于写这篇文章的时候 Vux 还不支持 vue2.0，只能用别的框架了。
命令行安装 ElementUI (此处某公司的人应该发红包了...)

官网文档又有坑了，安装教程也不跟我们说这一步，当我们都是高手了...
报错是由于我们引入了index.css这个 CSS 文件，但是 webpack 打包的时候无法识别并转换成 js，所以就需要配置才能读取 css 和字体文件，运行命令安装下面三个东西(如果之前安装过就不需要了)

给豆瓣的电影列表套个衣服(样式) :

打开浏览器,输入网址:

列表比之前漂亮多了，你还可以参照 ElementUI 的文档使用更多组件样式

然后在项目目录下创建一个.babelrc文件，内容如下:

加入 presets 配置，修改成下面酱紫:

再次执行 npm run build 就可以了，后来发现直接运行 webpack 命令也是可以打包的

如果你觉得这篇文章写得好，不需要打赏，你可以下载我朋友做的一个阅读工具，可以订阅公众号和简书、也可以看大神分享的优秀文章。

??出现这个报错提示，根本原因只有一个--json解析异常，所以请大家直接去关注自己json的返回数据注意检查其返回内容和内容的格式是否正确，至于本文血案的导火索是因为json注释滴问题。

??有一天一个朋友找我商量，说用jquery的ajax什么都写对了，可数据就是不正常显示，我说发核心代码我look下，如图1

??我也反复检查了几遍确实没问题，那。。。。。。我突然发现他的代码中只存在了异步success的回调，既然不走成功回调，那就看下error函数咯，error函数我们不经常使用，其有三个参数XMLHttpRequest对象, textStatus错误文本描述, errorThrown错误发生时才会被传递。在error里添加一个log发现被打印了，ajax这个过程确实存在异常，但具体哪个方向的依旧未知。打印了一下textStatus发现输出parsererror，解析错误。好了，此刻可以断定ajax通信是正常的。也就是XMLHttpRequest.readyState已经为4了，那就代表客户端和服务端通信完成，数据已经拿回本地，最后可以确定报错的原因就是在json解析的时候发生了异常。

??于是我又信誓旦旦的去检查他本地模拟的json数据，我们都知道json是由老道在js对象语法格式上发明而来的，其比js的对象格式更加严谨，单双引号搞错都不行，而且json也就那么几种固定的返回格式，直接{}对象形式，还有一种对象数组形式[{},{}],还有一种对象中的数组{"",[]}额，我记得是一共就这三种情况，晓得这些基础知识以后严格排查，发现格式一切正常，额。。见鬼。。。。。

??那看下返回内容吧，如图2所示，一个json数组一个抬头信息。乍一看貌似没什么问题，但是问题就在这，上文已经说到json格式是从js对象格式中改变而来，在js中注释有很多种写法，但是json在发明之初就是不提倡注释的，所以抬头信息在解析的时候就会被认定为错误信息。深坑啊。。。。。

??于是乎我就去寻找这个抬头的来源，我问他你最近用什么编辑器了没？他说就sublime，我起初怀疑是编辑器自动加的落款，后来发现不是，于是我看了下他的请求文件，是一个php文件，打开这个php文件，发现这个php文件刚开头就对客户端写回了一段说明文本。正好就是图2那段抬头说明性文本，删除这段文本，了事。。。

2.注重基础知识，注意事物出现的历史原因如json是为传递而产生，所以其没有注释也是有意而为之。
3.json格式是死的必须严格遵守，json中若要添加注释也要使用"k": "v"的形式，不过这会使得传输信息量大