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官网中文文档