SimpleBooks 基于 vue2.0 + vuex 构建的单页面应用
SimpleBooks 基于 vue2.0 + vuex 构建的单页面应用
JavaScript Vue.js相关
共2Star
详细介绍
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 // 说明