uniapp-day2

目录

1.在uniapp中显示视图有三种方式

2.scss和less的区别？

1. 语法差异

2. 变量和常量

3. 嵌套规则

4. 混合（Mixins）

5. 继承和扩展

6. 注释

7. 导入其他文件

8. 生态系统和社区支持

9. 其他特性

3.新建页面：要在pages中创建

---

1.在uniapp中显示视图有三种方式

1.使用浏览器运行

2.使用内置浏览器运行

3.使用小程序开发者工具运行

---

这三种方式均需要下载或者配置相应的插件

1.直接配置浏览器的.exe地址即可

2.点击后就会显示下载按钮，安装即可

3.小程序调试工具这里以微信小程序为例（需要下载微信小程序开发工具）

手动打开服务端口后才能在uniapp中调试

2.scss和less的区别？

1. 语法差异

• SCSS：其语法更接近传统的CSS，支持大括号{}和分号;来定义样式块和规则。它允许嵌套规则，使得代码更加整洁和易于管理。同时，SCSS也支持变量、函数、混合（Mixins）等高级特性。
• Less：语法上更像CSS，但也有所不同。它也使用大括号{}来定义代码块，但通常不需要分号;（尽管在某些情况下需要）。Less的变量使用@符号，而混合使用@mixin和@apply（或@include在较新版本中）关键字。

2. 变量和常量

• SCSS：使用$符号定义变量，例如$color: #ff0000;。
• Less：使用@符号定义变量，例如@color: #ff0000;。

3. 嵌套规则

• 两者都支持嵌套规则，但具体语法和特性可能有所不同。SCSS和Less都允许在一个选择器内部嵌套另一个选择器，从而减少了代码量并提高了代码的可读性。

4. 混合（Mixins）

• SCSS：使用@mixin定义混合样式，并通过@include将混合样式应用到选择器中。
• Less：同样使用@mixin定义混合样式，但可以通过@apply（或在某些版本中为@include）来应用混合后的样式。

5. 继承和扩展

• SCSS：使用@extend关键字来实现样式的扩展。
• Less：也使用extend关键字，但具体实现和语法可能与SCSS略有不同。

6. 注释

• SCSS：注释只能使用/* */的方式。
• Less：注释可以使用//（单行注释）或/* */（多行注释）。

7. 导入其他文件

• 在两者中，都可以使用@import关键字来导入其他文件中的CSS代码。但在具体实现上可能有所不同，例如Less可能要求导入的文件以.less为后缀名，而SCSS则支持.scss或.sass后缀名。

8. 生态系统和社区支持

• SCSS：作为Sass的语法扩展，SCSS拥有更广泛的社区支持和成熟的工具链。它得到了许多前端框架和库的支持，如Bootstrap和Foundation等。
• Less：虽然也有活跃的社区和工具支持，但相对于SCSS来说，其生态系统可能较小。然而，它仍然能够满足大多数项目的需求。

9. 其他特性

• SCSS：支持条件语句（如if-else）和循环语句（如for和each），这使得在样式表中实现更复杂的逻辑变得更容易。
• Less：提供了几个额外的功能，如颜色函数、JavaScript表达式的内联执行和可变值等，这些功能可以增强开发人员对样式的控制能力。

综上所述，SCSS和Less在语法、变量、混合、继承和扩展、注释、导入、生态系统支持以及其他特性方面都存在差异。开发人员应根据项目需求、团队熟悉度和生态系统支持等因素来选择适合的CSS预处理器。

3.新建页面：要在pages中创建

可以直接勾选scss页面，✔在pages.json中注册，创建同名目录

这样在页面页就会增加一个list.vue,并且页面信息会配置到pages.json文件中

数组展现页面形式，放在前面的数组首先展示页面。