在开发 Vue.js 应用程序时，我们通常使用 vue-template-compiler 来将 Vue.js 单文件组件(.vue)编译为 Javascript 渲染函数。然而，vue-template-compiler 只支持 ES5，而不支持 ES6 或更高版本的 JavaScript 语法。这时候，就需要用到 vue-template-es2015-compiler 这个 npm 包，它可以使我们的 Vue.js 单文件组件支持更高版本的 JavaScript 语法。
安装
使用 npm 命令进行安装：
npm install vue-template-es2015-compiler --save-dev
使用
在 webpack 配置文件中，通过 Vue-loader 中的 compiler 选项，将 vue-template-es2015-compiler 作为编译器使用：
-- -------------------- ---- -------
----- ---------------- - -
--------- ---------------------------------------
-
-------------- - -
-- ---
------- -
------ -
-
----- ---------
------- -------------
-------- ----------------
-
-
-
-- ---
-这样，就可以使用 ES6 或更高版本的 JavaScript 语法编写 Vue.js 单文件组件了。
示例代码
在 Vue.js 单文件组件(.vue)中，可以使用 <script> 标签来写 JavaScript 代码。假设我们要使用 ES6 的箭头函数来定义一个计算属性，代码如下：
-- -------------------- ---- -------
----------
-----
-- ------- --
------
-----------
--------
------ ------- -
---- -- -
------ -
----- --------
-
--
--------- -
-------- -- -- ------ --------------
-
-
---------如果使用 vue-template-compiler 编译这个组件，会得到以下错误：
TypeError: Cannot read property 'name' of undefined
这是因为箭头函数的 this 指向的是定义它时的作用域，而不是运行时的作用域。因此，在运行时，this.name 是 undefined。
而如果使用 vue-template-es2015-compiler，就可以正确地定义计算属性：
computed: {
message () {
return `Hello ${this.name}!`
}
}这样，就可以正常使用 ES6 的语法来编写 Vue.js 单文件组件了。
结论
通过使用 vue-template-es2015-compiler，我们可以使用更高版本的 JavaScript 语法来编写 Vue.js 应用程序，从而提高开发效率和编码质量。同时，在学习 ES6 语法时，也可以通过这个 npm 包来练习和熟悉 ES6 的各种语法特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/164561