Vue开发环境搭建（实时更新，超级详细！）
⽂章⽬录
1、开发环境搭建
1.1、服务端环境搭建
vue element admin服务端技术栈：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(){ t('mongodb://localhost:27017/eshop2',{ use NewUrlParser:true, useUnifiedTopology:true}).then(()=>{ console.log('数据库连接成功')}).catch(err=>{ console.log('数据库连接失败')}) }ports = 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请求('/find', (req,res)=>{ //接收参数 let {id} = req.query //响应数据res.json({ msg: '查询成功' })})//处理post请求router.post('/add', (req,res)=>{ //接收参数 let g = req.body //响应数据 res.json({})})po rts = router
在 app.js ⼊⼝⽂件引⼊路由
var express =require('express')var goodsRouter =require('./routes/goods')//引⼊路由var app = express()app.use('/goods', goodsRouter)
当前商品模块的路由访问地址为：
localhost:3000/goods/add (post请求)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.m odel('goods',schema)
⽂档对象的API（以 Goods 为例）：
//添加数据，create(g)参数为要添加的对象，执⾏成功后返回的是添加成功的对象ate(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()参数为查询条件，返回当前数据的总数量//总页数 = il(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对象操作数据库//查询所有('/find', (req,res)=>{ //接收参数 let {_id} = req.query //操作数据库 Goods.find({_id}).then(result=>{ res.json({ msg: '查询成功' }) }).catch(err=>{ res.json({ msg: '查询时出现异常' }) }) })//查询单条数据('/findOne', (req,res)=>{ })//添加router.post( '/add', (req,res)=>{ })//修改router.post('/update', (req,res)=>{ })//删除('/del', (req,res)=>{ })ports = router
3、后台管理系统开发（PC）
4、WebAPP开发（移动端）
5、服务端部署上线
6、打包APP（Android）
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论