当前位置: 首页 > 软件库 > Web应用开发 > >

vue-express-webpack-gulp

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发
软件类型 开源软件
地区 不详
投 递 者 米元凯
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

项目介绍

  • 采用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  从豆瓣获取几条源数据

npm run server  启动服务端并开启浏览器

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

环境搭建的详细解决思路

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

项目一览

  • 电影列表页

  • 电影详情编辑

  • 电影详情页

  • 本文中所使用的webpack配置相关版本如下, 如果你想要用新一点的版本, 可能需要根据报错的提示,安装额外的内容 webpack 3.6.0 css-loader 2.0.2 style-loader 0.23.1 less-loader 74.1.0 less 3.9.0 url-loader 1.1.2 babel-loader 7.1.5 babel-core 6.26.3 babel-p

  • 前言   模块化管理工具和自动化构建工具是不同的。两者主要体现在侧重点不一样。自动化构建工具侧重于前端开发的 整个过程 的控制管理(像是流水线)。而模块化管理工具更侧重于模块打包,当然我们可以把开发中的所有资源(图片、js文件、css文件等)都可以看成模块。 Webpack     webpack可以说是当前最流行的模块化管理工具和打包工具。其通过loader的转换,可以将任何形式的资源视作模块。

  • https://blog.csdn.net/jimmyhandy/article/details/50723174 该文章所介绍的问题均是在64位win8下出现的。 网络原因导致gulp-sass安装失败 如果你正在构建一个基于 gulp 的前端自动化开发环境,那么极有可能会用到 gulp-sass ,由于网络原因你可能会安装失败,因为安装过程中部分细节会到亚马逊云服务器上获取文件。 执行安装gu

  • Webpack 了解Webpack 什么是webpack WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。 为什要使用webpack 模块化开发:让我们可以把复杂的程序细化为小的文件; ES6转ES5:让我们能够使用JavaScr

  • 配套可执行代码示例 => GitHub webpack初识 webpack:前端模块化打包工具 把项目中浏览器不能识别的东西转换成大部分浏览器能识别的东西,比如scss转成css,ES6语法转成ES5语法等。 让我们可以进行模块化开发,并帮助我们处理模块间的依赖关系。不仅仅是JavaScript文件,CSS、图片、Json文件等在Webpack中都可以当做模块使用。 与grunt/gulp的对比

  • 写在前面 因为业务关系,涉及到的新老业务较多。因此接触过webpack早期与后期的阶段。 以及vue-cli2、3、4 我们现在已经在使用vue-cli4了 老生常谈的几个优化操作 Dll 剥离公用资源 如何使用(vue-li3、4)的小伙伴可以看以下 先将dll配置文件写好 webpack.dll.config.js const path = require('path'); const web

  • 1,认识webpack及安装 webpack是一个JavaScript应用的静态模块打包工具-----模块 和 打包 1,将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。 2,在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作。 grunt/gulp和webpack

  • 在vue的模块化开发中需要用到webpack webpack是一个现代的JavaScript应用的静态模块打包工具 两个核心:模块化、打包 webpack让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。css,图片,json文件等等在webpack中都可以被当作模块来使用 grunt/gulp grunt/gulp的核心是task 我们可以配置一系列的Task,并且定义task要处理

 相关资料
  • express-vue A Simple way of using Server Side rendered Vue.js 2.0+ natively in Express using streams If you want to use vue.js and setup a large scale web application that is server side rendered, usi

  • Webpack、Vue、React、Koa2 React 基于webpack4、koa2的react基础配置脚手架 Vue 基于webpack3、koa2的vue的基础配置脚手架 基于webpack4、koa2的vue的基础配置脚手架 基于webpack4、koa2的vue的SSR配置脚手架 Node koa服务端

  • 前后端分离示例 一个前后端分离的案例,前端 vuejs,后端 express, 数据库 mongodb。使用 express 的提供api供前端调用,前端ajax请求进行对数据库的CURD操作。 前言 在学习前端开发的过程中了解到前后端分离这个概念前后分离架构的探索之路我们为什么要尝试前后端分离因此决定小试身手,项目中主要使用到的框架和库. vuejs vue-router muse-ui axi

  • 本文向大家介绍webpack+vue+express(hot)热启动调试简单配置方法,包括了webpack+vue+express(hot)热启动调试简单配置方法的使用技巧和注意事项,需要的朋友参考一下 前言 最近搞vue+webpack,vue的api还是比较容易懂的,每次build很复杂,这里就介绍下热启动调试吧,心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 web

  • Vue, Express, MongoDB full-stack JS Boilerplate This is a full stack webapp boilerplate project with VueJS + ExpressJS + MongoDB. It is NOT an out-of-box project.I make it in order to create an up-to-

  • Vue-Admin-Express-Mongoose 基于Vue2.0(Vue-cli)+ElementUI+Express+Mongoose的全栈开发环境 前端页面部分基于vueAdmin项目,修复了其中的一些BUG。 OnlineDemo 效果 用法 安装依赖 npm install 开发环境 首先,启动Express服务(4501端口),提供API接口,请确保已经安装MongoDB npm