新建 phoenix 项目

$ mix phoenix.new elm_base

$ cd elm_base$ mix ecto.create

添加 elm-brunch

$ npm install --save-dev elm-brunch

打开 brunch-config.js 文件

往 paths/watched 添加 "web/elm”往 plugins 添加:elmBrunch: {elmFolder: "web/elm",mainModules: ["App.elm"],outputFolder: "../static/vendor"},

在命令行输入

mkdir web/elm && touch web/elm/App.elm

cd web/elmelm package install -y

将 web/templates/page/index.html.eex 文件的内容改为

<div id="elm-container"></div>

修改 web/templates/layout/app.html.eex 文件中的 container, 删除默认的样式

    
  
     
          <%= render @view_module, @view_template, assigns %>  
     
    
 
    

在 web/static/js/app.js 文件末尾添加

const elmDiv = document.querySelector("#elm-container");

const elmApp = Elm.App.embed(elmDiv);

启动 Phoenix 服务器

$ iex -S mix phoenix.server

编辑 elm 文件 web/elm/App.elm

module App exposing (..)

import Html exposing (text)

main =

text "Hello from Elm!"

看看浏览器里的效果吧! Happy coding phx-elm!