nuxtJS+koa2+mongodb+redis电子劳动合同（

一、前言

    最近在慕课网上学习Vue全家桶+SSR+Koa2全栈开发美团网
，学到不少好东西，为了能够学以致用，就自己私下用学到的东西重构一下公司最近开发电子劳动和同项目，在此做一些笔记。

二、创建项目

    在这个项目中我用的是vue-cli3，所以要严格按照vue-cli官网搭建开发环境，然后在nuxtJS创建一个工程目录。
运行npm run dev发现根本打不开页面，页面出现HTMLElement is not define在nuxt.js中，这该如何解决呢，在网上搜索了一下，有大神给出方案，亲测有效

方法一

global.HTMLElement = typeof window === 'undefined' ? Object : window.HTMLElement
export default {
    // ...
}

方法二

import Vue from 'vue'
 
export default () => {
  if (process.browser) {
    //console.log('浏览器端渲染');
    Vue.use(require('element-ui'),require('element-ui/lib/locale/lang/en'))
  } else {
    //console.log("非浏览器端渲染");
  }
}

方法三

plugins: [
    // '@/plugins/element-ui',
    { src: '@/plugins/element-ui', ssr: false}
  ],

此时再运行项目，发现页面正常打开

三、import方法导入

    打开server文件下的index.js文件，发现引用第三方库，都是用的reuire方法

const Koa = require('koa')
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')

现在我们将上面的代码转换成用es6的import语法，将第三库引用进来

import Koa from 'koa'
const consola = require('consola')
const { Nuxt, Builder } = require('nuxt')

结果 TIM截图20190516135626.jpg

发现他并不支持import语法，那么如何解决这个问题呢
（1）打开package.json文件

将下面的代码 TIM截图20190516135902.jpg
变成

"scripts": {
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server --exec babel-node",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js --exec babel-node",
    "generate": "nuxt generate"
  },

（2）在根目录下闯将一个.babelrc文件，如下图

TIM截图20190516140243.jpg

打开该文件，输入以下内容

{
  "presets": ["es2015"]
}

（3）在终端中输入npm install babel-preset-es2015安装这个组件，最后重新启动程序，发现程序正常显示了，项目也支持import的es6的语法了。
    前期工作到这儿就结束了，我们也创建一个完整的项目了，在此记录一下。