如何将旧的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_web
和 live
文件夹。
所以现在我明白了我的印象是我错过了一个巨大的里程碑升级或者我的 mix phx.new
命令出了点问题。
问题
- 为什么这些文件夹不见了?
- 如何移植项目?现在有哪些等效文件夹?
如果您运行正在使用 Elixir 1.13 和 Phoenix 1.6.5,根据您提供的命令 mix phx.new web_interface --live --no-ecto
,应该有一个 web_interface
和 web_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
背景
我正在将一个旧的 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_web
和 live
文件夹。
所以现在我明白了我的印象是我错过了一个巨大的里程碑升级或者我的 mix phx.new
命令出了点问题。
问题
- 为什么这些文件夹不见了?
- 如何移植项目?现在有哪些等效文件夹?
如果您运行正在使用 Elixir 1.13 和 Phoenix 1.6.5,根据您提供的命令 mix phx.new web_interface --live --no-ecto
,应该有一个 web_interface
和 web_interface_web
目录(我将该命令的输出放在下面)。在您使用 mix phx.gen.live Accounts User users name:string age:integer
live
目录
这看起来像是 Phoenix 或 Elixir 的旧版本。您可能在引用不同版本的 Elixir 或 Phoenix 的不同 shell 会话中生成了项目。另外,mix.exs
说的是什么版本的 Phoenix?
使用 elixir --version
➜ 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