linkagesel java_昔年 - SegmentFault 思否

介绍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 原生。

源码地址

效果展示

项目运行# 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 // 测试目录查看原文