一、前言
最近在慕课网上学习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的语法了。
前期工作到这儿就结束了，我们也创建一个完整的项目了，在此记录一下。
