YaoDocs

外观

导航栏

应用安装 ​

此应用是一个基于 yao 的应用，第一步需要安装 yao 引擎程序。

由于应用中使用了 yao 的最新特性，需要使用到 yao 0.10.4 版本程序。

在 yao 0.10.4 中可以使用 require 进行脚本的引用，可以在一定程度上提高 js 脚本的运行效率。

另外还可以直接使用 typescript 脚本，可以在一定程度上减少编码时的错误率。

yao 下载 ​

使用官方的开发版本，https://github.com/YaoApp/yao/actions/workflows/build-linux.yml

使用本项目打包的版本，https://github.com/wwsheng009/yao/releases

下载 yao 程序后，把程序丢到用户执行目录，通常是/usr/bin/目录，或是把执行程序放入环境变量 path 中。

下载本项目 ​

yao-amis-admin ​

sh
git clone https://github.com/wwsheng009/yao-amis-admin.git

必须下载 amis sdk，文件是 sdk.tar.gz。下载解压后放在yao-amis-admin/public/amis目录

sh
https://github.com/baidu/amis/releases


# 目录结构如下
├── public
│   ├── amis //sdk目录
│   │   ├── schema.json
│   │   └── sdk
│   │       ├── sdk.css
│   │       ├── sdk.js

有了 sdk 后就可以直接使用 yao 运行项目。

这里可以使用 yao 的向导进行安装或是复制项目中的示例配置。

sh

# option1
cd yao-amis-admin
yao start

# option2

cd yao-amis-admin
cp .sqlite.env .env

yao start

成功后浏览器打开地址http://localhost:5099会看到登录界面。

amis 编辑器 ​

amis 编辑器应用下载，用于图形化编辑前端页面，已经针对于此项目作了登录集成，推荐使用，这是一个 react 项目，下载后编译。编译后直接把amis-editor目录复制到yao-amis-admin的 public 目录。

sh
git clone https://github.com/wwsheng009/amis-editor-yao

# 不要使用pnpm
cd amis-editor-yao
npm install

# 开发
npm run dev

# 构造
npm run build

soybean-admin ​

soybean-admin 作为一个可选项，解决 amis sdk 无法深度定制的问题。

soybean-admin 基于 vue 的管理前端，推荐。这个项目也依赖于 amis，解决 amis 依赖有两种方式，把 sdk 复制一份到 public 目录。

这个项目基于 vue 与 amis sdk 进行集成，如果是 react 项目，可以直接使用 amis 的 react 开发包，不需要这样解决方案。

sh
git clone https://github.com/wwsheng009/soybean-admin-amis-yao

# 复制amis sdk
# 目录结构如下
├── public
│   ├── amis //sdk目录
│   │   ├── schema.json
│   │   └── sdk
│   │       ├── sdk.css
│   │       ├── sdk.js

cd soybean-admin-amis-yao

# 开发

pnpm run dev

# 构造
pnpm run build

注意：构造后的文件会存放在 dist 目录，把目录复制到yao-amis-admin的 public/soy-admin目录。还需要调整 public/soy-admin 目录下的 index.html 文件中的 amis 的引用。要不然就会存在多份 amis sdk。把/soy-admin/amis,修改成/amis

调整前：

html
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/soy-admin/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>YaoAdmin</title>
  <link rel="stylesheet" href="/soy-admin/amis/sdk/sdk.css" />
  <!-- <link rel="stylesheet" href="/amis/sdk/dark.css" /> -->
  <link rel="stylesheet" href="/soy-admin/amis/sdk/helper.css" />
  <link rel="stylesheet" href="/soy-admin/amis/sdk/iconfont.css" />
  <link rel="stylesheet" href="/soy-admin/style_dark.css" />
  <script type="module" crossorigin src="/soy-admin/assets/index.js"></script>
  <link rel="stylesheet" href="/soy-admin/assets/index8.css" />
</head>

调整后：

html
<head>
  <meta charset="UTF-8" />
  <link rel="icon" href="/soy-admin/favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>YaoAdmin</title>
  <link rel="stylesheet" href="/amis/sdk/sdk.css" />
  <!-- <link rel="stylesheet" href="/amis/sdk/dark.css" /> -->
  <link rel="stylesheet" href="/amis/sdk/helper.css" />
  <link rel="stylesheet" href="/amis/sdk/iconfont.css" />
  <link rel="stylesheet" href="/soy-admin/style_dark.css" />
  <script type="module" crossorigin src="/soy-admin/assets/index.js"></script>
  <link rel="stylesheet" href="/soy-admin/assets/index8.css" />
</head>

完整的目录 ​

一个完整的配置目录如下：

sh
├── public
│   ├── amis        //amis-sdk
│   ├── amis-admin
│   ├── amis-editor //amis编辑器,目录名称不要修改
│   ├── favicon.ico
│   ├── image
│   ├── index.html
│   └── soy-admin  //soy-admin