Alita官方版

Alita简介

Alita是一个开发框架，可以帮助用户更好的部署页面内容，从而用React构建一个完整的移动Web应用(H5)。使用该软件，可以快速布局页面内容、添加文本内容、添加图像内容、添加图标组件、添加交互方案、在不同页面之间导航、构建目录结构、绑定对象数据和建立HTTP请求。Alita提供了很多组件资源，支持移动终端的全局布局，实现移动终端的拖拽，移动终端的表单方案，手势密码，列表页面等组件帮助你开发新的应用！

Alita软件功能

Alita:一个基于umi的React框架

它可以确保您和您的团队能够轻松构建混合应用程序。

Alita是一种面向场景的设计思想，用插件和零配置构建。这样在使用的时候可以有更好的开发体验，享受很多内置的功能。列出其中一些如下:

1.文件是路由，它是一个约定的项目文件结构，并自动将pages目录中的文件映射到路由配置。(并支持动态路由)

2.自动拆码，加快页面加载速度，并在部分场景提供自动生成骨架画面的功能。

3.内置较少支持，内置antd和antd-移动组件库。

4.开发环境支持热更新。在开发过程中，不需要频繁重启开发服务。只要修改项目代码，alita就会自动再次呈现页面。

5.友好的手机app开发模式，可以在真机上预览自己的开发效果，使用web blog系统快速定位问题。

6.关注一些真实的应用场景

7.可插拔插件设计，可以完全自定义自己的alita。

Alita软件特色

非常好

的默认配置和约定的目录结构帮助开发人员以零成本开始，这样就可以将所有的注意力都放在业务开发上。

插件和零配置

初学者只需要专注于业务开发，大师也可以专注于插件开发。享受快速入门的红利，满足团队后续发展的需要。

直接触及业务痛点和难点

将业务中常见的痛点和难点封装到业务组件中，这些组件是多个项目所共有的。增加项目的可行性，减轻开发商的负担。

Alita教程

页面间导航

意大利文页数

在alita中，页面是从pages目录中的文件导出的React组件。

默认情况下，Alita使用常规路由来匹配文件。(常规路由也叫文件路由，即不需要手写配置，文件系统就是路由，通过目录、文件及其名称分析路由配置。)

请注意，只有名为index的文件将被注册为路由。

页面对应于基于文件名的路由，例如，在开发中:

Pages/index.js对应于路由/。

page/list/index . js对应于route /list。

我们已经有了page/index . js文件，所以让我们创建page/list/index . js，看看它是如何工作的。

创建新页面

在pages目录下创建新的列表目录。

在列表目录中创建新的名为index.js的文件，内容如下:

组件可以有任何名称，但必须导出为deflt。

现在，确保开发正在运行并访问http://localhost:8000/#/list。您应该会看到这一页:

这是如何在alita中创建不同的页面。

只需点击& # 8216；页面& # 8217；在目录下的任意目录下创建一个index.js文件，文件的路径就变成了L路径。

让我们添加一个链接到新添加的页面，这样我们就可以从主页导航到它。

资源、元数据和CSS

CSS样式

现在我们来谈谈CSS样式。打开我们主页的代码是src/pages/index。

如您所见，我们已经在主页上编写了html的演示。你可以理解我们构建了页面的“骨架”。但是我们经常需要页面根据我们的设计呈现样式，所以我们还需要添加CSS样式来声明html标签的呈现样式。

编写和导入CSS

Alita内置了对css和Less的支持，允许你导入。CSS和。更少的文件。

在本课中，我们将讨论如何在alita中编写和导入CSS文件。我们还将讨论alita对CSS模块和Less的内置支持。我们开始吧！

资源、元数据和CSS

布局组件

首先，让我们创建一个布局组件，它在所有页面中都是通用的。

创建一个名为layouts的顶级目录。

在内部创建一个名为index.js的文件，其内容如下:

添加CSS

现在，让我们给布局添加一些样式。为此，我们将使用CSS模块，它允许您在React组件中导入CSS文件。

在layouts目录中创建一个名为index.css的文件，其内容如下:

重要:要使用CSS模块，CSS文件名必须以结尾。module.css

要在布局中使用它，您需要:

将其作为样式导入

使用样式。作为类名。

在这种情况下，类名是container，所以我们将使用styles.container

如果您现在访问http://localhost:8000，您应该会看到文本现在在一个红色的容器中:

资源、元数据和CSS

全球风格

CSS模块对于组件级样式很有用。但是如果你想加载一些CSS在每个页面上工作，alita也支持这个方法。

要加载全局CSS文件，请在src下创建一个名为global.css的文件，并添加以下内容:

重启开发

重要提示:添加src/global.css时，需要重启开发。按Ctrl+c停止并再次运行:

npm运行开始

因为src/global.css是一个约定的文件，如果这个文件存在，它将作为全局样式自动引入到最全面的条目文件中。

如果这个文件一开始不存在，逻辑就不会被启用，这个文件的变化也不会被监控。因此，在创建新文件时，需要重新启动服务。

后续修改会有热加载和实时预览修改，无需重新启动开发服务。

替代构件库样式

全局样式的另一个常见功能是覆盖antd(或antd-mobile)的样式。

例如，在主页上介绍antd-mobile组件。

在src/global.css中，覆盖样式:

现在，如果您访问http://localhost:8000，您会看到样式是有效的:

如果不起作用:请确保在添加src/global.css时重新启动开发

注意:这里的覆盖面是全局覆盖，写出来的风格会影响到项目的所有页面，建议在项目前期统一编写修改。后期尽量不要做剪辑。所有编辑都应该及时通知其他开发人员。

总结一下我们到目前为止学到的东西:

要使用CSS模块，请使用类似导入样式的东西。。/index . CSS & # 8217；的介绍方法，如果一个文件不想使用CSS Modules，可以使用像import & # 8216。/index . CSS & # 8217；介绍的方式。

要使用全局样式，请用src/global.css编写CSS文件

资源、元数据和CSS

风格技巧

以下是一些可能对你有帮助的风格技巧。

您可以浏览以下部分，而无需修改我们的应用程序！

使用类名库切换类

类名是一个库，允许您轻松切换类名。您可以使用npm安装类名或添加类名来安装它。

请查看其文档了解详细信息，但以下是基本用法:

假设您想要创建一个接受类型的Alert组件，类型可以是& # 8217；成功& # 8217；或者& # 8216；错误& # 8217；。

如果是& # 8216；成功& # 8217；您希望文本颜色为绿色。如果是& # 8216；错误& # 8217；您希望文本的颜色是红色。

可以先编写一个CSS模块(比如alert.module.css)，如下图:

少用

Alita允许您从包装盒中导入[较少]的文件。您可以直接使用Less文件，并使用CSS模块，如演示中所示。