简单配置Vue.js（Idea）

背景信息

使用Idea搭建项目，Spring Initializr生成项目结构，前端使用Vue.js框架，下面是快速跳转入口，如有需要，请点击进行快速跳转
背景信息
 环境介绍
 项目搭建
 代码
 结语

环境介绍

操作系统：Windows10
Idea:2020.1-x64
Maven:3
Vue:2.6.11

项目搭建

打开Idea,新建Springboot项目，项目名为VueDemo
下载最新稳定版的Vue.js

新建.html文件，使用Vue.js语法操作数据

将下载好的Vue.js放到[resource]目录下的[static]里，在[templates]文件夹下创建vueIndex.html文件，然后在<script src=""></script>中将文件加载进来。

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/vue.js"></script>
<script>
    window.onload = function(){
        // vue.js的代码开始于一个Vue对象。所以每次操作数据都要声明Vue对象开始。
        var vm = new Vue({
            el:'#app',   // 设置当前vue对象要控制的标签范围。
            data:{  // data是将要展示到HTML标签元素中的数据。
                message: 'hello world!',
                htmlText: '<a href="www.baidu.com">baidu</a>',
            }
        });
    }
</script>
</head>
<body>
    <div id="app">
        <!-- {{ message }} 表示把vue对象里面data属性中的对应数据输出到页面中 -->
        <!-- 在双标签中显示数据要通过{{  }}来完成 -->
        <p>{{ message }}</p>

        <!--  js还有一种运算符,三元运算符,类似于python里面的三元表达式 -->
        <p>num是一个{{num%2==0?'偶数':'奇数'}}</p>

        <!-- 如果要输出data里面的数据作为表单元素的值，需要使用vue.js提供的元素属性v-model-->
        <input v-model="message" />

        <!-- 显示html数据要通过v-html属性来完成 -->
        <p v-html="htmlText"></p>
    </div>
</body>
</html>

配置application.properties

#html解析器，需添加
#<dependency>
#       <groupId>org.springframework.boot</groupId>
#       <artifactId>spring-boot-starter-thymeleaf</artifactId>
# </dependency>
#依赖
spring.thymeleaf.prefix=classpath:/templates/
#db
#应用名称
spring.application.name=springboot-demo
#访问端口号
server.port=8080
#编码格式
server.tomcat.uri-encoding=utf-8
#数据库相关配置
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/SpringBootDemo?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.max-idle=10
spring.datasource.max-wait=10000
spring.datasource.min-idle=5
spring.datasource.initial-size=5

#session生命周期
server.servlet.session.timeout=30m

# Hikari 数据源专用配置
spring.datasource.hikari.maximum-pool-size=20
spring.datasource.hikari.minimum-idle=5

# JPA 相关配置
spring.jpa.database-platform=org.hibernate.dialect.MySQL5InnoDBDialect
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update

#Mybatis
mybatis.type-aliases-package=com.mapper

运行

恭喜！:)

代码

请点击传送门前往Github项目—>

结语

感谢阅读我的博客，希望能给你带来帮助。:) @jASSSSSSON

最后修改于 2020-08-15

背景信息

环境介绍

项目搭建

打开Idea,新建Springboot项目，项目名为VueDemo

下载最新稳定版的Vue.js

新建.html文件，使用Vue.js语法操作数据

配置application.properties

运行

代码

结语