运行 Vuetify Vert.x (w/ES4X)
Running Vuetify on Vert.x (w/ES4X)
我想知道是否可以 运行 使用 Vert.x Vuetify(开箱即用)。我玩了一会儿,我没有看到一个简单的方法,但也许我遗漏了一些东西。
来源:
步骤:
创建开箱即用的 Vuetify:
npm install @vue/cli -g
vue create my-app
cd my-app
vue add vuetify
通过 运行在 Node
中安装它来测试它是否工作
npm run start
当我查看 http://localhost:8080(使用节点)时,它看起来不错。所以我
在 dist 文件夹中创建编译版本
npm run build
现在我想尝试让它在 Vert.x 中工作所以我添加了 ES4X,它应该允许 ES 5+ js 代码
npm install -g es4x-pm
es4x init
npm install @vertx/unit --save-dev
npm install @vertx/core --save-prod
npm install @vertx/web --save-prod
npm install
创建一个 index.js 文件,以便 vert.x 服务器用于 index.html
vertx.createHttpServer().requestHandler(function (req){
req.response().sendFile("dist/index.html");
}).listen(8080);
运行 Vert.x
npm start
当我查看 http://localhost:8080 时,它没有按预期显示。它看起来像一个空白页。当我在浏览器中查看页面的源代码时,它显示了 index.html 文件的内容。所以我知道它正在加载它,只是不解释它。当我查看控制台时,我看到一个日志条目,上面写着语法错误:预期的表达式,得到 '<'
注意 - 我想避免走 Vuetify 快速启动 link 上显示的 'CDN install' 路线。我的项目相当复杂,我只是想测试 Vuetify 本身如何与 Vert.x 一起工作,然后再绑定所有其他依赖项
您添加了一个简单的请求处理程序,将其视为仅使用核心 nodejs
模块。为了提供多个文件和资源,您应该使用 vertx-web
(您已经安装)。在这种情况下,您的代码应该是:
import { Router, StaticHandler } from '@vertx/web';
// router acts like express if you're familiar with it
const app = Router.router(vertx);
// for any HTTP GET request this will be your
// first handler "dist" is your static files root dir
app.get().handler(StaticHandler.create("dist"));
// add more handlers as needed...
vertx.createHttpServer()
.requestHandler(app)
.listen(8080);
所以现在您的所有静态文件都应该正确提供...
不确定我是否在摸索这个问题。
Vuetify 运行在浏览器,Es4x 运行在服务器。
您只需要提供静态 'dist' 文件夹的方法,如上所述。
ps:我假设您没有进行 server-side 渲染,在这种情况下,我不确定 es4x 是否会工作(可能)。
我想知道是否可以 运行 使用 Vert.x Vuetify(开箱即用)。我玩了一会儿,我没有看到一个简单的方法,但也许我遗漏了一些东西。
来源:
步骤:
创建开箱即用的 Vuetify:
npm install @vue/cli -g
vue create my-app
cd my-app
vue add vuetify
通过 运行在 Node
中安装它来测试它是否工作 npm run start
当我查看 http://localhost:8080(使用节点)时,它看起来不错。所以我 在 dist 文件夹中创建编译版本
npm run build
现在我想尝试让它在 Vert.x 中工作所以我添加了 ES4X,它应该允许 ES 5+ js 代码
npm install -g es4x-pm
es4x init
npm install @vertx/unit --save-dev
npm install @vertx/core --save-prod
npm install @vertx/web --save-prod
npm install
创建一个 index.js 文件,以便 vert.x 服务器用于 index.html
vertx.createHttpServer().requestHandler(function (req){
req.response().sendFile("dist/index.html");
}).listen(8080);
运行 Vert.x
npm start
当我查看 http://localhost:8080 时,它没有按预期显示。它看起来像一个空白页。当我在浏览器中查看页面的源代码时,它显示了 index.html 文件的内容。所以我知道它正在加载它,只是不解释它。当我查看控制台时,我看到一个日志条目,上面写着语法错误:预期的表达式,得到 '<'
注意 - 我想避免走 Vuetify 快速启动 link 上显示的 'CDN install' 路线。我的项目相当复杂,我只是想测试 Vuetify 本身如何与 Vert.x 一起工作,然后再绑定所有其他依赖项
您添加了一个简单的请求处理程序,将其视为仅使用核心 nodejs
模块。为了提供多个文件和资源,您应该使用 vertx-web
(您已经安装)。在这种情况下,您的代码应该是:
import { Router, StaticHandler } from '@vertx/web';
// router acts like express if you're familiar with it
const app = Router.router(vertx);
// for any HTTP GET request this will be your
// first handler "dist" is your static files root dir
app.get().handler(StaticHandler.create("dist"));
// add more handlers as needed...
vertx.createHttpServer()
.requestHandler(app)
.listen(8080);
所以现在您的所有静态文件都应该正确提供...
不确定我是否在摸索这个问题。
Vuetify 运行在浏览器,Es4x 运行在服务器。
您只需要提供静态 'dist' 文件夹的方法,如上所述。
ps:我假设您没有进行 server-side 渲染,在这种情况下,我不确定 es4x 是否会工作(可能)。