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. javascript字符串 转 驼峰字符

    字符串  转  驼峰字符 <script type="text/javascript"> var str = 'peng-hui-datou'; function a( ...

  2. Inheritance with EF Code First: Part 1 – Table per Hierarchy (TPH)

    以下三篇文章是Entity Framework Code-First系列中第七回:Entity Framework Code-First(7):Inheritance Strategy 提到的三篇.这 ...

  3. 发现C#winform编程中不常用的控件(一)<FlowLayoutPanel控件><拆分器控件Splitcontainer >

    第一部分:FlowLayoutPanel控件 实现效果: 将FlowLayoutPanel做为导航菜单按钮的容器 以实现 某个菜单按钮不显示时 整体的导航菜单布局不至于"缺憾" 原 ...

  4. [转]JQ中$(window).load和$(document).ready区别与执行顺序

    一.$(window).load().window.onload=function(){}和$(document).ready()方法的区别 1.$(window).load() 和window.on ...

  5. 《Linux内核设计与实现》读书笔记(四)- 进程的调度

    主要内容: 什么是调度 调度实现原理 Linux上调度实现的方法 调度相关的系统调用 1. 什么是调度 现在的操作系统都是多任务的,为了能让更多的任务能同时在系统上更好的运行,需要一个管理程序来管理计 ...

  6. IIS如何避免子web应用程序中继承根目录web.config配置

    1.一种方式,需要改动根目录的web.config(不是很推荐) <?xml version="1.0"?> <configuration> <loc ...

  7. Android按钮单击事件处理的几种方法(Android学习笔记)

    方法一:匿名内部类实现按钮事件处理 this.btnButton=(Button)super.findViewById(R.id.mybtn); this.btnButton.setOnClickLi ...

  8. python---信用卡ATM

    一  需求 模拟实现一个ATM + 购物商城程序 额度 15000或自定义 实现购物商城,买东西加入 购物车,调用信用卡接口结账 可以提现,手续费5% 每月22号出账单,每月10号为还款日,过期未还, ...

  9. ThinkPHP3.2.3完整版创建前后台入口文件 http://jingyan.baidu.com/article/7e4409533fc1092fc1e2ef53.html

    ThinkPHP3.2.3完整版创建前后台入口文件   1 2 3 4 5 6 7 分步阅读 ThinkPHP是为了简化企业级应用开发和敏捷WEB应用开发而诞生的优秀的国产php框架,值得我们去探索学 ...

  10. bzoj3328: PYXFIB(单位根反演+矩阵快速幂)

    题面 传送门 题解 我们设\(A=\begin{bmatrix}1 & 1 \\ 1 & 0\end{bmatrix}\),那么\(A^n\)的左上角就是\(F\)的第\(n\)项 所 ...