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的语法了。
    前期工作到这儿就结束了,我们也创建一个完整的项目了,在此记录一下。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,688评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,559评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,749评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,581评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,741评论 3 271
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,684评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,122评论 2 292
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,847评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,441评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,939评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,333评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,783评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,275评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,830评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,444评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,553评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,618评论 2 249

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,119评论 0 1
  • 姓名:张济麟 组别 :感谢一组 公司 : 暂无 【日精进打卡第9天】 【知~学习】 《六项精进》背通1遍,共10遍...
    暗夜_4e17阅读 132评论 0 0
  • https://lanjingling.github.io/2016/03/14/nginx-access-log...
    WY_250e阅读 301评论 0 0
  • 有这样一个人,让你满心欢喜,看见便内心惊喜连连;有这样一个人,你设置了他的特别关注,每天翻看他的朋友圈与空间数次,...
    眉心没有美人痣阅读 546评论 4 7