项目介绍：此项目前端使用的Vue+Element-UI框架，后端使用的express（express 是node.js的一个web开发框架），数据库使用了mongdb数据库。
通过express Web框架分别和Element-UI、MongoDB数据库进行交互，完成Vue页面和MongoDB数据库的增删改查等操作。
Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
Element-UI，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。
Node.js ，简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用，和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站。
MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。
先上一张效果图：
5、开始进入主题，初始化一个vue项目（再次创建项目就可以从这一步开始了）
一、项目开发环境设置
1、安装Mongodb数据库
安装教程：https://blog.csdn.net/m0_52560366/article/details/110239332
2、安装node.js开发环境
前端开发框架和环境都需要 Node.js ，安装node.js开发环境。
下载地址：https://nodejs.org/en/，下载后安装，一直点击next就行，安装完成后，在cmd中查看node版本号。
node -v
3、安装淘宝npm镜像
vue的运行是要依赖于node的npm的管理工具来实现
npm是国外的，使用起来比较慢，这里使用淘宝的cnpm镜像来安装vue。
npm install -g cnpm --registry=https://registry.npm.taobao.org
4、安装全局vue-cli脚手架
淘宝镜像安装成功之后，我们就可以安装全局vue-cli脚手架。
cnpm install --global vue-cli
5、开始进入主题，初始化一个vue项目（再次创建项目就可以从这一步开始了）
先用d:的命令进入d盘，输入下面命令回车，创建项目element，默认创建项目的信息，利用vue-cli自动构建一个基础项目即可。
vue init webpack element
出现下面提示，说明初始化成功。
cd element
npm run dev
输入cd element进入基础项目，输入命令npm run dev，运行基础项目element，弹出访问地址。
如果地址可以访问，说明可以安装Element UI，之后引入Element UI组件。
6、安装 Element UI
在刚刚创建的vue项目中创建element工程项目
Vue-cli3.0以上执行：vue add element
接下来就可以使用HbuilderX、WebStorm等工具，打开项目进行编写了。
二、项目运行需要运行的操作
1、运行程序之前的操作
1、服务端操作时，设计后端可以访问跨越：
npm i express@next mongoose cors
2、运行express服务：
使用node server/index.js命令，没有自动重载，更改完项目后需要关闭服务，重新运行，太麻烦了，所以我们进行全局安装nodemon。
npm install -global nodemon
最低0.47元/天 解锁文章
3979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
