single file component

Table of Contents

• Introduction

  • What do you think about separation of concerns?

• Getting Started

  • Example Sandbox

  • For users who are new to the JavaScript module development system

  • For advanced users

Introduction

---

In In many Vue projects, we use Vue.component to define global components, and then use new Vue({ el: '#container '}) to specify a container in each page element.

This approach works well in many small and medium-sized projects, where JavaScript is only used to enhance specific views. But in more complex projects, or when your front-end is completely driven by JavaScript, the following shortcomings will become very obvious:

• Global definitions It is mandatory that the names in each component must not be repeated

• String templates Lack of syntax highlighting when the HTML has multiple lines , need to use ugly \

• ##No CSS support (No CSS support) means that when HTML and JavaScript are componentized, CSS Obvious omission

• No build step Restricted to HTML and ES5 JavaScript, not preprocessors such as Pug (formerly Jade ) and Babel

single-file components (single-file components) with file extension .vue provide solutions to all the above problems method, and can also use build tools such as webpack or Browserify.

This is a simple example with a file named

Hello.vue:

Now we get:

• Full syntax highlighting

• CommonJS module

• Component-scoped CSS

As we said, we can use preprocessors to build concise and more feature-rich components, such as Pug, Babel (with ES2015 modules), and Stylus.

These specific languages ​​are just examples, you could simply use Babel, TypeScript, SCSS, PostCSS - or any other preprocessor that helps you be more productive. If you use webpack with vue-loader, it also provides first-class support for CSS Modules.

How do you think about separation of concerns?

An important thing to note is that separation of concerns does not equal file type separation. In modern UI development, we have found that rather than separating the code base into three large layers and interweaving them, it makes more sense to divide them into loosely coupled components and then combine them. Within a component, its templates, logic, and styles are internally coupled, and pairing them together actually makes the component more cohesive and maintainable.

Even if you don’t like single-file components, you can still separate JavaScript and CSS into independent files and then hot-reload and precompile them.

<!-- my-component.vue -->
<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

Start

---

##Example Sandbox

If you want to learn more and start using single file components, please come to CodeSandbox

Check out this simple todo application.

For users who are new to the JavaScript module development system

With

.vue component, we enter the field of advanced JavaScript applications. If you are not prepared, this means you need to learn to use some additional tools:

• Node Package Manager (NPM): Read the Getting Started guide Until 10: Uninstalling global packages chapter.

• Modern JavaScript with ES2015/16: Read Babel’s Learn ES2015 guide. You don't need to memorize every method right away, but you can keep this page for reference later.

After you spend a day learning about these resources, we recommend that you refer to

Vue CLI 3. Just follow the instructions and you'll be running a Vue project with .vue components, ES2015, webpack and hot-reloading in no time!

For advanced users

CLI will handle the configuration of most tools for you, and also supports fine-grained customizationConfiguration items.

Sometimes you want to build your own build tool from scratch, in which case you need to manually configure webpack through Vue Loader. To learn more about webpack, please check out its Official Documentation and Webpack Academy.