新建 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/elm
elm package install -y
将 web/templates/page/index.html.eex 文件的内容改为
<div id="elm-container"></div>
修改 web/templates/layout/app.html.eex 文件中的 container, 删除默认的样式
<div class="container">
<main role="main">
<%= render @view_module, @view_template, assigns %>
</main>
</div> <!-- /container -->
在 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!"
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。