【Vue2.0】 项目实战案例及Demo,基于vue2.0+vuex+vue-router2+axios实现

Github地址:https://github.com/hicoldcat/TimeCat

【此处留白】 - 图片社交分享App

技术栈

前端:Vue2 + Vuex + Vue-Router2 + Axios + Webpack + ES6/7 + Less

项目安装


# clone或者download项目
git clone https://github.com/hicoldcat/TimeCat.git

# 进入项目文件夹
cd TimeCat

# 安装依赖
npm install

项目运行

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

项目编译打包

# build for production with minification
npm run build

项目结构

|-- api                            // 项目接口定义
|
|-- build                            // webpack配置文件
|
|-- config                           // 项目配置文件
|
|-- dist                            // 项目打包文件
|
|-- timecat                          // 上线项目文件,放在服务器即可正常访问
|
|-- screenshots                      // 项目截图
|
|-- src                              // 源码目录
|   |-- assets                       // 项目公共资源
|   |-- components                   // 组件库
|   |-- modules                      // 项目模块
|   |-- router                       // 路由文件
|   |-- service                      // Mock数据
|   |-- store                        // vuex的状态管理
|   |-- style                        // 各种样式文件
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件,加载各种公共组件
|
|-- static                          //一些静态资源,不会被webpack编译
|
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 代码编写规格
|-- .gitignore                       // 忽略的文件
|-- favicon.ico                      // 页面左上角小图标
|-- index.html                       // 入口html文件
|-- package.json                     // 项目及工具的依赖配置文件
|-- README.md                        // 说明

项目说明

项目目标是做一个基于vue全家桶的移动端图片分享app

后期会把后端也加进来,前端和后端打通,做一个完整的可上线发布的app

最终希望项目可以将原型图设计、切图、标注、开发、测试和上线等一整套完整开发流程尝试一遍,以全栈工程师为目标

项目风格

简约 文艺 清新

项目完成度

[√] 首页功能模块 – 完成[2017-03-02]

项目截图

【片刻留白】—每日分享模块[daily]

【回声留白】—音乐分享模块[vocality]

【字符留白】—随笔分享模块[essay]

【半步留白】—游记分享模块[travels]

贡献

由于本人前端小菜鸟一枚,如果有任何的问题,欢迎给我提issue

如果此项目对你有帮助,可以给个star哦

项目正在开发中……
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值