Econia参考前端的使用指南
原文作者 | Econia
编译 | 比特币行情网 范佳宝
前置条件及安装介绍
在本教程，你将学会：
1. 复制 Econia 参考前端
2. 在本地运行前端
3. 在 Vercel 上部署前端
前提：
1. VSCode, terminal，或者你喜欢的代码编辑器
2.已经安装 pnpm
第 1 步：克隆 Econia 前端 Github repo我们可以使用 git 命令克隆该 repo，将其 fork 到自己的 GitHub 账户，或者直接下载压缩包。
不知道如何复制 repo 的话，不妨看看 Github 上的指南。
第 2 步（可选）： 设置 TradingView 软件的 repo
默认情况下，Econia 参考前端中的 K 线功能依赖于封闭源的 TradingView 高级图表库。如果您无法访问私有存储库，则 K 线功能将依赖于开放源代码的轻量级图表存储库。
TradingView 高级图表库是 Econia 参考前端的一个子模块，用于显示特定市场的 K 线图。它初始被设置在 src/frontend/public/static 。
从本质上讲，将 TradingView 添加为子模块会克隆 TradingView 资源库并将其构建为静态文件。因此，您需要拥有 TradingView 资源库的访问权限。
要获得访问权限，您必须联系 TradingView 团队并等待批准。
步骤 3 ：打开你 econia-frontend 的 fork
首先查看代码的架构。您可以在此处查看每个页面和视图的组件和文件图：
第 4 步：在本地运行项目
1.导航至前端文件夹：
cd src/frontend
2.使用 pnpm 安装依赖项：
pnpm i
3.将 .env.example 复制到 .env.local：
cp -R.env.example.env.local
如果查看 .env 文件，您可能会注意到 REST URL 的环境变量设置为 https://aptos-testnet-econia.nodeinfra.com/。这是因为 Nodeinfra 运行着 Econia DSS 的社区部署，为 Econia 参考前端数据提供数据馈送。
变量名和其含义的对照
4.运行开发服务：
pnpm run dev
这样就可以在浏览器中打开 http://localhost:3000，看到本地版本的前端。
在 Vercel 上部署的步骤
Vercel 是一个用于前端开发和部署的用户友好型云平台。它通过自动化基于 Git 的部署和无服务器功能简化了部署流程。
前提：
1.Github 账户
2.Github 访问令牌
为了生成 GITHUB_ACCESS_TOKEN，你需要：
1.转至 https://github.com/settings/tokens/new
2.提供描述性说明
3.在有效期选择框中，选择“无有效期”
4.在 "选择范围 "部分，点击 "版本库 - 私有版本库的完全控制"，选择与版本库相关的所有选项
5.点击生成令牌
6.将生成的令牌复制到 Vercel 环境变量，并命名为 GITHUB_ACCESS_TOKEN
步骤 1 ：登录 Vercel步骤 2 ：创建 Vercel 项目
导入项目：在屏幕上单击 "添加新项目 "按钮，然后选择 "项目 "创建新项目，或点击 "导入项目 "导入 Github 仓库。
Vercel 网站会显示 Github 账户中的软件源列表。然后点击 econia-frontend 资源库上的导入按钮。
步骤 3 ：配置项目
项目名称： 项目名称是自动生成的，可以根据需要更改。
框架预设： 由于上述路径下的目录是 NextJS 项目，因此 Vercel 会自动检测其框架预设为 NextJS。
根目录： 在根目录字段，点击旁边的编辑按钮。这时会弹出一个模态窗口，让你选择源代码所在的目录。然后，您必须选择路径 econia-frontend/src/frontend，然后单击 "继续"。
编译和输出设置： 用以下操作重新设置安装命令：
环境准备：要在 Vercel 上进行部署，您需要设置以下环境变量：
变量名和其含义的对照
注意：如果无法访问私有 TradingView 子模块，则将 TRY_CLONING_TRADINGVIEW 设置为 "1 "以外的任意值。
环境变量： 将 .env.local 或 .env.example 文件中的所有环境变量粘贴到表格中。
小贴士：您无需每次复制并粘贴每个变量，只需复制您的文件并粘贴到输入框中即可。