1. 在package.json中修改运行脚本

添加--exec babel-node

添加之后的效果为:(修改了8/10行)

{
"name": "nuxt-learn",
"version": "1.0.0",
"description": "My lovely Nuxt.js project",
"author": "wqzhai",
"private": true,
"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"
},
"dependencies": {
"@nuxtjs/axios": "^5.0.0",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.3",
"babel-preset-es2015": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^5.2.0",
"element-ui": "^2.4.6",
"koa": "^2.5.2",
"nuxt": "^2.0.0"
},
"devDependencies": {
"nodemon": "^1.11.0"
}
}

2.安装编译工具

npm i babel-cli   // 这是babel解释器的客户端主程序
npm i babel-core // babel的核心文件,好像默认会自动安装
npm i babel-preset-es2015 // 把代码转换成ES6
npm i babel-preset-stage-0 // 把代码转换成ES7

附上 babel配置-各阶段的stage的区别

3.在根路径创建.babelrc文件,写入配置

.babelrc

{
"presets": ["es2015","stage-0"]
}

4.重新启动项目即可

Nuxt 2.3.X 配置babel的更多相关文章

  1. 配置babel

    配置babel ECMAScript的版本,每年都会定期举行会议,发布各种标准,当前版本到了2019,但大部分人使用的浏览器,都可以支持es2015,也就是es6,要等到大部分浏览器都支持到最新版本, ...

  2. 【02】webstorm配置babel转换器+截图(by魔芋)

    [02]webstorm配置babel转换器+截图(by魔芋)   [02]魔芋的安装过程     01,配置babel.   02,用webstorm.注意webstorm的版本号.   03,使用 ...

  3. webpack.config.js====配置babel

    参考:https://www.jianshu.com/p/9808f550c6a91. 安装依赖babel-loader: 负责 es6 语法转化babel-preset-env: 包含 es6.7 ...

  4. [转] webpack中配置Babel

    一.安装 npm install --save-dev babel-loader babel-core babel-preset-env 二.在webpack.config.js中配置module 1 ...

  5. babel-plugin-import配置babel按需引入antd模块,编译后报错.bezierEasingMixin()

    用create-react-app做项目的时候,同时引入了antd,为了实现按需加载antd模块,用到他们提供的  babel-plugin-import  ( 一个用于按需加载组件代码和样式的 ba ...

  6. webpack中配置Babel

    Babel是一个javascript编译器,可以将ES6和更新的js语法转换成ES5的,使代码在较老的浏览器里也能正常运行. 一.安装 npm install --save-dev babel-loa ...

  7. webstorm配置babel自动转译es6的方法

    1.npm安装babel npm install -g babel-cli 2.npm安装Babel的preset npm install --save-dev babel-preset-es2015 ...

  8. nuxt.config有关router配置

    这里只说明一个属性,其他属性移步官方文档 https://zh.nuxtjs.org/api/configuration-router extendRoutes   官方说明: 你可以通过 exten ...

  9. 基于webpack实现多html页面开发框架五 开发环境配置 babel配置

    一.解决什么问题      1.开发环境js.css不压缩,可在浏览器选中代码调试      2.开发环境运行http服务指向打包后的文件夹      3.babel输出浏览器兼容的js代码 二.需要 ...

随机推荐

  1. DR客户端一直连接服务器....(6)

    DR客户端一直连接服务器....(非未选择网卡)解决方法: 控制面板-->网络和 Internet-->网络连接,打开本地连接(以太网)属性,将IPV4协议前面的对勾去掉,重启DR 这样D ...

  2. ZROI2018提高day4t3

    传送门 分析 我们假设如果一个点是0则它的值为-1,如果一个点是1则值为1,则一个区间的答案便是max(pre[i]+sur[i]),这里的pre[i]表示此区间i点和它之前的的前缀的最大值,sur[ ...

  3. 几种jar转exe方法的比较

    原摘自:https://blog.csdn.net/uikoo9/article/details/7458666 几种jar转exe方法的比较 2012年04月13日 17:33:07 阅读数:153 ...

  4. 数据结构_sfdg(小F打怪)

    问题描述 小 F 很爱打怪, 今天因为系统 bug, 他提前得知了 n 只怪的出现顺序以及击倒每只怪得到的成就值 ai. 设第一只怪出现的时间为第 1 秒,这个游戏每过 1 秒钟出现一只新怪且没被击倒 ...

  5. Ubuntu16.04版安装VMwareTools的步骤和没法挂载目录问题的解决

    vmtool安装流程 1.点击vmware 里面的虚拟机——>安装vmware tool 2.然后(等待一会)弹出一个界面把里面的 VMwareTools-9.6.1-1378637.tar.g ...

  6. Netty学习大纲

    1.BIO.NIO和AIO2.Netty 的各大组件3.Netty的线程模型4.TCP 粘包/拆包的原因及解决方法5.了解哪几种序列化协议?包括使用场景和如何去选择6.Netty的零拷贝实现7.Net ...

  7. java 英文笔记

    JDBC涉及到的单词 Driver 驱动器 DriverManager (Manager 处理者,经理,管理人; 干事,理事; 〈美〉(政党等的)领袖; 策士,干才,干练的人;) create Sta ...

  8. 【ionic App问题总结系列】ionic 如何更新app版本

    ionic 如何进行自动更新 ionic App更新有两种方式:第一种是普通的从远程下载apk,安装并覆盖旧版本.另外一种就是采用替换www文件夹的内容,实现应用内更新,而无需下载安装apk. 这篇文 ...

  9. JetBrains WebStorm 如何从GitHub上克隆的代码

    工作中经常会遇到要从GitHub上拉代码,详细操作记录如下: 绑定账号 1.File->Settings->Version Control->Github 成功后会出现下面的这个账户 ...

  10. UWP&WP8.1 附加属性 和WebView的NavigateToString方法XAML绑定方法

    附加属性,即为添加一个没有的属性的. 使用方法和依赖属性相似,个人理解就是特殊形式的依赖属性. 经常的用处,以一个简单的来说,比如一个控件的某一个属性我们想在XAML中给其绑定数据.但是我们在XAML ...