如何将旧的liveview 应用程序转换为新的Phoenix 版本?

How to convert old liveview app to new Phoenix version?

背景

我正在将一个旧的 LiveView 应用程序移植到最新版本的 Phoenix (v1.6.5)。作为对整个事物的新手,我期待 运行 mix phx.new web_interface --live --no-ecto 并找到与我之前的结构相似的结构:

├───assets
│   ├───css
│   ├───js
│   └───static
│       └───images
├───config
├───lib
│   ├───web_interface
│   └───web_interface_web
│       ├───channels
│       ├───live
│       ├───templates
│       │   └───layout
│       └───views
└───priv
    └───static
        └───assets

相反,我得到了:

├───assets
│   ├───css
│   ├───js
│   └───vendor
├───lib
│   └───web_interface
│       ├───controllers
│       ├───templates
│       │   ├───layout
│       │   └───page
│       └───views
└───priv
    ├───gettext
    │   └───en
    │       └───LC_MESSAGES
    └───static
        ├───assets
        └───images

少了点东西

仔细观察,您现在会发现我丢失了几个重要的文件夹,即 web_interface_weblive 文件夹。

所以现在我明白了我的印象是我错过了一个巨大的里程碑升级或者我的 mix phx.new 命令出了点问题。

问题

如果您运行正在使用 Elixir 1.13 和 Phoenix 1.6.5,根据您提供的命令 mix phx.new web_interface --live --no-ecto,应该有一个 web_interfaceweb_interface_web 目录(我将该命令的输出放在下面)。在您使用 mix phx.gen.live Accounts User users name:string age:integer

生成您的第一个 LiveView 视图之前,不会创建 live 目录

这看起来像是 Phoenix 或 Elixir 的旧版本。您可能在引用不同版本的 Elixir 或 Phoenix 的不同 shell 会话中生成了项目。另外,mix.exs 说的是什么版本的 Phoenix?

使用 elixir --version

检查您的 Elixir 版本
➜  projects$ elixir --version
Erlang/OTP 24 [erts-12.0.3] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit] [dtrace]

Elixir 1.13.0 (compiled with Erlang/OTP 24)

然后检查你用mix archive

安装的phx包的版本
➜  projects$ mix archive      
* hex-1.0.1
* phx_new-1.6.5
Archives installed at: /Users/cj1/.kiex/mix/archives/elixir-1.13.0

如果需要重新安装phx包,运行 (mix archive.install hex phx_new docs)

➜  projects$ mix archive.install hex phx_new

Resolving Hex dependencies...
Dependency resolution completed:
New:
  phx_new 1.6.5
* Getting phx_new (Hex package)
All dependencies are up to date
Compiling 11 files (.ex)
Generated phx_new app
Generated archive "phx_new-1.6.5.ez" with MIX_ENV=prod
Are you sure you want to install "phx_new-1.6.5.ez"? [Yn] y
* creating /Users/cj1/.kiex/mix/archives/elixir-1.13.0/phx_new-1.6.5

这是我在 运行 你的命令时得到的结果:

➜  projects$ mix phx.new web_interface --live --no-ecto
* creating web_interface/config/config.exs
* creating web_interface/config/dev.exs
* creating web_interface/config/prod.exs
* creating web_interface/config/runtime.exs
* creating web_interface/config/test.exs
* creating web_interface/lib/web_interface/application.ex
* creating web_interface/lib/web_interface.ex
* creating web_interface/lib/web_interface_web/views/error_helpers.ex
* creating web_interface/lib/web_interface_web/views/error_view.ex
* creating web_interface/lib/web_interface_web/endpoint.ex
* creating web_interface/lib/web_interface_web/router.ex
* creating web_interface/lib/web_interface_web/telemetry.ex
* creating web_interface/lib/web_interface_web.ex
* creating web_interface/mix.exs
* creating web_interface/README.md
* creating web_interface/.formatter.exs
* creating web_interface/.gitignore
* creating web_interface/test/support/channel_case.ex
* creating web_interface/test/support/conn_case.ex
* creating web_interface/test/test_helper.exs
* creating web_interface/test/web_interface_web/views/error_view_test.exs
* creating web_interface/lib/web_interface_web/controllers/page_controller.ex
* creating web_interface/lib/web_interface_web/views/page_view.ex
* creating web_interface/test/web_interface_web/controllers/page_controller_test.exs
* creating web_interface/test/web_interface_web/views/page_view_test.exs
* creating web_interface/assets/vendor/topbar.js
* creating web_interface/lib/web_interface_web/templates/layout/root.html.heex
* creating web_interface/lib/web_interface_web/templates/layout/app.html.heex
* creating web_interface/lib/web_interface_web/templates/layout/live.html.heex
* creating web_interface/lib/web_interface_web/views/layout_view.ex
* creating web_interface/lib/web_interface_web/templates/page/index.html.heex
* creating web_interface/test/web_interface_web/views/layout_view_test.exs
* creating web_interface/lib/web_interface/mailer.ex
* creating web_interface/lib/web_interface_web/gettext.ex
* creating web_interface/priv/gettext/en/LC_MESSAGES/errors.po
* creating web_interface/priv/gettext/errors.pot
* creating web_interface/assets/css/phoenix.css
* creating web_interface/assets/css/app.css
* creating web_interface/assets/js/app.js
* creating web_interface/priv/static/robots.txt
* creating web_interface/priv/static/images/phoenix.png
* creating web_interface/priv/static/favicon.ico

Fetch and install dependencies? [Yn] y
* running mix deps.get
* running mix deps.compile

We are almost there! The following steps are missing:

    $ cd web_interface

Start your Phoenix app with:

    $ mix phx.server

You can also run your app inside IEx (Interactive Elixir) as:

    $ iex -S mix phx.server