用 Vue 作一個簡單的購物app

前言

最近在學習Vue的使用。看了官方文檔以後，感受挺有意思的。因而着手作了一個簡單的購物app。
這是我第一次在這個網站上寫分享，若有不當之處，請多多指教。

一整個項目寫下來，最大的感受就是組件式開發，管理起來實在是太舒服了。並且vue中寫scss還能夠指定局部有效。這樣寫起scss感受安全多了。用 vuex 進行全局數據管理也挺舒心的。element-ui 則大大解放了生產力。

概述

項目使用 Webpack + Vue2.x + vue-cli + vue-router + vuex + axios + element-ui 進行開發。
項目地址：https://github.com/OEEO/shopp...

上述技術棧簡要說明：

vue-cli

vue-cli 就是使用搭建vue項目的腳手架，會幫你生成webpack的配置，以及大部分項目須要使用到的依賴，你只須要 install 就能夠了。配置過 webpack 的同窗應該能體會到使用 vue-cli 的爽。

vue-router

vue-router 主要用於單頁應用的頁面切換，用路由的好處是不用刷新頁面，就能夠跳轉頁面，並且 url 會變化，便於用戶收藏地址。經常使用於不須要與後端交互數據的頁面變化操做。

vuex

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。簡單來講就是專門用於管理數據的一個全局對象。我以爲用 Vuex 管理數據的最大好處是便於維護，以及方便與後端交互數據。

axios

axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。
axios 不支持 jsonp ，若是須要，要單獨引入 jsonp。

element-ui、mint-ui

這兩個都是餓了麼團隊貢獻的 UI 組件庫，其中 mint-ui 更輕量，更適用於手機端，但我實踐過程當中是發現 mint-ui 的功能太少，很難知足需求。以單獨引入的方式使用 element-ui 可減少其佔用體積，也是不錯的選擇。

遇到的問題及解決辦法

一、當組件中的 style 標籤中使用了 scoped，會致使某些 element-ui 中的默認樣式修改無效。

解決辦法：將對 element-ui 的修改單獨寫在一文件中，再用 import 引入到沒使用 scoped 的 app.vue 中。
或者不要使用 scoped 。

二、父路由切換到子路由，地址發生了變化，頁面卻沒出來

解決辦法：父路由的頁面中須要添加 router-view 子路由纔會顯示出來。

三、computed 不能傳入參數

解決辦法：使用 methods。不過通常狀況下，若是能用computed解決的都用computed，由於computed會把結果緩存，性能更優。

因爲不少問題都是作項目的時候，順便就搜索解決了，一時也想不起來還有什麼特別的問題了。
若有什麼建議，或我能夠解決的問題，歡迎聯繫本人。

最後若是大神們若有什麼進階項目推薦，也請多多指教。有好玩的項目寫，動力就大大不同。

若是本項目對你有幫助，請在 github 賜個 star 咯。另外本人找工做ing，若有本人能夠勝任的工做，請給個機會。畢竟自已獨自在家寫代碼，不如在團隊中寫代碼有意思。