简介
babel-preset-vue-app 是一个针对 Vue.js 应用的 Babel 预设，它可将 JavaScript 代码转换为 ES6+ 语法，以及将 JSX 语法转换为普通的 JavaScript 代码。babel-preset-vue-app 是一个开放源代码软件，它可以方便地安装和使用。
安装
你可以使用 npm 包管理器安装 babel-preset-vue-app：
npm install babel-preset-vue-app --save-dev
配置
安装完毕后，在项目的 .babelrc 配置文件中配置 babel-preset-vue-app：
{
"presets": ["vue-app"]
}你还可以覆盖默认选项，比如修改转换的目标浏览器等：
-- -------------------- ---- -------
-
---------- -
-
----------
-
---------- -
----- ----
-
-
-
-
-使用场景
当你使用 Vue.js 时，你会发现 Vue 代码通常使用了 ES6+ 语法以及 JSX 语法，而不同的浏览器不一定支持这些语法。此时，你可以使用 babel-preset-vue-app 将这些代码转换为普通的 JavaScript 代码，以方便在不同浏览器上执行。
下面是使用 babel-preset-vue-app 的一个简单示例：
import Vue from 'vue'
import App from './App.vue'
new Vue({
render: h => h(App)
}).$mount('#app')在使用 babel-preset-vue-app 转换后，该代码将变为：
-- -------------------- ---- -------
---- --------
--- ---- - ---------------------------------------
--- ---- - ---------------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -
--- -----------------
------- -------- --------- -
------ -------------------
-
------------------结语
babel-preset-vue-app 是一个非常实用的提高前端代码兼容性的工具，它可以保证你的代码在各种浏览器上可靠运行。以上就是使用 babel-preset-vue-app 的详细教程，希望对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/63951