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  一篇博友的踩坑文章