【实战】从零开始打造一个低代码平台——1、创建应用

---

对这个系列感兴趣的可以关注订阅专栏：从零开始打造一个低代码平台

前言

这个系列通过实战从零开始打造一个低代码平台（类似于Anyui），会涵盖桌面端、前端和后端全栈的开发，测试以及部署。另外，还会有一部分内容是关于嵌入式方面的，可能会直接纳入到这个系列，或者另外开一个专题系列。涉及的内容比较多，集结了众多领域的技术栈。
大部分同学的工作一般都会专注在某个领域，对于这么多内容未必能一下子适应，尤其是从未接触过的内容。满汉全席固然好，但一次吃太多可能不利于消化，更有甚者，如果造成胃肠功能紊乱，那就得不偿失了。
所以，这个系列会以法餐的上菜方式，一道道上，先来点开胃菜，然后前菜，再来主菜，接着奶酪甜品咖啡……希望能让大家吃得开心，而且利于消化。

第一道，开胃菜。

---

一、技术选型

上菜之前，厨师还是会先啰嗦一番，总得先介绍一下食材，这里也不例外——技术选型。技术选型基本就确定了整个项目的雏形，包括应用框架和编程语言等。
现在各种编程语言、框架琳琅满目，各有各的优缺点，如何选择见仁见智，我们在这里不去过多的比较它们孰优孰劣，直接列出我们的选择。

1.1 桌面端框架

桌面端框架我们选择Tauri：基于rust编写，跨平台，体积小，速度快，权限管控严格……一句话，新来的，但很能打。

1.2 前端框架

React vs Vue? 当然还有很多其它的框架。这里我们选择React。如果你只用Vue，也可以，但我们的一些代码片段你就自行翻译成Vue吧。

1.3 编程语言

• 前面选了Tauri，自然绕不开rust，因为Tauri就是用rust写的。rust最出名的特性除了内存安全，速度快等，还有就是它的“劝退”功能，就是学习曲线比较陡。说到这，我们应该向鸠摩智学习，如果把一本《rust编程指南》的封面换成《易筋经》，他也会随便找个山洞就练起来了。所以一句话，get your hands dirty，动手就是了。
  不过好在，这个系列要在比较后面的章节才会用到rust。如果你不需要一些高级的功能，也可以不用rust，所以不用太担心。
• 前端无外乎就是Javascript vs Typescript。虽然你可以用Javascript，但还是强烈建议用Typescript，毕竟编译器能帮你发现很多问题，越到后面的环节发现问题和解决问题的成本都高很多。所以如果你还没有开始用Typescript，或者还没有习惯用，那就尽早用起来吧，以后你会发现自己无法自拔。

BTW，华为的仓颉语言是基于rust改造的，应用开发语言ArkTs是基于Typescript改造的，买二送二，很划算。

1.4 构建工具

Webpack, vite……我们用Vite，优点123，缺点123，就它了。

1.5 代码编辑器

这可以列出一箩筐，推荐VS Code，也可以选择自己喜欢的代码编辑器。
如果选用VS Code，那对应的插件可以装上去：

• IntelliCode
• prettier
• eslint
• rust-analyzer
• Tauri
• TONGYI Lingma or MarsCode
• ……

二、搭建开发环境

2.1 rust开发环境

这里是官网安装说明。

2.2 node开发环境

推荐使用nvm来管理node开发环境，方便做版本管理和切换。

2.3 git代码管理

如果谁还不会用git，私信我，我把祖传的《Git使用指南》送给他。

三、创建应用

能看到这里，说明你是一个有耐心的人，不错不错，有前途~
接下来就开始构建我们的第一个应用，几个命令就够了。

1 创建应用

$ cargo install create-tauri-app --locked
$ cargo create-tauri-app

然后根据提示选择前端语言、包管理器、前端框架等。
以下是我们的选择：

2 安装依赖

yarn

3 启动应用

yarn tauri dev

至此，我们一行代码未写，但已经有了一个可以运行的UI应用。

不过到这里还不算完，我们要把默认生成的界面换成我们自己的，创建一个真正属于自己的应用，当然，这里只会写一个很简单的界面。在后面的章节我们会慢慢去丰富这个应用。

四、构建第一个界面

现在的文件目录是这样的：

打开App.tsx，把文件内容改成：

import "./App.css";

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

export default App;

打开App.css，把文件内容改成：

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

这样，启动的UI应用界面就变成我们自己的了。

这个应用毫无用处，但好歹是我们播下的一颗种子，后面我们会慢慢浇灌这颗种子，让它长大开花，结出我们想要的果子。

---

总结

希望这道开胃菜能打开你的味蕾，让你对下道菜有所期待，如果没有，那是我的问题，留言告诉我吧。
虽然这一章构建的内容比较简单，但非常重要，这是后面章节的基础。接下去我们就在这个基础上一点一点地盖我们的大楼。