SimpleBooks

基于vue2.0

前言

学习了vue之后 因为对简书官网的喜爱 所以就写了个简书官网 因为是业余时间来做的 所以周期有点长 从项目布局到成大概用了一个月 目前项目已经完成 正在进行一些性能的优化 增加详细的注释   附:简书官网http://www.jianshu.com/

部分截图

首页

技术栈

• vue2.0
• vuex
• vue-router
• vue-cli
• vue-resource
• element-ui
• webpack
• ES6
• less
• mock数据
 
• 自定义组件
• css3
• express框架搭建服务器

项目运行

注意:由于项目已经npm run build编译打包完成 而且已经基于nodejs的一个express框架搭建好了一个server.js服务器 所以直接启动服务器 即可快速生成项目

git clone https://github.com/wensiyuanseven/SimpleBooks.git

cd SimpleBooks

npm install

node server.js

在地址栏中输入 localhost:9000

目标功能

• 单个文章详情页面
• 加载loading
• 一些炫酷的动画
• 登录页面
• 注册页面
• 下载app页面
• 数据的获取
• ajax
• 基于express框架写的server
• 加载更多功能
• 向上翻滚轮播图
• 无缝轮播图
• animate.css
• 数据的获取
• 加载更多功能
• 组件的复用
• 返回顶部
• 自定义组件
• 媒体查询

总结

项目写到现在，从 登录注册到、首页、下载页每个页面的详情页 一个流程走完之后、不但对vue的理解更深一层，而且对以后掌控大型项目的时候也有非常多的帮助，做一个实际的项目才能对自己有很大的提升。

项目布局

|-- build                            // webpack配置文件
|-- config                           // 项目打包路径
|-- dist                          	 // 上线项目文件，放在服务器即可正常访问
|-- src                              // 源码目录
|   |-- store                        // vuex的状态管理
|       |-- modules                  // store模块
|       |-- action.js                // 配置actions
|       |-- getters.js               // 配置getters
|       |-- index.js                 // 引用vuex，创建store
|       |-- types.js                // 定义常量muations名
|       |-- mutations.js             // 配置mutations
|
|
|   |-- App.vue                      // 页面入口文件
|
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 代码编写规格
|-- .gitignore                       // 忽略的文件
|-- favicon.ico                      // 页面左上角小图标
|-- index.html                       // 入口html文件
|--webpack.config.js                 //webpack的配置文件
|-- package.json                     // 项目及工具的依赖配置文件
|-- README.md                        // 说明

项目截图

首页

下载页面

登录页面

注册页面

文章详情页面