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 中的命名不得重复
1. 字符串模板出现的问题
  -  主要就是高亮问题了
1. CSS 支持
1. 构建步骤的问题, 比如 Babel 无法使用
1. 没法使用 ES2015/2016

这个东西的优势为:

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