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