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

内容简介：使用 Vue，Express，Webpack，gulp 搭建的自动化电影库项目

项目介绍

• 采用 vue-cli 构建初始项目目录
• 使用 vue 、 vue-router 、 express 、 webpack 、 gulp 、 Element-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  启动服务端并开启浏览器

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

环境搭建的详细解决思路

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

项目一览

• 电影列表页

• 电影详情编辑

• 电影详情页

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。