vue+ vue-router + webpack 踩坑之旅

说是踩坑之旅 其实是最近在思考一些问题 然后想实现方案的时候，就慢慢的查到这些方案   老司机可以忽略下面的内容了

1）起因  考虑到数据分离的问题  因为server是express搭的   自然少不了res.render("xx",data)    这句话的意思就是去查找相应的模板文件然后在用数据去渲染在将渲染好的页面去返回给浏览器，给浏览器去解析，渲染模板其实就是做的替换字符串+拼接字符串的活  各种的模板引擎也有各个优化的点(比如可以将对应的模板编译的函数保存在内存中，然后在通过数据去渲染 这样就不用每次去编译渲染了) 但是这并不是一种前后端分离的方案 我理解的是后端只提供数据接口的api，然后前端通过api去获取数据在去渲染页面,因为最近在学习vue，就想着用vue来这些事情

2) 思考实现的思路  我的第一种想法是在express中配置路由  通过res.sendfile(file)  这个页面返回给前端后，通过vue进行管理(使用vue-rosource去获取特定的数据) 但是当是这样的url     user/11 user/22  的时候我们还给前端返回同样的页面 前端怎么根据这个11 22 去获取特定用户的数据去渲染页面呢  其实我们返回的就是模板  接着就了解到vue-router  可以通过$route.params获取后面的11和22 这样我们就能动态的去获取数据渲染模板了  模板其实可以理解为组件 直接在template里面写不友好  在看网上的例子的时候就方面了webpack + vue.loader

3)解决方案   webpack + vue + vue-loader +express(提供后端数据)

4）遇到的各种坑

4.1 babel 配置的问题  （应该是需要配置bebel的转换环境）

vue模板使用es6语法写的  要在webpack中配置  (安装babel-loader babel-preset-es2015 vue-loader)

在加载vue的时候总是报错es6配置有问题  我通过下面的配置解决了这个问题

　　4.1.1  在webpack.config.js的同级目录下生成.babelrc  内容如下

　　4.1.2  在webpack.config.js中进行babel的配置 这个是我的webpack.config.js的配置

4.2 在组件中有template报错

发现nodo_modules中vue中package.json中main是dist/vue.common.js 而不是dist/vue.js   在官网上找到了这个问题的答案

也就是想支持template方式的就要引入dist/vue.js

4.3 vue-router的版本问题    下面是vue-router2的官方的翻译文档  介绍vue-router2

4.4 页面路由后url变化的处理

当访问index.html后   我们点击下面的router-link的时候 url会发生变化   也就是从index.html变成 index.html/first     应该是我这的配置出现了问题  为什么没有变成index.html#first这种   这个问题不是很明白  在url变成这种的时候 去刷新页面就会走express的路由，不存在这个路由就会报错 我的解决方案是添加一个末尾的中间件 返回index.html

5）总结

　　其实踩坑是一个学习的过程，vue官网的例子也大致的看过但是实际用的时候还是不一样，最好的方式就是在官网上去找一些例子 然后自己在本地重新的弄一遍算是一个学习过程 上面的方案可以大致的一个简单的单页应用  也实现了前后端分离  还有就是官网的例子要好好看

6）总结的学习资料

　　6.1 webpack相关

　　　　webpack入坑之旅(这里面的vue-router是vue1.0的)

　　　　webpack傻瓜指南(里面的三篇文章都不错)

　　　　webpack官网

　　6.2 vue相关

　　　　vue官网的中文文档

　　　　vue-resource    官网    vue-resource全攻略

　　　　vue-loader官网

　　　　vue-router2官网中文文档

　　6.3  一篇博友的踩坑文章