从0到1搭建项目，本地启动服务node+express 设置webpack自动打包构建，热更新，mock数据

最新推荐文章于 2024-02-27 14:37:19 发布
最新推荐文章于 2024-02-27 14:37:19 发布
阅读量293 收藏
点赞数
分类专栏： 前端工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29091239/article/details/111315394
版权

本地搭建项目从0到1的过程，加深工程化水平

本地需要安装node，npm 也可以使用cnpm淘宝镜像源

系统mac 支持命令创建/  windows 系统可以桌面右键创建文件夹

1. mkdir test-demo

2.cd test-demo 命令行进入文件夹

3.npm init -y 运行npm 初始化

4.本地创建src文件夹 文件夹中创建index.html 入口文件 对应业务逻辑的js文件夹，css文件夹

 

 

API搬运工
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack自动打包和热更新的实现方法
10-16
主要介绍了webpack自动打包和热更新的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
利用node➕express插件搭建本地服务器，将vue2打包文件部署到本地服务器
oneya1的博客
09-25 335
9.打开浏览器输入地址http://localhost:5005 或者 http://localhost:5005/index.html 回车就可以啦~7.穿件static文件夹用于放静态资源及打包的文件,将前端npm run build后生成的dist文件里的内容全部复制在static文件夹下。5.然后生成了node_moduled依赖,package-lock.json和package.json文件。2.用vscode打开nodeExpress文件夹。8.最后在终端运行node server。
umi/webpack + express 启用gzip，优化请求文件大小，加快首屏渲染速度
最新发布
qq_37819292的博客
02-27 466
umi/webpack + express 启用gzip，优化请求文件大小，加快首屏渲染速度。压缩分为两种模式，动态压缩、静态压缩
webpack+express搭建两个虚拟服务实现前端MVC开发
GothaM24的博客
01-21 391
前言 快过年啦，马上去参加年会，趁中午空闲时间整理一片webpack+express开发文档记录备孕。 正文 首先，我们需要完成一个一边编写一边能够预览webpack打包后的项目前端部分，然后模拟后端给出的接口 我们假设后端会给我们一个类似这种的接口：http://www.ckotham.com/userlist，正常来说是请求一个用户列表的接口， 那么我们的express可以搭建一个本地的服务器...
vue-cli利用nodejs中的express来运行打包后的vue-cli完成的项目(已解决vue-router的history模式)
奔跑的IT小白的博客
01-04 2851
      我们在利用vue脚手架(vue-cli)开发vue的项目时，在开发完毕是需要执行打包命令(npm run build)进行打包，打包后默认生成一个新的文件夹dist，项目的所有前端文件都在这个文件里面。这个时候如果我们需要以本地服务打开这个文件的时候，可以利用其它软件进行打开，比如phpstudy、xampp之类的软件开启本地服务端口(http://127.0.0.1或者http://...
express 启动服务访问本地vue打包项目
u010963051的博客
10-07 244
无
前端利用 node.js + mock 简单模拟数据接口服务器
weixin_45042868的博客
07-19 1939
前端简单构建一个模拟数据服务器，一个json文件对应一个数据请求，需要增加接口就只需要增加新的json文件，在json文件中可以按照mock的语法写（注：json文件不允许单引号）。 目录结构 1. 新建MockServer文件夹 2. 在文件夹下 npm init 一路回车就是了 3. 安装依赖 // express web框架 npm i express // mock模拟数据 npm i mockjs // 全局安装自动重启工具，监听文件变化 cnpm i nodemon -g .
详解构建mock服务最方便的神器——Moco
liwenxiang629的博客
08-09 1173
moco框架是github上的一个开源项目，可模拟http,https,Socket协议的mock操作。
前端 mock 数据
Amos的博客
11-13 783
前端 mock 数据 Easy Mock 由于easy mock线上服务基本打不开的情况，所以有能力的还是做一下本地部署(参考) 在easymock创建一个项目，并将项目的 Base URL 配置到axios的 baseURL，easymock不需要解决跨域的问题。 Yapi 公司内部的话也可以做一下内网部署 用法和easymock差不多，将yapi内项目的mock地址配置到axios的baseU...
使用 webpack 打包 express 应用
Joey_Tribiani的博客
11-15 820
初始化配置或者直接自己创建。
2019最新Node.js+Express+Gulp+Webpack+livereload热更新开发环境
04-05
这是我 2019年4月调试好的最新前端node.js+Express（默认ejs）热更新架构环境，可以用于ES6学习或开发WEB应用测试。用的的NPM各模块插件版本除了Gulp是3.9.0之外，其它都是最新版的，目录如下： "babel-core": "^6.26.3", "babel-loader": "^7.1.5", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "connect-livereload": "^0.6.1", "del": "^4.1.0", "gulp": "^3.9.0", "gulp-concat": "^2.6.1", "gulp-if": "^2.0.2", "gulp-live-server": "0.0.31", "gulp-livereload": "^4.0.1", "gulp-plumber": "^1.2.1", "gulp-rename": "^1.4.0", "gulp-sequence": "^1.0.0", "gulp-uglify": "^3.0.2", "gulp-util": "^3.0.8", "require-dir": "^1.2.0", "vinyl-named": "^1.1.0", "webpack": "^4.29.6", "webpack-stream": "^5.2.1", "yargs": "^13.2.2" Express脚手架也是最新版框架，目录如下： "cookie-parser": "~1.4.3", "debug": "~2.6.9", "ejs": "~2.5.7", "express": "~4.16.0", "http-errors": "~1.6.2", "morgan": "~1.9.0" 安装使用方法: 1 解压缩后，系统安装node.js后, 2 进入server目录与项目根目录，分别执行 npm install 命令，将server与项目的npm模块安装到本地项目内， 3 终端窗口，确认在项目目录内，执行gulp --watch启动server，打开浏览器本地端口:3000,进行开发测试。 开发目录为项目内app，目录app/views为默认模版，app/js/index.js为默认入口js文件。tasks目录为Gulp自动任务流文件。
在vue中使用express-mock搭建mock服务的方法
10-17
主要介绍了在vue中使用express-mock搭建mock服务的方法，文中给大家提到了在vue-test-utils 中 mock 全局对象的相关知识 ,需要的朋友可以参考下
webpackexpress多页面热更新
08-11
webpack，express多页面热更新
webpack+vue+express(hot)热启动调试简单配置方法
12-11
前言 最近搞vue+webpack，vue的api还是比较容易懂的，每次build很复杂，这里就介绍下热启动调试吧，心累~~~ ITDogFire –sky 工具及目录 所用的到的简单工具 webstorm +vue +webpack +express，小项目都是官方down下来的。 目录介绍如下 package { "name": "yx", "version": "1.0.0", "description": "A sample Node.js app using Express 4", "main": "server.js", "scripts": { "build":
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
11-19
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置： if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, ...补充知识：webpack打包运行vue项目后找不到.ttf及.w
node.js express服务部署到linux
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
04-12 893
node.js express服务部署到linux 部署之前先在linux安装node环境 //去官网下载node.js linux服务器版本，然后上传到linux相关路径下，一般是/usr/local/，并执行如下命令 //node-xxxx代表我上传的node目录名称 xz -d node-xxxx.tar.xz ---将tar.xz解压成tar文件 tar -xvf node-xxxx.tar ---将tar文件解压成文件夹 mv node-xxx node ----改文件夹的名字，改.
express给html设置缓存,webpack+express实现文件精确缓存的示例代码
weixin_42123191的博客
06-19 173
由于最近开发的个人博客(Vue + node)在使用过程中，发现网络加载有点慢，所以打算对它进行一次优化。本次优化的目标如下：index.html 设置成 no-cache，这样每次请求的时候都会比对一下 index.html 文件有没变化，如果没变化就使用缓存，有变化就使用新的 index.html 文件。其他所有文件一律使用长缓存，例如设置成缓存一年 maxAge: 1000 * 60 * 6...
node后端项目怎么webpack打包
05-15
Node后端项目是使用JavaScript语言编写的，这意味着我们可以使用Webpack对其进行打包，从而生成一个可执行的文件，以便在服务器端运行。 首先，需要在项目中安装Webpack及其相关依赖。可以使用以下命令： ``` npm ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值