Vue： ------ idea用springboot-web框架开发第一个vue页面

最新推荐文章于 2023-03-20 23:45:06 发布

姜同学的学习笔记

最新推荐文章于 2023-03-20 23:45:06 发布

阅读量493

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45764675/article/details/108724585

版权

Vue 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

官网链接

Vue

下载Vue.js

Vue.js
Vue.min.js

搭建环境

创建java-web环境
格式
pom.xml引入配置

  <parent>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-parent</artifactId>
    <version>2.1.5.RELEASE</version>
  </parent>

	<dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!--使内嵌的tomcat支持解析jsp-->
    <dependency>
      <groupId>org.apache.tomcat.embed</groupId>
      <artifactId>tomcat-embed-jasper</artifactId>
    </dependency>

    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-tomcat</artifactId>
    </dependency>

    <!--引入jsp的支持-->
    <dependency>
      <groupId>jstl</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

	<plugins>
      <plugin>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-maven-plugin</artifactId>
      </plugin>
    </plugins>

启动类

package com.jsy;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class VueApplication {
    public static void main(String[] args) {
        SpringApplication.run(VueApplication.class,args);
    }
}

application.yml配置文件

server:
  port: 8081
  servlet:
    jsp:
      init-parameters:
       development: true
    context-path: /

启动注意

HelloWorld.html

因为我开发有网络没有下js 直接用的远程

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

注意要将Vue的代码放到div的后面，读取代码是从上到下的，只有先知道了div才能对其做操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_1</title>
</head>
<body>

    <div id="app01">
        {{message}},{{username}},{{password}}
        <br/>
        <span>
            {{username}}
        </span>
        <h4>{{user}}</h4>
        <h4>年龄：{{age}}</h4>
        <h4>用户名称：{{user.name}} 性别: {{user.sex}}</h4>
        <h4>{{list}}</h4>
        <h4>{{list[0]}},{{list[1]}},{{list[2]}}</h4>
        <h4>{{usersList[0].name}},{{usersList[1].age}},{{usersList[2].name}}</h4>
    </div>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app01",
            data: {
                message: "你好！今天是2020年9月21日 星期一",
                username:"hr",
                password:"hr",
                user:{name:"admin",sex:"男"},
                age:23,
                list:["辽宁","吉林","黑龙江"],
                usersList:[{name:"张三",age: 21},{name:"李四",age: 23},{name:"王五",age: 25}]
            }
        });
    </script>
</body>
</html>

在这里插入图片描述

Vue.js

https://cdn.jsdelivr.net/npm/vue/dist/vue.js
也可以点击此处下载vue.js

姜同学的学习笔记

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue： ------ idea用springboot-web框架开发第一个vue页面

官网链接Vue下载Vue.jsVue.jsVue.min.js搭建环境创建java-web环境格式pom.xml引入配置 <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.5.RELEASE</ve
复制链接

扫一扫