使用 Vue,Express,Webpack,gulp 搭建的自动化电影库项目

阅读 1738
收藏 102
2017-03-24
原文链接:github.com

项目介绍

  • 采用vue-cli 构建初始项目目录
  • 使用vuevue-routerexpresswebpackgulpElement-ui构建项目开发环境
  • 前端采用Vue、Element-ui搭建页面以及数据处理,后端采用express完成增删改查的restful API
  • 页面为电影列表页以及电影详情页

目录及文件的改动,均含详细备注

  1. config/index.js 中设置了请求端口代理,能够跨域访问服务器端口(8080 => 3000)
  2. server 主要是服务端的路由以,api接口,mongodb的配置操作
  3. src 为vue应用的主要文件,包含路由,component...
  4. gulpfile.js 增加服务器重启和浏览器刷新任务
  5. server.js 服务端启动文件

操作指令

npm install 安装依赖

npm run dev 使用webpack开启前端资源的打包编译

npm run data  从豆瓣获取几条源数据

gulp  启动服务端并开启浏览器

这里需要双开两个命令行窗口,一个负责前端的编译,一个负责服务端的任务流

环境搭建的详细解决思路

前端热更新,后端服务重启,浏览器自动刷新

项目一览

  • 电影列表页

电影列表页

  • 电影详情编辑

  • 电影详情页

评论