[[官方文檔]](https://vuejs.org/v2/guide/single-file-components.html) In many Vue projects, global components will be defined using`Vue.component`, followed by`new Vue({ el: '#container' })`to target a container element in the body of every page. 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: * **Global definitions**force unique names for every component * **String templates**lack syntax highlighting and require ugly slashes for multiline HTML * **No CSS support**means that while HTML and JavaScript are modularized into components, CSS is conspicuously left out * **No build step**restricts us to HTML and ES5 JavaScript, rather than preprocessors like Pug (formerly Jade) and Babel All of these are solved by **single-file components** with a `.vue` extension, made possible with build tools such as `Webpack` or `Browserify`. And we get * [Complete syntax highlighting](https://github.com/vuejs/awesome-vue#source-code-editing) * [CommonJS modules](https://webpack.js.org/concepts/modules/#what-is-a-webpack-module) * [Component-scoped CSS](https://vue-loader.vuejs.org/en/features/scoped-css.html) As promised, we can also use preprocessors such as `Pug`, `Babel` (with ES2015 modules), and `Stylus` for cleaner and more feature-rich components. You could as easily use `Bublé, 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. 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: * **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. * **Modern JavaScript with ES2015/16**: Read through Babel’s [Learn ES2015 guide](https://babeljs.io/docs/learn-es2015/). You don’t have to memorize every feature right now, but keep this page as a reference you can come back to. After you’ve taken a day to dive into these resources, we recommend checking out [Vue CLI 3](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!