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

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

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

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

第6步：连接数据

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

const mongoose = require('mongoose')/** * 连接数据库的方法 */function dbConnect(){    mongoose.connect('mongodb://localhost:27017/eshop2',{        useNewUrlParser: true,        useUnifiedTopology: true    }).then(()=>{        console.log('数据库连接成功')    }).catch(err=>{        console.log('数据库连接失败')    })}module.exports = dbConnect

在 app.js 中添加数据库连接的相关代码：

var dbConnect = require('./db');dbConnect()

1.2、前端环境搭建

1.2.1、后台管理系统（PC端后台）

PC端后台系统技术栈：Vue2、VueRouter、Vuex、ElementUI、axios、wangEditor、ECharts、vuex-persistedstate

第1步：安装脚手架

# 全局安装，一台计算机只需要安装一次cnpm i -g @vue/cli

第2步：创建项目

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

vue create eshop-admin

进入到项目：

# 进入项目cd eshop-admin# 启动项目npm run serve

第3步：安装相关依赖

# 安装组件库cnpm i element-ui -save# 安装axioscnpm i axios --save# 安装富文本编辑器cnpm i wangeditor --save# 安装数据可视化图表插件cnpm i echarts --save

简化命令：

cnpm i element-ui axios wangeditor echarts --save

第4步：简化项目结构

- public- src	- http  用于管理HTTP异步请求的模块		- index.js	- router 用于管理路由的模块		- index.js		- routes.js  路由对象模块		- beforeEach.js  全局守卫模块	- store  状态管理模块		- index.js	- components  公共组件管理目录	- views  视图组件管理目录	- App.vue  根组件文件	- main.js  项目入口文件- package.json

第5步：全局引入组件库

在 main.js 文件中引入 element-ui 组件库：

import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);

1.2.2、WebAPP应用（移动端前台）

WebAPP前台技术栈：Vue2、VueRouter、Vuex、Vant、axios、vuex-persistedstate

操作步骤参考 1.2.1

安装依赖：

# 安装组件库cnpm i vant -save

在 main.js 文件中引入 Vant 组件库：

import Vant from 'vant';import 'vant/lib/index.css';Vue.use(Vant);

2、服务端接口开发

2.1、服务端项目结构设计

2.1.1、设计路由

在 routes 目录下创建当前模块的路由文件，例如 routes/goods.js 商品模块的路由，示例代码如下：

var express = require('express')var router = express.Router()//处理get请求router.get('/find', (req,res)=>{    //接收参数    let {id} = req.query        //响应数据    res.json({        msg: '查询成功'    })})//处理post请求router.post('/add', (req,res)=>{    //接收参数    let g = req.body        //响应数据    res.json({})})module.exports = router

在 app.js 入口文件引入路由

var express = require('express')var goodsRouter = require('./routes/goods') //引入路由var app = express()app.use('/goods', goodsRouter)

当前商品模块的路由访问地址为：

http://localhost:3000/goods/add (post请求)http://localhost:3000/goods/find (get请求)

2.1.2、设计数据库模块

在 models 目录下创建模块文件，例如 models/goods.js 文件，示例代码如下：

var mongoose = require('mongoose')//创建商品文档对象var schema = new mongoose.Schema({    title: String,    price: Number})var Goods = mongoose.model('goods',schema)

文档对象的API（以 Goods 为例）：

//添加数据，create(g)参数为要添加的对象，执行成功后返回的是添加成功的对象Goods.create(g).then(rel=>{}).catch(err=>{})//修改数据，updateOne()参数1为修改条件，参数2为要修改的新对象，返回修改的结果对象，当 rel.n > 0 时表示修改成功Goods.updatOne(where,params).then(rel=>{}).catch(err=>{})//删除数据，findOneAndDelete()参数为删除条件，返回删除成功的对象Goods.findOneAndDelete(where).then(rel=>{}).catch(err=>{})//查询所有，find()参数为查询条件Goods.find(where).then(rel=>{}).catch(err=>{})//排序查询所有，sort()参数为排序条件 {price: 1}为价格升序，{price: -1}为价格降序，多条件语法 {price:1, sal: -1}Goods.find().sort({price: -1}).then(rel=>{}).catch(err=>{})//分页查询，start表示查询的起始位置（索引），pageSize表示每页查询的条数//start = (当前页码 - 1) × 每页条数Goods.find().skip(start).limit(pageSize).then(rel=>{}).catch(err=>{})//查询总记录数，find()参数为查询条件，返回当前数据的总数量//总页数 = Math.ceil(count/pageSize)Goods.find(where).count().then(rel=>{}).catch(err=>{})Goods.find(where).countDocuments().then(rel=>{}).catch(err=>{})//模糊查询，查询对象为一个包含正则表达式的条件对象Goods.find({title: {$regex:  /['裤']|['男']/}}).then(rel=>{}).catch(err=>{})//比较查询，查询条件中 $gt表示大于，$lt表示小于Goods.find({price: {$gt: 200, $lt: 300}}).then(rel=>{}).catch(err=>{})

在路由文件中引入当前的文档对象，例如：在 routes/goods.js 路由文件中引入 models/goods.js，示例代码如下：

var express = require('express')var router = express.Router()var Goods = require('../models/goods') //引入商品文档对象，使用Goods对象操作数据库//查询所有router.get('/find', (req,res)=>{    //接收参数    let {_id} = req.query        //操作数据库    Goods.find({_id}).then(result=>{        res.json({            msg: '查询成功'        })    }).catch(err=>{        res.json({            msg: '查询时出现异常'        })    })    })//查询单条数据router.get('/findOne', (req,res)=>{    })//添加router.post('/add', (req,res)=>{    })//修改router.post('/update', (req,res)=>{    })//删除router.get('/del', (req,res)=>{    })module.exports = router

3、后台管理系统开发（PC）

4、WebAPP开发（移动端）

5、服务端部署上线

6、打包APP（Android）