|
| 1 | +# Single File Components |
| 2 | + |
| 3 | +## Introduction |
| 4 | + |
| 5 | +In many Vue projects, global components will be defined using `app.component()`, followed by `app.mount('#app')` to target a container element in the body of every page. |
| 6 | + |
| 7 | +This can work very well for small to medium-sized projects, where JavaScript is only used to enhance certain views. In more complex projects however, or when your frontend is entirely driven by JavaScript, these disadvantages become apparent: |
| 8 | + |
| 9 | +- **Global definitions** force unique names for every component |
| 10 | +- **String templates** lack syntax highlighting and require ugly slashes for multiline HTML |
| 11 | +- **No CSS support** means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out |
| 12 | +- **No build step** restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel |
| 13 | + |
| 14 | +All of these are solved by **single-file components** with a `.vue` extension, made possible with build tools such as Webpack or Browserify. |
| 15 | + |
| 16 | +Here's an example of a file we'll call `Hello.vue`: |
| 17 | + |
| 18 | +<a href="https://codepen.io/team/Vue/pen/3de13b5cd0133df4ecf307b6cf2c5f94" target="_blank" rel="noopener noreferrer"><img src="/images/sfc.png" width="403" alt="Single-file component example (click for code as text)" style="display: block; margin: 15px auto; max-width: 100%"></a> |
| 19 | + |
| 20 | +Now we get: |
| 21 | + |
| 22 | +- [Complete syntax highlighting](https://github.com/vuejs/awesome-vue#source-code-editing) |
| 23 | +- [CommonJS modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module) |
| 24 | +- [Component-scoped CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html) |
| 25 | + |
| 26 | +As promised, we can also use preprocessors such as Pug, Babel (with ES2015 modules), and Stylus for cleaner and more feature-rich components. |
| 27 | + |
| 28 | +<a href="https://codesandbox.io/s/vue-single-file-component-with-pre-processors-mr3ik?file=/src/App.vue" target="_blank" rel="noopener noreferrer"><img src="/images/sfc-with-preprocessors.png" width="563" alt="Single-file component with pre-processors example (click for code as text)" style="display: block; margin: 15px auto; max-width: 100%"></a> |
| 29 | + |
| 30 | +These specific languages are only examples. You could as easily use TypeScript, SCSS, PostCSS, or whatever other preprocessors that help you be productive. If using Webpack with `vue-loader`, it also has first-class support for CSS Modules. |
| 31 | + |
| 32 | +### What About Separation of Concerns? |
| 33 | + |
| 34 | +One important thing to note is that **separation of concerns is not equal to separation of file types.** In modern UI development, we have found that instead of dividing the codebase into three huge layers that interweave with one another, it makes much more sense to divide them into loosely-coupled components and compose them. Inside a component, its template, logic and styles are inherently coupled, and collocating them actually makes the component more cohesive and maintainable. |
| 35 | + |
| 36 | +Even if you don't like the idea of Single-File Components, you can still leverage its hot-reloading and pre-compilation features by separating your JavaScript and CSS into separate files: |
| 37 | + |
| 38 | +``` html |
| 39 | +<!-- my-component.vue --> |
| 40 | +<template> |
| 41 | + <div>This will be pre-compiled</div> |
| 42 | +</template> |
| 43 | +<script src="./my-component.js"></script> |
| 44 | +<style src="./my-component.css"></style> |
| 45 | +``` |
| 46 | + |
| 47 | +## Getting Started |
| 48 | + |
| 49 | +### Example Sandbox |
| 50 | + |
| 51 | +If you want to dive right in and start playing with single-file components, check out [this simple todo app](https://codesandbox.io/s/vue-todo-list-app-with-single-file-component-vzkl3?file=/src/App.vue) on CodeSandbox. |
| 52 | + |
| 53 | +### For Users New to Module Build Systems in JavaScript |
| 54 | + |
| 55 | +With `.vue` components, we're entering the realm of advanced JavaScript applications. That means learning to use a few additional tools if you haven't already: |
| 56 | + |
| 57 | +- **Node Package Manager (NPM)**: Read the [Getting Started guide](https://docs.npmjs.com/packages-and-modules/getting-packages-from-the-registry) section about how to get packages from the registry. |
| 58 | + |
| 59 | +- **Modern JavaScript with ES2015/16**: Read through Babel's [Learn ES2015 guide](https://babeljs.io/docs/en/learn). You don't have to memorize every feature right now, but keep this page as a reference you can come back to. |
| 60 | + |
| 61 | +After you've taken a day to dive into these resources, we recommend checking out [Vue CLI](https://cli.vuejs.org/). Follow the instructions and you should have a Vue project with `.vue` components, ES2015, webpack and hot-reloading in no time! |
| 62 | + |
| 63 | +### For Advanced Users |
| 64 | + |
| 65 | +The CLI takes care of most of the tooling configurations for you, but also allows fine-grained customization through its own [config options](https://cli.vuejs.org/config/). |
| 66 | + |
| 67 | +In case you prefer setting up your own build setup from scratch, you will need to manually configure webpack with [vue-loader](https://vue-loader.vuejs.org). To learn more about webpack itself, check out [their official docs](https://webpack.js.org/configuration/) and [webpack learning academy](https://webpack.academy/p/the-core-concepts). |
0 commit comments