【原创】从零开始打造一个低代码平台-2

Devlab

于 2024-09-30 15:56:08 发布

阅读量446

点赞数 5

分类专栏：从零开始打造一个低代码平台文章标签： ui 物联网 iot 低代码

本文链接：https://blog.csdn.net/weixin_37760107/article/details/142644980

版权

从零开始打造一个低代码平台专栏收录该内容

2 篇文章 0 订阅

订阅专栏

从零开始打造一个低代码平台

第一章开始你的第一个跨平台桌面应用
第二章开始你应用的第一个布局

文章目录

从零开始打造一个低代码平台
前言
一、代码结构
二、应用布局
总结

前言

先哲曾说过，先点赞关注收藏后阅读是一种崇高的品德。

上一章我们依葫芦画瓢构建了一个UI应用，并没有过多的解释代码结构。这一章我们先来了解一下代码结构，然后开始我们的前菜——应用布局。

一、代码结构

在这里插入图片描述
项目根目录下：

src：这是前端的界面源码，跟传统的React项目没有什么区别
src/main.tsx：这是根节点，不用动它。
src/App.tsx：这是应用的入口文件，前一个章节我们修改的就是这个文件。
src/*.css：这是默认生成的样式文件，我们前面也改到其中一个。

App.tsx 和 *.css文件后面都会被我们改得面目全非的
src-tauri：这是Tauri相关的代码，涉及到rust，而且于我们当前的工作无关（暂时不需要去动到这部分代码），所以我们暂且按下不表。
package.json：这个是老朋友了，项目的配置文件
tsconfig.json/tsconfig.node.json：Typescript的配置文件
vite.config.ts：Vite的配置文件
yarn.lock：我们用的包管理器是yarn，所以对应的是yarn.lock，如果你用npm，则是package.lock

看来除了src-tauri，其它的都是React项目常规的目录和配置文件，这里我们就不展开说明了。至于src-tauri，等到后面的章节要用到rust了，我们再来介绍。

好，接下来开始我们的应用布局。

二、应用布局

应用的布局就像鱼的骨架，撑起整个应用的外观，一个好的布局会让你的应用看起来更加赏心悦目。
我们将采用一个比较传统的布局：

菜单栏：应用的完整功能列表（都法餐了没有菜单能行吗）
侧边栏：显示一些常用的内容
工具栏：常用的功能
状态栏：应用的状态或者其它可隐藏的信息
内容区：显示主要内容

嗯，这些就差不多了……

在动手改造布局之前，我们要先引入几个CSS框架 —— Scss/Tailwindcss/PostCSS。

2.1 引入Scss/Tailwindcss/PostCSS

安装依赖

yarn add sass tailwindcss postcss autofixer -D

// postscss.config.js
export default {
  plugins: {
    "tailwindcss/nesting": {},
    tailwindcss: {},
    autoprefixer: {},
  },
};

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

添加样式的入口文件

// ./styles/index.scss
@tailwind base;
@tailwind components;
@tailwind utilities;

我们一口气引入了我们将用到的CSS框架，这些框架各有各的用处，以后我们将在CSS的天下横行霸道。下面是一些简要介绍：

SCSS（Sassy CSS是一种CSS预处理器，它扩展了CSS的功能，提供了诸如变量、嵌套、混合（mixin）、继承和函数等特性，使得编写CSS代码更加高效和可维护。SCSS文件的扩展名为.scss，它使用类似于CSS的语法，但增加了一些额外的功能。
Tailwindcss 是一个流行的 CSS 框架，它提供了一系列的实用工具类，可以快速地构建自定义样式。
PostCSS是一个处理 CSS 的工具，它本身并不是一个预处理器，而是一个平台，可以通过插件来扩展其功能。PostCSS 的插件生态系统非常丰富，这些插件可以帮助开发者更高效地编写和维护 CSS 代码。

2.2 用Tailwindcss改造我们的第一个界面

还记得上一章节我们“设计”的第一个界面吗？

import "./App.css";

function App() {
  return (
    <div className="hello">
      Hello World
    </div>
  );
}

export default App;

.hello {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-size: 24px;
    font-weight: bold;
}

我们用Tailwindcss改造一下：

import "./styles/index.scss";

function App() {
  return (
    <div className="flex justify-center items-center h-screen text-[24px] font-bold">
      Hello World
    </div>
  );
}

export default App;

我们直接在*.tsx文件里用flex justify-center items-center h-screen text-[24px] font-bold替代了App.css里.hello的样式内容。App.css就不需要了，消灭了*.css文件！

如果你是第一次看到Tailwindcss，可能会担心“又一个框架，我学不动了”。其实Tailwindcss设计得非常好，刚开始可能要经常查阅，但很快就可以习惯，而且越发地欲罢不能。看下官方的文档。那*.css（或者*.less, *.scss）文件有什么不好吗，为什么不直接用我们熟悉的就好呢？大家可以先留言讨论一下，我们在以后的章节会来谈这个问题。

2.3 应用主布局 - MainLayout

有了前面的铺垫，我们直接端上：

// `borderClss`是我们为了演示用在index.scss里定义的，加了边框线条
import "./styles/index.scss";

function App() {

  return (
    <div className="flex flex-col h-screen">
      <div className="w-full borderClss">Menu</div>
      <div className="flex-1 flex w-full borderClss">
        <div className="w-[200px] borderClss">Sidebar</div>
        <div className="flex-1 flex flex-col borderClss">
          <div className="borderClss">Toolbar</div>
          <div className="flex-1 borderClss">Content</div>
          <div className="borderClss">Footer</div>
        </div>
      </div>
    </div>
  );
}

export default App;