文章目录
对这个系列感兴趣的可以关注订阅专栏:从零开始打造一个低代码平台
前言
这个系列通过实战从零开始打造一个低代码平台(类似于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
vsTypescript
。虽然你可以用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
orMarsCode
- ……
二、搭建开发环境
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应用界面就变成我们自己的了。
这个应用毫无用处,但好歹是我们播下的一颗种子,后面我们会慢慢浇灌这颗种子,让它长大开花,结出我们想要的果子。
总结
希望这道开胃菜能打开你的味蕾,让你对下道菜有所期待,如果没有,那是我的问题,留言告诉我吧。
虽然这一章构建的内容比较简单,但非常重要,这是后面章节的基础。接下去我们就在这个基础上一点一点地盖我们的大楼。