什么是单文件组件？

单文件组件形式

非单文件组件

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

DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Documenttitle>
    head>
    <body>
        <div id="app">div>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Hello Vue!'
                },
                template: '{{ message }}
'
            })
        script>
    body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

这种方式在很多中小规模的项目中运作的很好，在这些项目里 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 等构建工具。

这些特定的语言只是例子，你可以只是简单地使用 Babel、TypeScript、SCSS、PostCSS 或者其他任何能够帮助你提高生产力的预处理器。

单文件组件一般可以通过 Vue CLI 脚手架快速搭建一个项目，并且已经帮你配置好了 Babel、Webpack 热更新等功能。

后续所有和 Vue 相关的文章都会以单文件组件的形式来举例。

原文链接：菜园前端

相关阅读:
java——Junit单元测试
【Oracle】数据库账号频繁被锁问题解决
安装JAVA 依赖环境 Maven 教程
什么是SLA、SLO和SLI
面试题1（京东）之HiveSql --- 难度：入门初级
分省/市政府性债务数据&财政收支数据&财政透明度
Git 的基础命令码云 gitee
TCP为什么需要三次握手和四次挥手？
JavaScript中的DOM
音视频 ffmpeg命令提取音视频数据

原文地址：https://blog.csdn.net/qq2603375880/article/details/132623165