vue 项目实战(一)——资金管理系统——01使用Express搭建本地服务器

在这之前首先请安装Node.js和npm。

一、操作

npm init

会出现以下画面vue 项目实战(一)——资金管理系统——01使用Express搭建本地服务器_第1张图片
直接敲回车即可。
vue 项目实战(一)——资金管理系统——01使用Express搭建本地服务器_第2张图片
除了标红色的,其他的敲enter就好。
然后查看目录,会生成一个package.json,内容如下
vue 项目实战(一)——资金管理系统——01使用Express搭建本地服务器_第3张图片
2.安装express模块

D:\vuejs\node-vue-ele-app>npm install express

vue 项目实战(一)——资金管理系统——01使用Express搭建本地服务器_第4张图片
出现标注的,表示安装完成。
server.js中编辑,

// 实例化
const express = require("express")
const app = express();

const port = process.env.PORT || 5000;

app.listen(port, () => {
    console.log(`Server running on port ${port}`);
})

敲命令:

node server.js

出现如下画面,成功
在这里插入图片描述
每次编辑完server.js文件后,都得重新启动node.js
为了不重启,需要安装一个nodemon模块。

npm insall nodemon -g #全局安装
nodemon server.js #启动

就不用每次修改完文件,还得重启服务器。
为了能更有效的启动服务器,更改前的配置(红色标注):
vue 项目实战(一)——资金管理系统——01使用Express搭建本地服务器_第5张图片
更改后的配置:
vue 项目实战(一)——资金管理系统——01使用Express搭建本地服务器_第6张图片
做了配置后,启动的命令就成了

npm run server

vue 项目实战(一)——资金管理系统——01使用Express搭建本地服务器_第7张图片
打开浏览器
vue 项目实战(一)——资金管理系统——01使用Express搭建本地服务器_第8张图片

你可能感兴趣的:(Vue,前端)