VUE移動端案例整合

介紹

vue-case是筆者學習VUE的過程當中將各類移動APP的使用場景整合的一個項目。其中包括了輪播效果、通信錄功能、圖片懶加載、滾動加載更多、按鈕組件、彈框組件、側邊欄、路由權限控制、國際化等功能。

技術棧

vue.js 構建用戶界面的 MVVM 框架，核心思想是：數據驅動、組件系統。

vue-cli 是vue的腳手架工具，目錄結構、本地調試、代碼部署、熱加載、單元測試。

vue-router 是官方提供的路由器，使用vue.js構建單頁面應用程序變得垂手可得。

vue-resource 請求數據，服務器通信，官方推薦axios請求數據，本項目後期改用axios。

vuex 是一個專爲 vue.js 應用程序開發的狀態管理模式，簡單來講Vuex就是管理數據的。

better-scroll 是一款重點解決移動端（將來可能會考慮 PC 端）各類滾動場景需求的插件。

vue-lazyload 是一款實現圖片懶加載的插件。

wc-messagebox 是一款基於 Vue 2.0 開發的 Alert, Toast, Confirm 插件, UI仿照 iOS 原生。

源碼地址

源碼地址： https://github.com/toutouping...

效果展現

項目運行

# set sass_binary_site
set sass_binary_site=./node
s/win32-x64-57_binding.node

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

項目佈局

├── README.md
├── config // webpack配置文件
├── build // 項目打包路徑
├── images // 圖片資源
├── static // 靜態資源
├── index.html
├── package.json
├── data.json // 用於請求的JSOn數據
├── src // 源碼目錄
│   ├── components // 頁面組件
│   ├── common // 工具類代碼
│   ├──css
│   ├──fonts
│   ├──image
│   ├──js
│   ├── components
│   ├── base // 通用組件
│   ├── App.vue // 頁面入口文件
│   ├── main.js // 程序入口文件，加載各類公共組件
│   ├── router
│      └── index.js // 全部頁面路由控制中心
│── test // 測試目錄