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

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

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

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

image.png

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

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

image.png

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

image.png

image.png

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

image.png

如何运行 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

image.png

启动项目

image.png

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

image.png

错误解决

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

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

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

External Helps

Elixir 和 Erlang 插件

image.png

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

image.png

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

image.png

自定义 Phoenix 页面

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

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

image.png

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

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,代码如下:

defmodule PhxQuickstartWeb.ZuluView do
  use PhxQuickstartWeb, :view
end
复制代码

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

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

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

image.png

大功告成

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

猜你喜欢

转载自juejin.im/post/7130580097278410788