CSS 预处理器是一种将预先定义的语法和功能添加到 CSS 中的工具。它们允许开发人员使用变量、嵌套规则、混合、继承等功能，以更高效和可维护的方式编写样式表。

CSS 预处理器的作用包括：

变量和计算：预处理器允许开发人员使用变量来存储颜色、字体、尺寸等值，以便在整个样式表中进行统一的修改。预处理器还支持数学计算，可以进行简单的加减乘除操作，提高了样式表的灵活性和可维护性。

嵌套规则：预处理器允许开发人员在样式表中使用嵌套规则，以更清晰地表示元素之间的层次关系。这减少了选择器的重复书写，并提高了代码的可读性。

混合和继承：预处理器支持混合（Mixins）功能，开发人员可以将一组样式属性定义为一个混合器，并在需要的地方进行调用。这样可以减少样式表中的重复代码，提高了代码的复用性。预处理器还支持继承（Extend）功能，可以将一个选择器的样式继承到另一个选择器中，减少了重复的样式定义。

导入和模块化：预处理器允许开发人员将多个样式文件导入到一个文件中，以更好地组织和管理样式表。这样可以将样式表分成多个模块，方便团队协作和代码的复用。

扩展语法和功能：CSS 预处理器通常提供了一些扩展的语法和功能，如条件语句、循环、函数等，以增强 CSS 的能力。这些功能可以帮助开发人员更高效地编写样式表。

总的来说，CSS 预处理器提供了一些有助于开发人员更高效、更可维护地编写样式表的功能和语法。它们可以提高样式表的灵活性、可读性和可维护性，减少了重复代码的书写，并提供了一些额外的功能来增强 CSS 的能力。

二、常见的预处理器

Less：Less 是一种动态样式语言，它扩展了 CSS 的功能，提供了变量、嵌套、混合、运算等功能。Less 使用类似于 CSS 的语法，但具有更简洁的书写方式。它可以通过 Less 编译器将 Less 文件编译为普通的 CSS 文件。Less 具有较小的学习曲线，易于上手。

Sass：Sass 是一种成熟且广泛使用的 CSS 预处理器，它提供了许多强大的功能，如变量、嵌套规则、混合、继承等。Sass 有两种语法：Sass（使用缩进）和 SCSS（使用类似于 CSS 的语法）。Sass 可以通过命令行工具或构建工具编译为普通的 CSS 文件。Sass 具有强大的功能和灵活性，适用于大型项目。

SCSS：SCSS 是 Sass 的一种语法格式，它使用类似于 CSS 的语法，但具有 Sass 的功能和特性。SCSS 可以看作是 Sass 的一种扩展，使用大括号和分号来表示代码块和语句。SCSS 与 Sass 兼容，可以在同一个项目中同时使用 Sass 和 SCSS 文件。

Stylus：Stylus 是一种简洁、灵活的 CSS 预处理器，它使用类似于 Python 的缩进语法。Stylus 提供了类似于 Sass 和 Less 的功能，如变量、嵌套规则、混合、继承等。Stylus 也可以通过命令行工具或构建工具编译为普通的 CSS 文件。Stylus 的语法非常简洁，可以减少样式表的代码量。

这些 CSS 预处理器都有庞大的社区支持和活跃的开发者社区，提供了丰富的文档、示例和插件。您可以根据个人偏好和项目需求选择适合您的 CSS 预处理器。

三、预处理器和css的对比

CSS 预处理器（如 Less、Sass、SCSS 和 Stylus）相对于原始的 CSS 语言具有一些优点和缺点。

优点：

变量和计算：预处理器可以使用变量来存储颜色、字体、尺寸等值，方便在整个样式表中进行统一的修改。预处理器还支持数学计算，可以进行简单的加减乘除操作，提高了样式表的灵活性和可维护性。

嵌套规则：预处理器允许嵌套 CSS 规则，可以更清晰地表示元素之间的层次关系，减少了选择器的重复书写，并提高了代码的可读性。

混合和继承：预处理器支持混合（Mixins）功能，可以将一组样式属性定义为一个混合器，并在需要的地方进行调用。这样可以减少样式表中的重复代码，提高了代码的复用性。预处理器还支持继承（Extend）功能，可以将一个选择器的样式继承到另一个选择器中，减少了重复的样式定义。

导入和模块化：预处理器支持将多个样式文件导入到一个文件中，可以更好地组织和管理样式表。这样可以将样式表分成多个模块，方便团队协作和代码的复用。

缺点：

学习曲线：使用预处理器需要学习其特有的语法和功能，相对于原始的 CSS 语言来说，有一定的学习曲线。这可能会增加开发人员的学习成本和项目的启动时间。

预编译过程：预处理器需要通过编译过程将预处理器代码转换为普通的 CSS 代码，这增加了构建过程的复杂性和时间消耗。每次修改样式都需要重新编译，可能会增加开发的迭代时间。

额外的工具和依赖：使用预处理器通常需要额外的工具和依赖，如编译器、构建工具等。这可能会增加项目的复杂性和维护成本。

兼容性问题：预处理器生成的 CSS 代码可能在一些旧版本的浏览器中存在兼容性问题。需要进行兼容性测试和适配，增加了开发和测试的工作量。

总结来说，CSS 预处理器具有变量和计算、嵌套规则、混合和继承、导入和模块化等优点，可以提高样式表的灵活性、可读性和可维护性。但同时也存在学习曲线、预编译过程、额外的工具和依赖、兼容性问题等缺点。开发人员可以根据项目需求和团队情况，权衡这些优缺点，选择是否使用 CSS 预处理器。

在本文中，我将搁置围绕技术的所有宣传，并客观地对其进行评估。我将列出SPA方法的优缺点，并建议何时使用它。

SPA与MPA。有什么不同？

当MPA对您的输入做出反应或必须显示一些新内容时，它会向服务器请求一个新的HTML页面。收到标记后，浏览器将呈现新页面，使其重新加载。

AJAX（异步JavaScript和XML）允许Web应用程序仅刷新页面的一部分。

与SPA交互时，浏览器将对服务器进行AJAX调用。但是服务器无需呈现新页面，而是可以向您发送数据（通常以JSON格式）。然后，SPA将使用该数据直接在浏览器中呈现页面的某些部分。

结果是一个应用程序由一个高度交互的网页组成，该网页从未完全重新加载。

因此，现在您知道了SPA和MPA之间的基本区别，让我们更深入地了解它们的优缺点。

SPA的优势

1.快速流畅的用户体验

不难想象，持续不断的整页重新加载会如何损害用户体验。

您将在SPA中永远找不到此问题。JavaScript，CSS和HTML在应用程序的整个生命周期内仅加载一次。初始加载后，服务器仅向您发送新数据。

这减少了服务器-客户端流量，并使应用程序感觉“更智能”。

使用传统的应用程序，服务器必须为成千上万的用户生成完整的页面。但是对于SPA，渲染是在客户端完成的。这意味着服务器对用户请求的响应速度更快。

因此，只要您不使用可怕的过时硬件，SPA就会比传统的Web应用程序更快，响应速度更快。

这使它们成为将旧的桌面应用程序和企业级解决方案移植到Web而不改变其UI和工作流的理想人选。

2.本地缓存和离线功能

发出初始请求后，单页Web应用程序将缓存从服务器接收的所有数据并将其存储在本地。这样，即使Internet连接失败，SPA也可以继续运行。

当应用程序重新连接到网络时，它将本地数据与服务器同步并恢复全部功能。

您也可以部分放弃使用Cookie来支持Web Storage。尽管功能非常相似（跟踪用户，他们的设置和首选项），但是本地存储可以存储更多数据（每个cookie 5MB vs 4KB）。

它也不必通过每个HTTP请求将数据发送回服务器。这加快了静态文件（JavaScript，CSS，图像和其他媒体）的加载。

3.完美的移动适应性

到2017年底，移动互联网速度几乎是其固定速度的两倍。同时，用户都非常渴望放弃运行缓慢的应用程序。因此，移动用户将从加载速度更快的应用程序中受益最多也就不足为奇了。

而且，单页应用程序从Web移植到移动设备要容易得多。通常，您可以为应用程序的Web版本和iOS / Android版本使用相同的后端代码，这在传统方法中很少见。

最后，与MPA相比，单页UI更接近于本机应用程序。这意味着在使SPA适应移动设备时，您无需在设计上进行太多更改。

4. API重用

如果您已经拥有移动应用程序，则创建SPA也会容易得多。如果应用程序与服务器端的某些API通信，则您可能会在Web应用程序中重用相同的API，而无需对其进行重大更改。

反之亦然，如果您打算启动本机应用程序，那么当您开始移动开发时，为单页Web应用程序编写的API将会派上用场。

5.简化开发

单页应用程序开发类似于使用LEGO建造房屋。有了组件（LEGO积木）后，就可以快速构造SPA，而无需一遍又一遍地添加相同的代码片段。

另外，您不必编写用于在服务器上呈现HTML页面的自定义代码。而且从file：// URI开始开发要容易得多，因为在此阶段不需要服务器。

最后，SPA在生产中易于部署和版本化。

6.后端/前端分离

在单页应用程序中，UI与数据分开。这使您可以在不影响后端的情况下（不包括某些静态资源文件）尽可能多地修改前端并更改UI。

前端/后端开发的解耦使查找代码库中的错误变得更加容易。集成新的API并更改数据进入SPA框架并流到不同系统的方式也更加容易。全部不影响UI。

7.无痛的Chrome调试

使用Chrome调试单页应用程序要容易得多。您可以一次看到整个代码，观察网络操作，并检查页面元素以及相关数据。并且不要忘记，单页应用程序javascript框架具有自己的Chrome DevTools扩展，例如Vue.js devtools，AngularJS Batarang，Ember Inspector或React开发人员工具。

SPA缺点

1. SEO问题

长期以来，Google和其他搜索引擎在为SPA编制索引方面遇到了麻烦。他们的机器人擅长抓取静态HTML页面，但无法呈现动态内容。由于无法执行JavaScript，他们在SPA中看到的只是一个空的HTML容器。结果，单页应用程序很少将其放在搜索结果的顶部。

在过去的几年中，Google在索引JavaScript方面变得更加出色。不过，Google承认有时无法正确索引单页应用程序。更不用说其他搜索引擎尚未获得同样的SPA爬行能力。

SEO的另一个问题是，与传统应用程序相比，SPA具有有限的语义内核。这源于这样一个事实，即不可能在单个页面的网站中填充尽可能多的关键字。

要解决此问题，请选择内容以更好地满足用户要求。另外，利用元描述，标签和内部锚文本链接。或者，您可以将SPA专用于单个主题，因为Google在主题网站上的排名较高。

最后，您可能会遇到一些可共享性问题，因为Facebook的漫游器在爬取SPA方面表现异常出色。

2.内存泄漏

SPA中使用的事件侦听器可能会导致用户设备上的可用内存丢失。由于您的应用程序实质上是一个永远不会重新加载的页面，因此，SPA运行时间越长，内存泄漏就越严重。

如果您在开发过程中没有对此问题给予足够的重视，则可能会导致性能显着下降，并迅速耗尽设备的电池电量。

3.安全问题

跨站点脚本（XSS）使SPA更加容易受到黑客攻击。XSS允许侵入者将恶意的客户端脚本插入本来值得信任的应用程序中。

但是，有一些方法可以打击跨站点脚本。使用单页应用程序，您可以保护数据端点，并将客户端下载的JS分为多个独立的片段。

这样，攻击者将无法立即访问您的所有代码。

4.缓慢的第一次加载

SPA的启动速度比传统应用程序慢。这是由于客户端渲染而发生的。在您的浏览器呈现页面之前，它必须加载庞大的JS框架。这可能需要一段时间，尤其是对于大型应用程序。

但是在第一次渲染之后，SPA的速度比MPA快得多。

幸运的是，有多种方法可以加快SPA的初始化速度，例如动态加载资产和最小化脚本。

5.禁用JavaScript的有限功能

一小部分用户在其浏览器中禁用了JavaScript。原因从增加速度到安全问题。对于这样的人，您的尖端SPA将彻底无法使用。

此问题的部分解决方案是对第一次加载使用服务器端呈现。不过，禁用JS后，您的某些应用程序功能可能仍然不可用。

渐进增强哲学还允许您创建可为禁用JavaScript或使用过时的浏览器和硬件的用户提供令人满意的体验的应用程序。

6.应用程序可扩展性差

使用传统方法，应用程序的功能分布在多个页面上。您可以逐渐添加内容并扩展页面数。在不影响其他页面的情况下，更改MPA的一部分也相对容易。

例如，如果您想更改应用程序的框架，则可以逐页进行操作，直到重新设计整个MPA。

在SPA中，业务逻辑内置于易于开发和维护的独立组件中。

但是，更改应用程序的体系结构完全是另外一回事了。单个功能可能包含多个组件，更改常用元素可能会影响应用程序的其他部分。

因此，在计划阶段必须考虑SPA功能的未来更改。如果您对应用程序的前进方向有清晰的了解，那么开发人员将能够在架构定型之前考虑可能的更改。

7.导航问题

在SPA中，后退和前进按钮具有某些意外行为。“后退”按钮实际上可以加载上一页（可以使您转到一个完全不同的网站），而不是使您返回到应用程序的先前状态。

当您按下“后退”按钮时，该应用程序也可能会失去滚动位置，因此您最终会进入页面的其他部分。

在某些SPA中，您甚至无法在新标签页中打开链接，刷新页面或将其添加为书签。

幸运的是，您可以使用已经与大多数JS框架捆绑在一起的HTML5 History API来解决导航问题。

8.由于异步请求而产生的奇怪行为

SPA异步管理用户请求，这可能导致某些意外行为。当您按下按钮或单击传统应用程序中的链接时，它将停止所有当前活动并向服务器发出新请求。

但是在SPA中，服务器响应是异步发出的。这意味着他们的到达顺序可能与您要求的顺序不同。因此，如果您非常快地单击几个链接，您可能会在错误的页面上结束。或者，如果您多次按下同一按钮，则可能会遇到图形故障。您的开发人员将必须专门编写代码来处理这种情况。

结论

现在您了解为什么单页应用程序最近变得如此流行。但是在您选择SPA与MPA辩论之前，请先考虑要实现的目标。

如果您打算提供多种服务或不同类别的商品，那么创建具有多个页面的网站是合乎逻辑的解决方案。这就是为什么如此构建大量应用程序（如Amazon）的原因。

对于具有大量内容（例如新闻门户）且需要完美SEO的网站，MPA也是一个好主意。

相反，如果您希望专注于推广单一产品或服务，SPA是一种更好的解决方案。它们使您可以将令人印象深刻的功能打包到轻量级应用程序中。出色的UX使SPA成为移植高度交互式桌面应用程序和在Web上创建类似本机体验的理想选择。

这就是为什么SaaS产品中的CRM / ERP系统和交互式仪表板通常被构建为单页应用程序的原因。

总而言之，SPA是一项了不起的技术。它具有许多优点，您可以通过一支合格的开发团队轻松克服其一些弊端。

使用什么类型的框架决定了应用程序的敏捷程度。因此，您必须慎重选择。在充满多样性的前端生态中，有两个框架十分引人瞩目——Ember.js和Vue.js。

开发者为什么要为选择框架而犯愁？本文，我们将就这两个框架进行对比，帮助你判断哪个框架才更适合你。

在开始对比这两个框架之前，我们应该先了解：选择一个框架的决定因素都有哪些：

• 代码必须简单易懂
• 应以更少的代码量产出更多的功能
• 应提供一个布局合理的工作框架
• 是否支持内置路由或外部插件的路由
• 应该能够在页面加载时传输更多数据，从而使页面成为单页应用（PS：单页应用程序的使用体验更好）
• 在单页架构中，如果用户需要共享应用子页面链接，那么框架应该具备基于URL路由不同功能的能力
• 更严格的模板选项有助于实现双向绑定
• 不应与任何第三方库产生冲突
• 应该很容易测试框架内的代码
• 应为Ajax调用提供HTTP客户端服务
• 文档必不可少，并且应该是完整且最新的
• 应该与浏览器的最新版本兼容

只有保证所选择的框架符合上述基本条件，才能够最大程度的确保Web应用程序的构建顺利。下面我们就来详细分析Ember.js和Vue.js框架之间的异同。

Ember.js

Ember.js是一个基于MVVM模型的开源框架，该框架主要用于创建复杂的多页面应用程序。它最大的特点是：持续推出最新的特性，并不会丢弃任何旧功能。

与大多数前端开发框架不同，使用Ember.js，您必须遵循一套严格的JS体系结构，也就是说，Ember.js并不具备高度的灵活性。不过，正是得益于这套JS体系结构，Ember.js明显更加完善、稳定，您可以使用其任意版本推出的工具与最新版本集成，却不必过分担忧兼容性问题。

因为Promise无处不在，所以你可以用简单的方式编写代码和模块，通过调用 Ember.js提供的API，以实现高度复杂的功能。

在性能处理方面，Ember.js创建了相似的绑定机制和DOM更新，允许让浏览器一次性处理它们，以提高工作性能（这样做的好处是：避免为重复工作增加算力，浪费大量时间）。

作为一个流行的前端开发框架，学习指南必不可少。Ember.js明确了一般应用程序的组织和结构，确保你不会犯任何错误。

Ember.js的模板基于Handlebar 语法，借助它可以使你轻松阅读和理解模板，同样也能使页面加载速度变得更快。除此之外，你不必每次在页面上添加或删除数据时都更新模板，因为这一切，语言本身已自动为你完成。

最后，Ember.js拥有一个活跃的社区，其定期更新框架并确保向后兼容性。

让我们花几分钟总结一下Ember.js的特点：

• Ember.js是适用于复杂结构、多页应用程序的MVVM模型的开源框架
• Ember.js持续提供最新功能，且不会丢弃任何旧功能
• Ember.js遵循一套非常严格的结构框架，不能提供太高的灵活性
• 借助Ember.js完善的控制系统可帮助你与新版本完美集成
• Ember.js对避免使用过时的API版本有着严格的指导
• Ember的API可帮助您以简单的方式使用复杂的功能
• Ember.js提供高效的运算机制，以保证运行效率
• Promise确保你使用Ember.js的任何API，以达到编写模块化脚本和简洁代码的目的
• Ember.js是一个完全加载的前端框架
• Ember.js框架稳定，因为所有组件都具有相同的功能和属性
• Ember.js具有明确定义的限制，可防止您使应用程序复杂化
• Handlebar作为Ember.js的模板语言，可使你可以轻松阅读和理解模板，且有助于更快地加载模板
• Ember.js有一个活跃的社区，可以定期更新框架并保证其向后兼容性

Vue.js

开发人员一直在试图寻找新的框架来构建他们的应用程序，而他们的核心诉求只有一个：速度快、成本低。基于此，用Vue就够了。

这个框架很容易被开发人员理解并且能够以极低的成本使用。当然，选择它的理由还有很多：简单的编码方式、健全的帮助文档和活跃的生态系统。

在Web应用程序开发中，Vue.js在软件语言方面结合了很多优点。它的体系结构更易使用，并且，使用Vue.js 开发的应用程序很容易与现代化的应用程序集成。

Vue.js使用了服务器端渲染流的方法，这样做有两个好处：1. 使服务器具有较高的响应速度；2. 非常适合SEO（自然搜索）。通过服务器端渲染，视图直接在服务器上呈现，这十分便于搜索引擎直接抓取到这些网页内容。

Vue.JS是一个非常轻量级的框架。正因如此，它也比其他框架快得多。

如果你愿意，甚至还可以进一步减少它的体积——使用Vue.js可以将模板和编译器分离为虚拟DOM，只需部署12 KB的压缩文件，就可以在您的机器中编译模板。

Vue.js的另一个重要特点是：它可以轻松地与使用JavaScript脚本创建的Web应用程序集成，使用此框架可以轻松地对已有应用程序进行更改。

提到集成，就不得不说Vue.js与其他前端库的集成情况。Vue.js可以轻松的集成到其他前端库中，也就是说，您可以在Vue.js中插入另一个库，以弥补此框架的不足，而这项功能也使得Vue.js成为了一个更为通用的工具。

其实，上面那些都不叫事，对你来说最关心的一定是：上手难度。

正因为Vue.js的简单易用，即使是新的开发人员，也会发现使用它来构建应用程序有多么容易。

通过Vue.js，您可以返回并轻松检查语法错误。除了测试组件外，您还可以返回并检查所有状态（就任何开发人员而言，这都是一个非常重要的功能）。

最后，Vue.js也有非常详细的文档，这会帮助你快速上手开发应用程序。

同样，我们来总结一下Vue.js的特点：

1. Vue.js能与其他应用程序集成，得益于这项优点，您可以使用它来对现有应用进行更改
2. Vue.js轻巧且快速。通过部署解释器，还可以使它更轻量
3. Vue.js允许您将编译器和模板分离为虚拟DOM
4. Vue.js丰富的库和组件为你的应用程序带来更多可能
5. Vue.js应用能够快速响应
6. Vue.js的服务器端渲染还有助于使搜索引擎排名更高
7. Vue.js结构简单。易于任何新开发者使用
8. Vue.js可以帮你返回检查结果并更正错误
9. 详细的文档有助于快速构建网页或应用程序

重点来啦！Ember.js 与Vue.js全面对比

当你需要将原有应用程序向更具现代化的框架迁移时，Vue.js可以为你提供更多帮助。它结合了许多其他框架的优点，但作为面向开发过程的框架，Vue.js不提供现成的界面元素库。但是，你仍然可以从许多第三方社区库中拿到你想要的东西。

Ember.js为您提供了一个值得信赖的成熟框架。当你的开发团队最够大时，这个框架比较合适。由于MVVM结构所致，Ember.js项目团队之间的分工非常明确。

我们很难说谁比谁更具优势。因为，选择哪个框架完全取决于你实际参与的项目类型。Ember.js和Vue.js都存在一些优缺点，通过下表，您可以更清楚的看到：

目前，这两个框架都在不断更新和迭代，作为一名开发者，我们除了要考虑每个框架自身的功能与应用场景外，更应考虑各个框架之间的兼容性，尤其对于企业项目来说，重构意味着推翻重来，对原有项目和技术体系来说都将是一场浩劫。而为了避免可能的风险，我建议选择一款相对成熟的商用控件。

1. React Native

React Native是由Facebook开发的一种基于React的开源框架。它允许开发者使用JavaScript和React来构建原生移动应用程序。React Native可以让开发者快速构建高性能的移动应用程序，并且可以在不同平台上使用相同的代码。React Native通过使用原生组件来实现高性能，从而提高了应用程序的性能和响应能力。

2. Flutter

Flutter是Google开发的一种开源框架，它可以用于构建高性能的移动应用程序。Flutter使用Dart语言来编写代码，并且可以在iOS和Android平台上使用相同的代码。Flutter具有快速的开发周期、高质量的用户界面和出色的性能。Flutter使用自己的渲染引擎来实现高性能，从而提高了应用程序的性能和响应能力。

3. Ionic

Ionic是一个基于HTML5和CSS3的开源框架，可以用于构建跨平台的移动应用程序。Ionic使用AngularJS来构建应用程序，并且可以在不同平台上使用相同的代码。Ionic提供了大量的UI组件和工具来帮助开发者更快地构建应用程序。Ionic使用自己的渲染引擎来实现高性能，从而提高了应用程序的性能和响应能力。

4. Xamarin

Xamarin是由Microsoft开发的一种跨平台移动应用程序开发框架。它允许开发者使用C#和.NET框架来构建原生移动应用程序。Xamarin可以在iOS、Android和Windows Phone平台上使用相同的代码。Xamarin使用自己的渲染引擎来实现高性能，从而提高了应用程序的性能和响应能力。

5. PhoneGap

PhoneGap是一个基于HTML、CSS和JavaScript的开源框架，可以用于构建跨平台的移动应用程序。PhoneGap使用Web技术来构建应用程序，并且可以在不同平台上使用相同的代码。PhoneGap使用自己的渲染引擎来实现高性能，从而提高了应用程序的性能和响应能力。

以上是一些常用的APP开发框架，每个框架都有自己的特点和适用范围。选择一个适合自己的框架可以提高开发效率和代码质量，从而更快地构建高性能的移动应用程序。

什么是easycom？

easycom是Uniapp框架提供的一种组件自动注册机制，它可以自动扫描指定目录下的所有组件，并注册到全局组件中。这意味着我们无需手动在components中引入组件，也无需在每个页面中单独引入组件，只需要在组件的目录下创建一个index.vue文件，就可以自动注册组件并在全局中使用了。

如何使用easycom？

使用easycom非常简单，只需要在项目根目录下的pages.json中配置easycom属性即可。例如：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^cu-": "@/components/cu/"
    }
  }
}

其中，autoscan表示是否启用自动扫描功能，如果设置为true，则会自动扫描项目中所有符合规则的组件并注册到全局中。如果设置为false，则需要手动在components中引入组件。

custom是自定义规则，可以根据规则自动注册组件。例如上面的例子中，以cu-开头的组件会被自动注册到@/components/cu/目录下。

除了在pages.json中配置easycom属性外，还可以在单个页面的json文件中配置usingComponents属性来引用组件。例如：

{
  "usingComponents": {
    "cu-btn": "@/components/cu-btn/index"
  }
}

上面的例子中，cu-btn组件会被自动引入到当前页面中，无需手动在components中引入。

easycom的规则

easycom支持多种规则，可以自定义组件的目录和组件名。以下是常见的规则：

• 目录规则：将组件放在components目录下，文件名为index.vue，则组件会自动注册到全局中。例如：components/my-component/index.vue会被自动注册为my-component组件。
• 前缀规则：将组件放在任意目录下，文件名为index.vue，文件名以指定前缀开头，例如my-，则组件会自动注册到全局中。例如：components/my-component/index.vue会被自动注册为my-component组件。
• 全路径规则：将组件放在任意目录下，文件名为index.vue，则可以在页面中使用全路径来引用组件，例如：@/components/my-component/index。

easycom的注意事项

虽然easycom提供了方便的组件自动注册机制，但在使用easycom时，也有一些需要注意的事项：

1. 组件命名必须是小写字母，使用短横线连接单词。例如：my-component。
2. 不同平台的组件可能有不同的实现方式，因此需要在pages.json中配置easycom属性时，需要根据平台分别配置。例如：
   {
"easycom": {
   “nvue”: {
   “autoscan” true
   } ,
   “h5”: {
   “autoscan”: true
   }
   }
}
3.  如果有一些组件不需要自动注册，可以在组件目录下创建一个.easycomignore文件来忽略该组件的自动注册。例如：
   # 忽略my-component组件
my-component/
   如果需要忽略某个目录下的所有组件，可以在.easycomignore文件中输入目录名即可。
4. 如果需要自定义规则，可以在pages.json中配置custom属性。例如：
   {
"easycom": {
“autoscan”: true,
   “custom”: {
   “^my-“: “@/components/my/”
   }
}
}
   上面的例子中，以my-开头的组件会被自动注册到@/components/my/目录下。
5. 如果需要在某个页面中引用组件，可以在页面的json文件中配置usingComponents属性。例如：
   { "usingComponents": { "my-component": "@/components/my-component/index" } }
   上面的例子中，my-component组件会被自动引入到当前页面中。

总的来说，easycom是Uniapp框架中非常方便的组件自动注册机制，可以大大简化组件的使用和管理。但是在使用时需要注意一些规则和注意事项，以保证组件能够正常注册和使用。

选项式API（Options API）：

• 基于对象（data、methods、computed、watch等）的API。
• 每个组件的选项是集中在一个地方的。
• 可能会导致组件变得庞大而复杂。

// 选项式API示例
Vue.component('my-component', {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';
    }
  },
  template: '<div>{{ message }}</div>'
});

组合式API（Composition API）：

• 基于函数的API，使用setup函数。
• 使用函数组合而非类继承。
• 可以更灵活地使用Vue的响应式系统和其他API。
• 需要Vue 3.x。

// 组合式API示例
Vue.component('my-component', {
  setup() {
    const message = Vue.ref('Hello, Vue!');
 
    function updateMessage() {
      message.value = 'Updated message';
    }
 
    return { message, updateMessage };
  },
  template: '<div>{{ message }} <button @click="updateMessage">Update</button></div>'
});

选项式API更适合于旧版Vue 2.x，而组合式API则是Vue 3.x推出的一个新特性，旨在提供更简洁、更易于理解的方式来组织组件逻辑。

伴随着新到的vue3，我们编写组件的书写方式也发生了变化。
除了底层的更新，编写方式的改变或许才是我们最能直观感受到的。

其实就是vue3多了一种名为组合式api(composables api)的写法，相对应传统的选项式api(options api)
组合式api简单来说就是使用setup方式编写组件。

传统的选项式api

来看看这种传统的写法：65行

<template>
  <div class="home" v-if="userInfo">
    <my-header/>
    用户详情：{{fullUname}},{{userInfo.age}}岁
  </div>
</template>
<script>
import MyHeader from '../components/my-header.vue';

export default {
  // 组件：公共头部
  components: { MyHeader },

  // 属性： 接受属性用户id
  props: {
    userId: {
      type: String,
      default: '2022-01-01'
    }
  },

  // 状态：用户信息
  data() {
    return {
      userInfo: null
    }
  },

  // 计算属性：给用户名加一个牛逼的前缀
  computed: {
    fullUname() {
      if(this.userInfo && this.userInfo.name){
        return '牛逼的' + this.userInfo.name;
      }
      return ''
    }
  },

  // 监听：用户id改变
  watch: {
    userId: {
      handler(newVal, oldVal) {
        console.log('用户id变化啦:'+newVal);
      },
      immediate: true
    }
  },

  // 方法：同步用户信息
  methods: {
    syncUserInfo(userId) {
      this.userInfo = {
        id: userId,
        name: '小明',
        age: 20
      };
    }
  },

  // 钩子：初始化
  mounted() {
    this.syncUserInfo(this.userId)
  }
}
</script>

先进的组合式api

来看看这种先进的写法：48行

<template>
  <div class="home" v-if="userInfo">
    <my-header />
    用户详情：{{ fullUname }},{{ userInfo.age }}岁
  </div>
</template>
<script setup>// <script setup> 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。
import { ref, onMounted, watch, computed } from 'vue';
import MyHeader from '../components/my-header.vue';

// 属性： 接受属性用户id
const props = defineProps({
  userId: {
    type: String,
    default: '2022-01-01'
  }
})

// 状态：用户信息
const userInfo = ref(null);

// 计算属性：给用户名加一个牛逼的前缀
const fullUname = computed(() => {
  if (userInfo.value && userInfo.value.name) {
    return '牛逼的' + userInfo.value.name;
  }
  return ''
})

// 监听：用户id改变
watch((newVal, oldVal) => {
  console.log('用户id变化啦:' + newVal);
}, { immediate: true })

// 方法：同步用户信息
const syncUserInfo = (userId) => {
  userInfo.value = {
    id: userId,
    name: '小明',
    age: 20
  };
}

// 钩子：初始化
onMounted(() => {
  syncUserInfo(props.userId)
})
</script>

而 NODE_ENV 就是其中的一个环境变量。这个变量主要用于标识当前的环境（生产环境，开发环境）。默认是没有这个环境变量的，需要自己手动配置。不同系统有不同的环境变量配置方式，在这里就不多加赘述。

NODE_ENV 变量只能在系统中配置吗？其实不然。在 Vue 项目中， Vue 提供了自己的配置方式。这就要涉及到 Vue CLI 中模式的概念了。 Vue CLI 文档说明了这个问题。

也就是说，在 Vue 中， NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置。配置过后，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入其中了。而这些命令，都有自己的默认模式：

• npm run dev(serve) ，其实是运行了 vue-cli service serve ，默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。
• npm run build ，其实运行了 vue-cli service build ，默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV 。

除了以上的修改方式外，也可以在命令后直接使用 –mode 参数手动指定模式。当然，每个模式配置的变量也不只有 NODE_ENV , 也可以通过配置其他的变量简化工作流程。

模式的应用

有了模式的概念，就可以根据不同的环境配置模式，就不用每次打包时都去更改 vue.config.js 文件了。比如在测试环境和生产环境， publicPath参数 （部署应用包时的基本 URL） 可能不同。遇到这种情况就可以在 vue.config.js 文件中，将 publicPath 参数设置为：publicPath: process.env.BASE_URL
设置之后，再在各个 .env.[mode] 文件下对 BASE_URL 进行配置就行了，这样就避免了每次修改配置文件的尴尬。其他的配置也是同理。
Tips: 即使不是生产环境，也可以将模式设置为 production ，这样可以获得 webpack 默认的打包优化。

process.env使用

1、在nodejs中使用

1、安装

npm install dotenv

2、根目录下创建 .env 文件

HOST = localhost
PORT = 8080

3、入口文件中引入 dotenv 并使用

require("dotenv").config({path: '.env'})
console.log(process.env.HOST); // localhost
console.log(process.env.PORT); // 8080

2、在vue中使用

在使用脚手架创建项目的时候，会自动安装dotenv，可以从package-lock.json中找到配置。在main.js入口文件中打印console.log(process.env);可以看出，默认的模式是development即开发模式。

也就是说，在Vue中， NODE_ENV 可以通过 .env 文件或者.env.[mode]文件配置。配置过后，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入其中了。而这些命令，都有自己的默认模式：

• npm run dev(serve) ，其实是运行了 vue-cli service serve ，默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。
• npm run build ，其实运行了 vue-cli service build ，默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV 。

注意：只有 NODE_ENV，BASE_URL 和以 VUE_APP_ 开头的变量将通过 webpack.DefinePlugin 静态地嵌入到客户端侧的代码中。这是为了避免意外公开机器上可能具有相同名称的私钥。

NODE_ENV = development
VUE_APP_BASE_API = 'http://localhost:8099/'

注意：.env 环境文件是通过运行 vue-cli-service 命令载入的，因此环境文件发生变化，你需要重启服务。除了以上的修改方式外，也可以在命令后直接使用--mode参数手动指定模式。

当运行 vue-cli-service 命令时，所有的环境变量都从对应的环境文件中载入。如果文件内部不包含 NODE_ENV 变量，它的值将取决于模式，例如，在 production 模式下被设置为 “production”，在 test 模式下被设置为 “test”，默认则是 “development”。

NODE_ENV 将决定您的应用运行的模式，是开发，生产还是测试，因此也决定了创建哪种 webpack 配置。

例如通过将 NODE_ENV 设置为 “test”，Vue CLI 会创建一个优化过后的，并且旨在用于单元测试的 webpack 配置，它并不会处理图片以及一些对单元测试非必需的其他资源。

同理，NODE_ENV=development 创建一个 webpack 配置，该配置启用热更新，不会对资源进行 hash 也不会打出 vendor bundles，目的是为了在开发的时候能够快速重新构建。

当你运行 vue-cli-service build 命令时，无论你要部署到哪个环境，应该始终把 NODE_ENV 设置为 “production” 来获取可用于部署的应用程序。

示例配置

我们现在有三个配置文件，分别如下：

#.env.development
NODE_ENV=development
VUE_APP_AXIOS_BASEURL=http://xxxx

#.env.preview 测试环境的配置
NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx

#.env.production
NODE_ENV=production
VUE_APP_AXIOS_BASEURL=http://xxxx

在 axios 中使用

import axios from "axios";
const conf = {
  baseURL: process.env.VUE_APP_AXIOS_BASEURL,
};
return axios.create(conf);

package.json 配置

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode preview",
    "build:release": "vue-cli-service build"
  }
}

启动方式

npm run serve # 默认 dev
npm run build # 测试环境
npm run build:release # 正式环境

uts，全称 uni type script，是一门跨平台的、高性能的、强类型的现代编程语言。

它可以被编译为不同平台的编程语言，如：

• web平台，编译为JavaScript
• Android平台，编译为Kotlin
• iOS平台，编译Swift

uts 采用了与 ts 基本一致的语法规范，支持绝大部分 ES6 API。但为了跨端，uts进行了一些约束和特定平台的增补。

过去在js引擎下运行支持的语法，大部分在uts的处理下也可以平滑的在kotlin和swift中使用。但有一些无法抹平，需要使用条件编译。和uni-app的条件编译类似，uts也支持条件编译。写在条件编译里的，可以调用平台特有的扩展语法。

用途和关系

uts是一门语言。也仅是一门语言，不包含ui框架。uvue是DCloud提供的跨平台的、基于vue语法的ui框架。uts相当于js，uvue相当于html和css。它们类似于v8和webkit的关系、类似于dart和flutter的关系。

uts这门语言，有2个用途：

• 开发uni-app 和 uni-app x 的原生扩展插件：因为uts可以调用所有原生能力。
• uts和uvue一起组合，开发原生级的项目，也就是 uni-app x 项目

uni-app x 开发App时，输出的是纯原生的App（Android上就是kotlin的app），里面没有js引擎和webview。也就是说，uts可以在uni-app中使用，也可以在uni-app x中使用。

在uni-app中，主编程语言是js。uts可以开发原生插件，包括API插件和组件插件。
在uni-app x中，主编程语言是uts。不管是应用逻辑还是扩展插件，均使用uts编程，没有js。

限制元素

当使用 DOM 作为模板时，你会受到 HTML 本身的一些限制，因为 Vue 只有在浏览器解析、规范化模板之后才能获取其内容。Vue的模板是DOM模板，使用浏览器原生的解析器而不是自己实现一个。相比字符串模板，DOM模板有一些好处，但是也有问题，它必须是有效的HTML片段。一些HTML元素对什么元素可以放在它里面有限制。对内部元素有限制的标签内，放在这些元素内部的自定义标签将被提到元素的外面，因而渲染不正确。

对应自定义元素，应当使用is特性：

<table>
<tr is="my-component"></tr>
</table>

意思就是有些元素，比如 ul 里面只能直接包含 li元素，像这样：

<ul>
    <li></li>
</ul>
//而不能：
<ul>
    <your-component>
</ul>

这样就不能复用your-component这个组件了，如果要达到我们的目的，我们就要使用is特性像这样：

<ul>
    <li is="your-component"></li>
</ul>

动态组件

在我们平时使用vue中的模板的时候，许多时候都是直接定义成一个固定的模板，但是，vue中提供了一个动态模板，可以在任意模板中切换，就是用vue中<component>用:is来挂载不同的组件。

<div id="app" v-cloak>
        <component :is="currentView"></component>
        <button @click="handleChangeView('A')">A</button>
        <button @click="handleChangeView('B')">B</button>
        <button @click="handleChangeView('C')">C</button>
</div>
<script>
var app = new Vue({
            el: '#app',
            components:{
                comA:{
                    template:`
                        <div>组件A</div>
                    `
                },
                comB:{
                    template:`
                        <div>组件B</div>
                    `
                },
                comC:{
                    template:`
                        <div>组件C</div>
                    `
                }
            },
            data:{
                currentView:'comA'
            },
            methods:{
                handleChangeView:function(component){
                    this.currentView='com'+component;
                }
            }
        });
</script>

我们在components中注册了三个模板，当我们点击当前按钮的时候，就会将模板切换模板，可以说是非常方便了。

in前面如果是一个变量，那么该变量保存的是数组中的数据in前面如果是两个变量，那么第一个变量保存的是数组中的数据，第二个变量保存的是下标。

<!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>Document</title>
</head>
 
<body>
    <div id="app">
        <!-- 绑定事件 v-on: 简写为@ -->
        <button @click="add">点击在数组最后添加元素</button>
        <ul style="list-style-type: none;">
            <!-- item是数组里面的元素  index是数组的下标 -->
            <li v-for="(item,index) in list">{{index}}-{{item}}</li>
        </ul>
 
    </div>
    <script src="/vue.js"></script>
    <script>
 
        new Vue({
            el: '#app',
            data: {
                list: ['猪方', '战神', '小金子', '楠神']
            },
            methods: {
                add() {
                    this.list.push('黑牛')
                }
            },
        })
    </script>
</body>
 
</html>

2.v-for遍历对象

如果是一个变量，那么保存的是对象中的属性值
如果是两个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名
如果是三个变量，那么第一个变量保存的是属性值，第二个变量保存的是属性名，第三个变量保存的是下标

v-for=”o1 in obj” o1:属性值
v-for=”(o1,o2) in obj” o1:属性值 o2:属性名
v-for=”(o1,o2,o3) in obj” o1:属性值 o2:属性名 o3:下标

<!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>Document</title>
</head>
 
<body>
    <div id="app">
        <ul>
            <li v-for="item in obj">{{item}}</li>
            <hr>
            <li v-for="(val,key) in obj">{{ key }}-{{ val }}</li>
 
        </ul>
    </div>
 
    <script src="./vue.js"></script>
 
    <script>
        new Vue({
            el: '#app',
            data: {
                obj: {
                    name: '卡拉米',
                    age: 16,
                    sex: '男',
 
                }
            }
        })
    </script>
</body>
 
</html>

3.v-for循环数字

in后面不仅可以放数组、对象数组、对象，还可以放数字
在in前面用一个变量存储当前次数，注意：此变量是从1开始，而不是从0开始

<!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>Document</title>
</head>
 
<body>
    <div id="app">
        <ul style="list-style-type: none;">
            <!-- v-for='遍历的数 in 遍历的范围' -->
            <li v-for="num in 9">{{num}}</li>
        </ul>
    </div>
    <script src="/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
 
        })
 
    </script>
</body>
 
</html>

4. Key是什么？

Key 特殊属性主要用做 Vue 的虚拟 DOM 算法在将新节点列表与旧列表进行比较时识别 VNode 的提示。在没有键的情况下，Vue 使用一种算法来最小化元素移动，并尝试尽可能多地就地修补/重用相同类型的元素。使用键，它将根据键的顺序更改对元素进行重新排序，并且不再存在键的元素将始终被删除/销毁。

有 Key

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- @click="list.splice(下标,删除的数量,添加的元素)" -->
        <button @click="list.splice(1,0,{name:'狗屎',age:11,sex:'男',id:4})">点击添加对象</button>
        <ul>
            <li v-for="item in list" :key="item.id">
                <!-- 单选框 -->
                <input type="checkbox">
                <!-- 行内元素 -->
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
    <script src="/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {name:'战神',age:18,sex:'男',id:1},
                    {name:'金子',age:18,sex:'男',id:2},
                    {name:'铜牌',age:18,sex:'男',id:3}
                ]
            }
        })
    </script>
</body>
</html>

没有 Key

<!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>Document</title>
</head>
<body>
    <div id="app">
        <!-- @click="list.splice(下标,删除的数量,添加的元素)" -->
        <button @click="list.splice(1,0,{name:'狗屎',age:11,sex:'男',id:4})">点击添加对象</button>
        <ul>
            <li v-for="item in list">
                <!-- 单选框 -->
                <input type="checkbox">
                <!-- 行内元素 -->
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
    <script src="/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {name:'战神',age:18,sex:'男',id:1},
                    {name:'金子',age:18,sex:'男',id:2},
                    {name:'铜牌',age:18,sex:'男',id:3}
                ]
            }
        })
    </script>
</body>
</html>