如何在 IntelliJ 上运行 Elixir 和 Phoenix 程序？

2022-09-28 15:57:12 浏览数 (2)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

Elixir 是一门非常强大的 函数式 编程语言，Elixir 社区构建了一个插件，该插件可以在 Jetbrains 的 IDE 上运行 Elixir 程序且是用于所有的 Jetbrains 产品。

在开始之前确定你已经安装了 Elixir，安装 Elixir 同时会安装 Erlang，因为 Elixir 是运行在 Erlang 虚拟机上（BEAM）。

如果你的开发平台是 MAC，可以通过 brew install 安装最新版的 Elixir，并且通过 elixir --version 命令来查看安装的 Elixir 的版本号。

由于 Elixir 运行在 BEAM 上，所以我们需要在 IntelliJ 上能够查看到 Elixir 和 Erlang SDK，我们需要通过 IntelliJ IDEA -> Preferences -> Plugins 安装两个插件，第一个是 Erlang plugin；第二个是 Elixir plugin。这两个查看都需要在 IntelliJ 上配置相应的 SDK。

打开 IntelliJ 并点击 New Project，选择创建 Elixir 项目，在 IntelliJ Ultimate 版本中还可以选择数据库。

之后会选择项目的 SDK，安装的 Elixir Plugin 可以检测到你安装的 Elixir SDK，并且可以将这个 SDK 设置为默认的 SDK。

然后你就可以输入项目的一些详细信息，最后点击 Finish 即可。

项目创建完成之后，你可以看到在该项目中包含了一个 lib 文件夹，用于保存你的文件（Elixir code） 和一个 .iml 结尾的 IntelliJ 配置文件。

我们继续在 lib 文件夹下添加一个新的文件，并使它在终端中打印信息

现在我们需要对项目做一些配置，在 IDE 窗口的最上方或者 Run -> Edit -> Configurations 进行配置。选择 Elixir 配置并添加文件的路径以及给这个 Configuration 命名。

点击 IntelliJ 窗口上方的绿色按钮即可运行 hello.ex 文件

如何运行 Phoenix

Elixir 插件同时也支持运行 Phoenix Web 框架，你需要先安装 Phoenix 并且通过命令行创建一个新的项目并构建相关的项目依赖。

在安装了 Elixir 和 Erlang 插件的前提下打开使用 IntelliJ 打开 Phoenix Web 项目，项目会自动设置 Elixir 和 Erlang 的 SDK，如果没有你可以通过 File -> Project Structure -> SDKs 设置。

与 Elixir 项目一样，我们需要先进行运行配置，但是这一次我们要选择 Elixir Mix 因为我们要运行 mix 命令，在配置 mix arguments fields 中输入 phx.server

启动项目

浏览器访问 http://localhost:4000

错误解决

Elixir 和 Erlang 插件在安装之后可能出现无法正常运行的情况，可以通过以下方式解决：

如果出现一些无法找到文件或者模块的错误，可以通过 File -> Invalidate Caches/Restart 清除缓存并重启 IntelliJ。

如果出现无法找到 Erlang SDK 的错误，可以去通过 File -> Project Structure -> SDKs -> Elixir 来确认 Erlang Plugin 是否识别到 Erlang SDK 的安装。

External Helps

Elixir 和 Erlang 插件

创建 Phoenix 项目使用命令 mix phx.new projectName

mix deps.get 命令可以安装相关依赖。

自定义 Phoenix 页面

lib 文件夹下保存着 Elixir 代码，config 文件夹下保存着各种配置，assets 文件夹下存放的是静态文件。Phoenix 框架也是 MVC 架构。

首先在 lib/phx_quickstart_web/router.ex 文件中增加一个自定义的路由 /zulu，该路由映射到 ZuluController 中的 zulu 函数

接着在 lib/phx_quickstart_web/controllers 增加一个 ZuluController，并定义 zulu 函数，该函数渲染到 zulu.html 页面。

代码语言：javascript复制
defmodule PhxQuickstartWeb.ZuluController do
  use PhxQuickstartWeb, :controller

  def zulu(conn, _params) do
    render(conn, "zulu.html")
  end
end
复制代码

然后在 lib/phx_quickstart_web/views 中增加一个 zulu_views.ex，代码如下：

代码语言：javascript复制
defmodule PhxQuickstartWeb.ZuluView do
  use PhxQuickstartWeb, :view
end
复制代码

最后在 lib/phx_quickstart_web/templates 中增加 zulu/zulu.html.heex，代码如下：

代码语言：javascript复制
<section class="phx-hero">
    <h2>Hello World, from Phoenix!</h2>
</section>
复制代码

浏览器访问 http://localhost:4000/zulu

大功告成

本文部分翻译自 gideonbrimleaf.github.io/2021/03/05/…

erlang sdk ide html

0 人点赞