导读：
Vue是一个流行的JavaScript框架，用于构建用户界面 。MongoDB则是一种流行的NoSQL数据库，适用于大规模数据存储和处理 。这篇文章将介绍如何使用Vue和MongoDB来构建一个简单的Web应用程序 。
1. 安装和配置MongoDB
首先，需要安装MongoDB并进行基本配置 。可以从MongoDB官网下载安装程序 ， 并按照提示进行安装 。然后 ， 需要启动MongoDB服务并创建一个数据库 。可以使用命令行工具或MongoDB Compass等可视化工具来完成这些任务 。
2. 创建Vue项目
接下来，需要创建一个新的Vue项目 。可以使用Vue CLI来快速生成一个基本的Vue应用程序 。在控制台中输入以下命令：
```
vue create my-project
这将创建一个名为“my-project”的新Vue项目 。然后 ， 可以通过运行以下命令来启动开发服务器：
npm run serve
3. 连接MongoDB数据库
要连接MongoDB数据库 ， 需要使用一个MongoDB驱动程序 。可以使用Mongoose等流行的Node.js驱动程序来实现这一点 。在Vue项目中安装Mongoose：
npm install mongoose --save
然后，在Vue项目中创建一个新文件夹，例如“server” ， 并在其中创建一个新文件“db.js” 。在该文件中，可以编写代码以连接到MongoDB数据库：
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/my-database', { useNewUrlParser: true });
此代码将连接到本地MongoDB实例中名为“my-database”的数据库 。
4. 创建API
现在，可以创建一个简单的API来访问MongoDB数据库 。在Vue项目中创建一个新文件夹，例如“api”，并在其中创建一个新文件“index.js” 。在该文件中，可以编写代码以定义API路由和处理程序：
const express = require('express');
const router = express.Router();
const MyModel = mongoose.model('MyModel', new mongoose.Schema({
name: String,
description: String
}));
router.get('/items', async (req, res) => {
const items = await MyModel.find();
res.json(items);
});
【vue mongodb】router.post('/items', async (req, res) => {
const item = new MyModel(req.body);
await item.save();
res.json(item);
module.exports = router;
此代码将创建一个名为“MyModel”的Mongoose模型，并定义了两个API路由：GET /api/items和POST /api/items 。这些路由将分别返回所有项目和添加新项目 。
5. 集成API
最后，需要在Vue应用程序中集成API 。可以使用Vue Resource等库来实现这一点 。在Vue项目中安装Vue Resource：
npm install vue-resource --save
然后，在Vue组件中使用以下代码来调用API：
My Items