在最開始學習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
二 項目代碼結(jié)構
項目框架是Vue-Cli的模板，但未使用eslint,test,karma等部分侮邀，然后在此基礎上根據(jù)實際需求添加了一些loader和npm packages
Tips：
1.我們可以看到目錄結(jié)構和Vue官方webpack模板幾乎一致坏怪，只是src中有所添加
src/assets //自己寫的js,css庫文件,圖片等
src/store //vuex狀態(tài)管理器的內(nèi)容
2.項目支持了sass，因此在模板基礎上添加了node-sass和sass-loader
3.為了移動端的多屏幕適應绊茧，在static/js中添加了手淘的flexible.js,以便使用rem
4.模板基礎上添加了vuex
5.使用了better-scroll處理移動端scroll事件
6.fastclick處理移動端點擊事件
三 項目分析
1.從上一部分的項目結(jié)構和Tips我們可以看到铝宵，該項目雖小，但是五臟俱全按傅，移動端的多屏適應和基本事件處理都有所涉及捉超，通過這個小項目我們可以練習以下幾個內(nèi)容
- 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內(nèi)部結(jié)構還需要重新進行改造祠够。
官方的vuex的demo筆者最開始也是參考的官方推薦的代碼結(jié)構。
6.vue-router
由于項目簡單粪牲，只有兩個組件跳轉(zhuǎn)古瓤，因此vue-router只有一個index.js文件
四 總結(jié)
對于整個項目基本結(jié)構到此為止，對于有興趣深入了解的需要去看看實際的代碼腺阳，文章中無法將一些邏輯結(jié)構或者更細節(jié)的東西闡述出來了落君。 不過在項目之外還有一些小經(jīng)驗可以分享：筆者最開始寫東西，總是能運行成功就完事兒亭引，但這種方式是無法獲得一些本質(zhì)的改變和提高绎速。后面意識到我們需要回顧以前寫過的代碼，分析可以改進的地方焙蚓，不斷地優(yōu)化自己的項目纹冤，盡力讓自己的代碼可讀，優(yōu)雅购公，高效萌京。每過一個月，看看自己以前的代碼君丁，就會發(fā)現(xiàn)一個月前的自己是多么糟糕枫夺。
