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 // 测试目录