Nuxt+Express+Nodejs+MongoDB项目框架搭建

参考项目及博客

1. 初始框架搭建
2. 后台具体逻辑搭建
3. 数据与后台交互，axios的使用
4. Nuxt学习教程
5. bootstrap-vue前端框架
6. 解决Unexpected token import 问题

具体目录

• 最终项目生成框架
  
  a.asserts下放img和css资源
  b.components下放自定义组件
  c.layouts下放自定义的页面的布局
  d.pages下放自定义的各个页面
  e.server是后端控制部分
  
  项目默认调用文件是index.js和index.vue

依赖安装

eg.

npm install @nuxtjs/axios --save
npm install bootstrap-vue --save
npm install body-parser --save
npm install backpack-core --save
npm install babel-core babel-eslint babel-polyfill babel-preset-es2015 --save-dev

运行脚本

将package.json中的script修改为:

将运行入口文件定义为（这里主要解决node不能完全支持es6\7语法的问题）：

backpack.config.js为(这里主要将文件js重新打包，用于生产环境线上发布)：

同时添加babel环境文件.babelrc，为：

运行时

npm run dev //开发环境
npm run build //生产环境，将js，css重新压缩
npm run start //需要先运行npm run build在运行


前后端交互

1. 例如在pages/all-news页面中，我们要在页面加载是获取后台数据，我们可以：
   
2. 在server/api/index.vue 和 server/server.js中，我们定义了路由逻辑
   server.js
   
   api/index.js
   
   
   数据库连接
   
3. 在server/config.js中，我们定义mongodb数据库信息
   
4. 在api/news.js中，我们定义了数据库操作行为
   
5. 在server/model中我们定义了数据库模型/表