FE

Vue 学习笔记（二十）：单文件组件

单文件组件
Single File Components

介绍

使用 Vue.component 来定义全局组件，用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素的方式，在更复杂项目，或者前端完全由 JavaScript 驱动时，有明显缺点：

  • 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
  • 字符串模板 (String templates) 缺乏语法高亮，HTML 多行的丑陋的 \
  • 不支持 CSS (No CSS support) 当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
  • 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

所以，有了文件扩展名为 .vue 的 single-file components (单文件组件)，还可以使用 webpack 或 Browserify 等构建工具。

Hello.vue 项目：

https://codesandbox.io/s/github/vuejs/vuejs.org/tree/master/src/v2/examples/vue-20-single-file-components

附录完整代码：
Hello.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function() {
    return {
      greeting: "Hello"
    };
  }
};
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

index.html

1
<div id="app"></div>

index.js

1
2
3
4
5
6
7
8
9
10
import Vue from "vue";
import App from "./Hello";

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  template: "<App/>",
  components: { App }
});

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "vue-20-single-file-components",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.11"
  },
  "devDependencies": {},
  "browserslist": ["> 1%", "last 2 versions", "not ie <= 8"],
  "keywords": [],
  "description": "Hello.vue single-file components example using a .vue extension."
}

优点：

可以使用预处理器来构建简洁和功能更丰富的组件，比如 Pug，Babel (with ES2015 modules)，和 Stylus。

https://gist.github.com/chrisvfritz/1c9f2daea9bc078dcb47e9a82e5f7587

可以使用 Babel，TypeScript，SCSS，PostCSS - 或者其他任何预处理器。如果搭配 vue-loader 使用 webpack，它也能为 CSS Modules 提供头等支持。

怎么看待关注点分离？

What About Separation of Concerns?

关注点分离不等于文件类型分离。相比于把代码库分离成三个大的层次并将其相互交织起来，把它们划分为松散耦合的组件再将其组合起来更合理一些。在一个组件里，其模板、逻辑和样式是内部耦合的，并且把他们搭配在一起实际上使得组件更加内聚且更可维护。

根据喜好，仍然可以把 JavaScript、CSS 分离成独立的文件然后做到热重载和预编译。

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>

起步 Getting Started

例子沙箱 Example Sandbox

单文件组件深入了解示例，CodeSandbox 简单的 todo 应用。

针对刚接触 JavaScript 模块开发系统的用户

For Users New to Module Build Systems in JavaScript

有了 .vue 组件，我们就进入了高级 JavaScript 应用领域。如果你没有准备好的话，意味着还需要学会使用一些附加的工具：

  • Node Package Manager (NPM)：阅读 Getting Started guide 中关于如何从注册地 (registry) 获取包的章节。

  • Modern JavaScript with ES2015/16：阅读 Babel 的 Learn ES2015 guide。不需要立刻记住每一个方法，但是可以保留这个页面以便后期参考。

在你花一天时间了解这些资源之后，我们建议你参考 Vue CLI 3。只要遵循指示，你就能很快地运行一个带有 .vue 组件、ES2015、webpack 和热重载 (hot-reloading) 的 Vue 项目！

针对高级用户

For Advanced Users

CLI 会为你搞定大多数工具的配置问题，同时也支持细粒度自定义配置项。

如果从零搭建构建工具，需要通过 Vue Loader 手动配置 webpack。参考webpack官方文档和 Webpack Academy。