vue的搭建以及框架的细致步骤

1、开发环境搭建

1.1、服务端环境搭建

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

第1步：安装脚手架

命令如下：

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

第2步：创建项目

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

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 文件，代码如下：

{
  "scripts": {
    "start": "nodemon ./bin/www"
  }
}

配置跨域，在 app.js 入口文件中添加下面代码：

const cors = require('cors')
​
//需要在路由的前面引入 cors
app.use(cors())

第6步：连接数据

在 db/index.js 文件中添加以下代码：

const mongoose = require('mongoose')
​
/**
 * 连接数据库的方法
 */
fu