怎么使用org.webjars里的Vue.js库导入
时间: 2024-05-12 18:19:02 浏览: 103
1. 在项目中添加WebJars依赖
在Maven项目中,可以在pom.xml文件中添加以下依赖:
``` xml
<dependency>
<groupId>org.webjars</groupId>
<artifactId>vue</artifactId>
<version>2.6.11</version>
</dependency>
```
在Gradle项目中,可以在build.gradle文件中添加以下依赖:
``` groovy
implementation 'org.webjars:vue:2.6.11'
```
2. 在HTML文件中引入Vue.js
``` html
<!DOCTYPE html>
<html>
<head>
<title>使用Vue.js</title>
<meta charset="UTF-8">
<script src="/webjars/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
```
在以上代码中,我们在HTML文件的头部引入了Vue.js库,即:
``` html
<script src="/webjars/vue/2.6.11/vue.min.js"></script>
```
然后在body中使用Vue.js创建了一个实例,并使用data属性绑定了一个message变量,最后通过Mustache语法将message变量的值显示在页面上。
需要注意的是,在上述代码中,我们使用了Vue.js的CDN链接。在实际的项目中,我们应该使用本地的WebJars库,即:
``` html
<script src="/webjars/vue/2.6.11/vue.min.js"></script>
```
阅读全文