Single File Components
文章目录

VueJS: Single File Components

这个其实就是 .vue 文件的使用方法

首先需要注意的是,如果没有这个单文件模块也可以用:

1
2
3
4
5
6
<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

这个东西是用来解决这些问题:

  1. 全局定义引发的问题
    • 强制要求每个 component 中的命名不得重复
  2. 字符串模板出现的问题
    • 主要就是高亮问题了
  3. CSS 支持
  4. 构建步骤的问题, 比如 Babel 无法使用
  5. 没法使用 ES2015/2016

这个东西的优势为:

  • 完整语法高亮
  • CommonJS 模块
  • 组件作用域的 CSS
    • 这个的优势非常大