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. java中是如何解决编码问题的,比如char类型的对象是如何存储的呢?

    主题句:每个编码形式将字符从字符集转换为编码数据. 说白了一个代码点就是一个Unicode字符.代码单元就是代码点的集合. 字符视图 要了解字符集标准,您必须能区分三种不同的字符视图: 字符集(字符的 ...

  2. poj3420 Quad Tiling

    传送门 题目大意 问讲一个大小为4*n的棋盘用无数1*2的骨牌不重叠覆盖有多少种方案. 分析 我们考虑可以将长为n的棋盘分为两块,一个大小为n-i,另一个大小为i,而为了避免对于不同的i构造出相同的情 ...

  3. 树莓派研究笔记(3)-- 安装VNC

    小屏幕太小了,眼睛快看瞎了,必须安装VNC 才行啊. 更新—2018-02-04 最新版本的系统中自带了VNC了,只需要在 菜单 Preferences -> Raspberry Pi Conf ...

  4. dfs和bfs算法

    1. 存储图的方式一般是有两种的:邻接表和邻接矩阵,一般存储链接矩阵的方式是比较简单的,也便于我们去实现这个临接矩阵,他也就是通俗的二维数组,我们平常用到的那种. 2. 这里我们主要记录和讲一下bfs ...

  5. 《Effective Java》第9章 异常

    第58条:对可恢复的情况使用受检异常,对编程错误使用运行时异常 Java程序设计语言提供了三种可抛出结构(throwable) ;受检的异常(checked exception)运行时异常(run-t ...

  6. ubuntu基础知识与技巧

    root用户与超级用户的切换 (1)  sudo -i (2)  sudo su (3)  su root 安装升级 查看软件xxx安装内容 dpkg -L xxx 查找软件库中的软件 apt-cac ...

  7. java代理模式实例讲解

    下面这个是设计模式课上的例子: import java.lang.reflect.InvocationHandler; import java.lang.reflect.Method; import ...

  8. iTween插件使用

    itween插件 itween是一个动画库,作者创建它的目的就是最小的投入实现最大的产出.用它可以轻松实现各种动画,晃动,旋转,移动.褪色.上色.控制音频等. iTween原理: itween的核心是 ...

  9. 图像特征提取之Haar特征

    1.Haar-like特征 Haar-like特征最早是由Papageorgiou等应用于人脸表示,Viola和Jones在此基础上,使用3种类型4种形式的特征. Haar特征分为三类:边缘特征.线性 ...

  10. sort排序bug乱序

    项目需要对组件的zIndex值进行降序排列,刚开始采用的是sort进行排序,排完之后感觉没问题,毕竟也是经常用的,可是昨天无意中把zIndex值打出来看,一看不知道,发现只要排序的组件超过10个就出问 ...