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

所以,有了文件扩展名为 .vuesingle-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