Phoenix 1.6使用esbuild而不是Webpack。我找不到任何关于如何使用Phoenix 1.6和esbuild设置Vue.js(版本2或3(的示例。
如果有人能一步一步地描述如何做到这一点,我将非常感谢。谢谢
最终的工作代码可以在这里找到:https://github.com/weeksseth/phoneix_vue_chat
创建Phoenix项目
假设您已经安装了Elixir、Hex和Phoenix(v1.6+(,请使用mix phx.new <project_name>
创建一个新的Phoenix项目。我添加了--no-ecto
标志,因为我现在没有使用数据库。
配置esbuild
将目录更改为assets文件夹并安装所需的依赖项:
npm i esbuild esbuild-vue -D
npm i vue ../deps/phoenix ../deps/phoenix_html ../deps/phoenix_live_view
创建一个assets/build.js
文件并添加以下代码:
const esbuild = require('esbuild')
const vuePlugin = require("esbuild-vue")
const args = process.argv.slice(2)
const watch = args.includes('--watch')
const deploy = args.includes('--deploy')
const loader = {
// Add loaders for images/fonts/etc, e.g. { '.svg': 'file' }
}
const plugins = [
vuePlugin()
]
let opts = {
entryPoints: ['js/app.js'],
bundle: true,
target: 'es2017',
outdir: '../priv/static/assets',
logLevel: 'info',
loader,
plugins
}
if (watch) {
opts = {
...opts,
watch,
sourcemap: 'inline'
}
}
if (deploy) {
opts = {
...opts,
minify: true
}
}
const promise = esbuild.build(opts)
if (watch) {
promise.then(_result => {
process.stdin.on('close', () => {
process.exit(0)
})
process.stdin.resume()
})
}
修改config/dev.exs
中的观察程序以使用节点:
config :hello, HelloWeb.Endpoint,
...
watchers: [
- esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}
+ node: ["build.js", "--watch", cd: Path.expand("../assets", __DIR__)]
],
...
在安装过程中修改mix.exs
中的别名以安装npm包:
defp aliases do
[
- setup: ["deps.get", "ecto.setup"],
+ setup: ["deps.get", "ecto.setup", "cmd --cd assets npm install"],
"ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
"ecto.reset": ["ecto.drop", "ecto.setup"],
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
- "assets.deploy": ["esbuild default --minify", "phx.digest"]
+ "assets.deploy": ["cmd --cd assets node build.js --deploy", "phx.digest"]
]
end
从中删除esbuild配置config/config.exs
:
- config :esbuild,
- version: "0.14.0",
- default: [
- args:
- ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
- cd: Path.expand("../assets", __DIR__),
- env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
- ]
最后从mix.exs
:中删除esbuild依赖项
defp deps do
[
{:phoenix, "~> 1.6.6"},
{:phoenix_html, "~> 3.0"},
{:phoenix_live_reload, "~> 1.2", only: :dev},
{:phoenix_live_view, "~> 0.17.5"},
{:floki, ">= 0.30.0", only: :test},
{:phoenix_live_dashboard, "~> 0.6"},
- {:esbuild, "~> 0.3", runtime: Mix.env() == :dev},
{:swoosh, "~> 1.3"},
{:telemetry_metrics, "~> 0.6"},
{:telemetry_poller, "~> 1.0"},
{:gettext, "~> 0.18"},
{:jason, "~> 1.2"},
{:plug_cowboy, "~> 2.5"}
]
end
添加Vue
在assets/js/components/Component.vue
中创建一个新的Vue组件,内容如下:
<template>
<h1>Hello world!</h1>
</template>
将assets/js/app.js
中的代码替换为以下代码:
import Component from "./components/Component.vue";
import Vue from "vue";
new Vue({
el: "#app",
render: (h) => h(Component),
});
在lib/<project_name>_web/templates/page/index.html.heex
的末尾添加以下代码:
<section id="app">
</section>
最后,用mix phx.server
启动Phoenix服务器,您应该会看到默认的Phoenix应用程序,其末尾有一个部分写着"问候地球"。如果您修改Vue组件并保存它,页面应该会自动重新呈现您的更改。