ES2015
当 vue-loader
检测到 babel-loader
或者 buble-loader
在项目中存在的时候,将会用它们去处理所有 *.vue
文件的 <script>
部分,所以我们就可以在 Vue 组件中用 ES2015 。 如果你还不熟悉这个新语言的话,最好去学一下:
这里是一个引用其他 Vue 组件的典型模式,
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
}
}
</script>
在这里用的就是 ES2015 精简的语法定义个子组件。{ ComponentA }
是指 { ComponentA: ComponentA }
。Vue会被自动转为 component-a
, 所以你就能在模板中引入组件 <component-a>
。
转译正常的 .js
文件
由于 vue-loader
只能处理 *.vue
文件,你需要在配置文件中告诉 Webpack 用 babel-loader
或者 buble-loader
。这点,可以用项目脚手架工具 vue-cli
。
用 .babelrc
文件来配置 Babel
.babelrc
可以控制 babel-loader
,并推荐这种方式来配置 Babel 预设插件。