非单文件组件

可以理解为是通过 html 文件来使用 Vue。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8" />
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.         <title>Document</title>
  8.     </head>
  9.     <body>
  10.         <div id="app"></div>
  12.         <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  13.         <script>
  14.             var app = new Vue({
  15.                 el: '#app',
  16.                 data: {
  17.                     message: 'Hello Vue!'
  18.                 },
  19.                 template: '<div id="app">{{ message }}</div>'
  20.             })
  21.         </script>
  22.     </body>
  23. </html>

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显。

非单文件组件缺点

  • 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
  • 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
  • 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
  • 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Sass 和 Babel

单文件组件

文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

  1. <template>
  2.     <div class="container">
  3.         {{ message }}
  4.     </div>
  5. </template>
  7. <script>
  8. import OtherComponent from './OtherComponent.vue'
  10. export default {
  11.     name: 'App',
  12.     data() {
  13.         return {
  14.             message: 'Hello Vue!'
  15.         }
  16.     }
  17. }
  18. </script>
  20. <style lang="scss" scoped>
  21. .container {
  22.     font-size: 18px;
  23. }
  24. </style>

这些特定的语言只是例子，你可以只是简单地使用 Babel、TypeScript、SCSS、PostCSS 或者其他任何能够帮助你提高生产力的预处理器。
单文件组件一般可以通过 Vue CLI 脚手架快速搭建一个项目，并且已经帮你配置好了 Babel、Webpack 热更新等功能。