在最開始學習vue時，自己寫了個todolist作為demo，后來把todolist重寫加強，做成了一個適應移動端的書籍閱讀管理App，現(xiàn)在就和大家分享一下這個入門實戰(zhàn)項目
一 項目初探
項目概覽:
項目地址: https://github.com/PengLL/BookRecord
開發(fā)環(huán)境：
- node 6.9.2
- npm 4.2.0
- webpack 2.2.1
用git啟動項目：
git clone https://github.com/PengLL/BookRecord.git
cd BookRecord
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
二 項目代碼結構
項目框架是Vue-Cli的模板，但未使用eslint,test,karma等部分，然后在此基礎上根據(jù)實際需求添加了一些loader和npm packages
Tips：
1.我們可以看到目錄結構和Vue官方webpack模板幾乎一致，只是src中有所添加
src/assets //自己寫的js,css庫文件,圖片等
src/store //vuex狀態(tài)管理器的內容
2.項目支持了sass，因此在模板基礎上添加了node-sass和sass-loader
3.為了移動端的多屏幕適應，在static/js中添加了手淘的flexible.js,以便使用rem
4.模板基礎上添加了vuex
5.使用了better-scroll處理移動端scroll事件
6.fastclick處理移動端點擊事件
三 項目分析
1.從上一部分的項目結構和Tips我們可以看到，該項目雖小，但是五臟俱全，移動端的多屏適應和基本事件處理都有所涉及，通過這個小項目我們可以練習以下幾個內容
- vue2.0
- vuex
- vue-router
- ES6
- webpack
- 多屏適應
- 移動端事件處理
2.我們通過Localstorage來模擬后端數(shù)據(jù)的增刪改查
3.為了和其他第三方代碼進行區(qū)別，將Pl作為前綴，組件的css的類名都是以組件名稱為開頭，vuex中的mutation-types的常量名都是根據(jù)功能來命名的。所以很多命名相對比較長，便于看名識意。
4.書籍閱讀管理App由的所有組件：
5.vuex
筆者并未將vuex的modules中的一個js文件對應一個組件，現(xiàn)階段只根據(jù)實際狀態(tài)的復雜度劃分了三個模塊，如果后續(xù)在某些組件上增加功能，vuex內部結構還需要重新進行改造。
官方的vuex的demo筆者最開始也是參考的官方推薦的代碼結構。
6.vue-router
由于項目簡單，只有兩個組件跳轉，因此vue-router只有一個index.js文件
四 總結
對于整個項目基本結構到此為止，對于有興趣深入了解的需要去看看實際的代碼，文章中無法將一些邏輯結構或者更細節(jié)的東西闡述出來了。 不過在項目之外還有一些小經(jīng)驗可以分享：筆者最開始寫東西，總是能運行成功就完事兒，但這種方式是無法獲得一些本質的改變和提高。后面意識到我們需要回顧以前寫過的代碼，分析可以改進的地方，不斷地優(yōu)化自己的項目，盡力讓自己的代碼可讀，優(yōu)雅，高效。每過一個月，看看自己以前的代碼，就會發(fā)現(xiàn)一個月前的自己是多么糟糕。
