所有路径都相对于项目根目录,例如
pom.xml文件在Maven项目中的位置。
使用导入的Javascript
@JsModule使用严格模式。除其他外,这意味着必须在window对象上定义全局变量
window.x = ...,而不是
just x = ...。
Vaadin 14 with npm
Non-Spring Boot projects (war packaging)
- CSS files
- @Cssimport(“./my-styles/styles.css”)[1]
/frontend/my-styles/styles.css
Javascript and Polymer templates
- @JsModule(“./src/my-script.js”)[1]
/frontend/src/my-script.js
Static files, e.g. images
- new Image(“img/flower.jpg”, “A flower”)
- /src/main/webapp/img/flower.jpg
Spring Boot projects (jar packaging)
- CSS files
- @Cssimport(“./my-styles/styles.css”)[1]
/frontend/my-styles/styles.css
Javascript and Polymer templates
- @JsModule(“./src/my-script.js”)[1]
/frontend/src/my-script.js
Static files, e.g. images
- new Image(“img/flower.jpg”, “A flower”)
- /src/main/resources/meta-INF/resources/img/flower.jpg
Add-ons (jar packaging)
- CSS files
- @Cssimport(“./my-styles/styles.css”)[1]
/src/main/resources/meta-INF/resources/frontend/my-styles/styles.css
Javascript and Polymer templates
- @JsModule(“./src/my-script.js”)[1]
/src/main/resources/meta-INF/resources/frontend/src/my-script.js
Static files, e.g. images
- new Im`age(“img/flower.jpg”, “A flower”)
- /src/ma`in/resources/meta-INF/resources/img/flower.jpg
Vaadin 10-13,Vaadin 14在兼容模式下
非spring启动项目(战争包装)
- CSS files
- @StyleSheet(“css/styles.css”)[2]
/src/main/webapp/frontend/css/styles.css
Polymer templates, custom-style and dom-module styles
- @Htmlimport(“src/template.html”)
/src/main/webapp/frontend/src/template.html
Javascript
- @Javascript(“js/script.js”)[3]
/src/main/webapp/frontend/js/script.js
Static files, e.g. images
- new Image(“img/flower.jpg”, “A flower”)
- /src/main/webapp/img/flower.jpg
Spring Boot projects and add-ons (jar packaging)
- CSS files
- @StyleSheet(“css/styles.css”)[2]
/src/main/resources/meta-INF/resources/frontend/css/styles.css
Polymer templates, custom-style and dom-module styles
- @Htmlimport(“src/template.html”)
/src/main/resources/meta-INF/resources/frontend/src/template.html
Javascript
- @Javascript(“js/script.js”)[3]
/src/main/resources/meta-INF/resources/frontend/js/script.js
Static files, e.g. images
- new Image(“img/flower.jpg”, “A flower”)
- /src/main/resources/meta-INF/resources/img/flower.jpg
Footnotes
[1]的
@JsModule和
@Cssimport注解也可以用于从包NPM导入。在这种情况下,路径定义为
@JsModule("@polymer/paper-input")或@Cssimport("some-package/style.css")。引用本地前端目录的路径应带有前缀./[2]所述的
@StyleSheet注释也可以在Vaadin 14被用于与NPM。可以使用与V10-V13中相同的路径,包括
context://protocol @StyleSheet("context://style.css"),它可以解析相对于Web应用程序上下文路径的路径,就像其他静态文件一样。以这种方式包含的样式可能会导致Web组件出现问题。[3]所述的
@Javascript注释也可以在Vaadin 14被用于与NPM。然后应使用V14 /frontend文件夹。



