单文件组件
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
项目:
附录完整代码:Hello.vue
1 | <template> |
index.html
1 | <div id="app"></div> |
index.js
1 | import Vue from "vue"; |
package.json
1 | { |
优点:
可以使用预处理器来构建简洁和功能更丰富的组件,比如 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 | <!-- my-component.vue --> |
起步 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。