新建 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 文件的内容改为

修改 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!"

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

[elixir! #0016] 在 phoenix 项目里配置 elm相关推荐

在vue-cli创建的项目里配置scss
第一步,gitbash进入到项目目录 npm install node-sass --save-dev npm install sass-loader --save-dev 第二步:打开webpack ...
一文捋清项目里的各种配置，看了必懂！
点击关注公众号,实用技术文章及时了解来源:lepdou.github.io/blogs/config/config.html 引言项目开发中总是有各种各样的配置,对于程序开发新手来说,配置是摆在面 ...
SAP项目里的关键用户，兼职还是专职？
SAP项目里的关键用户,兼职还是专职? 每个SAP实施项目,都是相关企业里的一件大事.SAP项目牵涉到企业的所有最核心的业务部门,比如财务部门,供应链部门(采购,仓库和销售),生产部门,工程设施部门, ...
SAP MM Overall Level 审批的采购申请中行项目里的成本中心必须是同一个！
SAP MM Overall Level 审批的采购申请中行项目里的成本中心必须是同一个! 如下采购申请,系统找不到release strategy, 2个行项目中,cost center分别是463 ...
Web框架之Django_02基本操作（Django项目启动配置、数据库连接、orm、增删改查）
阅读目录摘要: Django项目简单现实过程 pycharm连接数据库 Django之orm简单操作增删改查一.新建Django项目.配置.设置: 新建Django项目:(为了熟悉Django操作 ...
idea部署tomcat项目时，在项目里打断点不能拦截
idea部署tomcat项目时,在项目里打断点不能拦截以下内容都是基于我自己的项目(如未解决道友们的问题,请别介意) idea部署tomcat项目时,在项目里打断点不能拦截,工作中遇到的问题,记录一 ...
pycharm导入python环境是空的_PyCharm导入python项目并配置虚拟环境的教程详解
PyCharm导入python项目并配置虚拟环境的教程详解进入PyCharm后,点击File→Open,然后在弹窗中选择需要导入项目的文件夹: 打开了python项目后,需要配置该项目对应的pyth ...
Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...
Java servlet项目里的web.xml
Created by Wang, Jerry, last modified on Jul 25, 2016 web.xml配置 <context-param> <param-name ...

[elixir! #0016] 在 phoenix 项目里配置 elm