前言

最近在學習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 可減小其占用體積，也是不錯的選擇。

遇到的問題及解決辦法

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

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

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

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

3、computed 不能傳入參數

解決辦法：使用 methods。不過一般情況下，如果能用computed解決的都用computed，因為computed會把結果緩存，性能更優。

由於很多問題都是做項目的時候，順便就搜索解決了，一時也想不起來還有什麽特別的問題了。
如有什麽建議，或我可以解決的問題，歡迎聯系本人。

最後如果大神們如有什麽進階項目推薦，也請多多指教。有好玩的項目寫，動力就大大不一樣。

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

原文地址：https://segmentfault.com/a/1190000014220254

用 Vue 做一個簡單的購物app