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')
//需要在路由的前面引入 cors
app.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
创建时弹出第一步要进行选择配置
在这一步要选择需要安装的东西 根据实际项目需要 用上下键 和 空格键 进行选择
选择vue版本 一般情况下是2 现在3虽然有些大厂也在用 但是普遍还是用的2
是否保存路由历史 选择yes
以下是全部选择项 具体要根据项目需求进行选择 一般情况下这些就可以满足基本要求
进入到项目：
# 进入项目
cd eshop-admin
# 启动项目
npm run serve
第3步：安装相关依赖
# 安装组件库
cnpm i element-ui -save
# 安装axios
cnpm 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 组件库：
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);