今天学习ElasticSearch相关项目，跟着B站狂神说做了一个京东搜索的实战项目，其中有一个直接将vue.js和axios引入到html中并结合thymeleaf使用的方法挺好，在此做一个记录。

1.下载vue.js与axios.js

npm init

首先必须确保先安装node.js环境，新建一个英文的文件夹，取名newvue，然后进入该文件夹打开cmd命令行，输入

C:\Users\Administrator\Desktop\new_vue>npm init

一路回车，遇到"Is this OK?"，填入"ok"。

下载vue.js和axios.js

还是在该文件夹，cmd命令行输入：

npm install vue

等待下载，完毕合再输入

npm install axios

下载完毕后，该文件夹中是这样的：

2. 将vue.js与axios.js引入到springboot项目中

这里引入min版，放入resources/static/js中

3.html页面中引入

index.html页面放在templates目录中，打开index.html，写上以下两行代码：

  <!--前端使用vue 前后端分离-->
    <script th:src="@{/js/axios.min.js}"></script>
    <script th:src="@{/js/vue.min.js}"></script>

引入后就可以使用vue与axios了

4. 创建vue

要使用vue必须在页面中首先创建一个vue对象

<script>
    new Vue({
        el: '#app',    //对接一个最大范围的div
        data:{
            keyword: '',  //搜索的关键字
            results: []  //搜索的结果
        },
        methods:{
            searchKey(){
                var keyword=this.keyword;
                console.log(keyword);
                //对接后端接口
                axios.get('/search/'+keyword+'/1/20').then(res=>{
                    console.log(res);
                    this.results=res.data;
                })
            }
        }
    })

</script>

注意将vue对象绑定到div，这里选择最大范围的div

这样就可以在html中运用vue的双向绑定与其他的一些功能了，非常方便，比如：

还有循环：

5. 小结

之前做前后端分离，没有这样把thymeleaf与vue结合起来在单页面用的，通常都是直接在vscode写vue相关的代码，可能是对vue理解不深吧（vue只简单学了一下，惭愧），原来可以直接与thymeleaf这样结合起来用，挺好的，在此做一个笔记。推荐大家看看狂神说java系列课程，讲得很不错。