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 预设插件。

results matching ""

    No results matching ""