vue项目中普通环境的搭建 (详细 新手必备) 开发环境搭建

1、开发环境搭建

1.1、服务端环境搭建

服务端技术栈：Node、Express、CORS、mongoose、multer

第1步：安装脚手架

命令如下：

# 全局安装，一台计算机只需要执行一次即可
cnpm i -g express express-generator

第2步：创建项目

例如：D:\project\ 启动 cmd ，执行以下命令：

express -e eshop-server

命令执行成功后，会创建 D:\project\eshop-server 文件夹，eshop-server 文件夹就是当前服务端项目的根目录，在命令行中切换到该目录下：

# 切换到项目根目录
cd eshop-server

# 初始化所有依赖
cnpm i

第3步：安装相关依赖

命令如下：

# 解决跨域问题
cnpm i cors --save

# 操作数据库
cnpm i mongoose --save

# 文件上传
cnpm i multer --save

简化命令：

cnpm i cors mongoose multer --save

第4步：优化项目结构

初始项目结构：

- public
- db
	- index.js 用于连接数据库的模块
- models 用于管理文档对象的目录
- crud
	- index.js 用于封装增删改查函数的模块
- routes 用于路由管理的目录
	- index.js
- views 视图模板引擎管理目录
- app.js 项目入口文件
- package.json NPM管理文件

第5步：完善项目代码

设置服务器的热启动，安装 nodemon 模块，命令如下：

# 开发环境安装
cnpm i nodemon --save-dev

# 或者
cnpm i nodemon -D

修改 package.json 文件，代码如下：