我这里引用的是element UI框架，在这个里面的数据流动需要一下几个文件夹，也就是需要我们经常改动的地方。

下面以此介绍：

1.app.vue:最下面的app.vue是运行vue的主文件，例如在hbuider中直接运行这个文件就可以把前端跑起来

2.api文件夹：通过名字可以猜个差不多，api叫接口。他相当于桥梁，(在参数处)接收前端vue数据，(通过url)找到后端Controller，后端再把查询出的结果返回回来，最后return返回给vue。

文件夹中存放的是js文件，每个js文件都是连接后端（spring boot）的接口，如图1：  url：根据路径去controller里面找，具体后端controller怎么写能让他找到，一会儿会说。 method:就是get post 传递方式，具体区别可以去百度一下，，这里面要不就是get 要不就是post 。params:是传递的参数把vue给自己的参数传递给后端Controller。基本上是一个vue文件对应一个js文件，一个js文件里面有增删改查几种方法。

——>js文件 ：

——>vue文件：

3.router文件夹:英文翻译叫轨迹，其中有一个index.js文件夹，此文件的作用是路径。把每一个vue文件写在这里，这样程序就知道你写的vue页面时放在哪的。

4.views文件夹:叫视图，这里面放的就是我们总改动的也是显示在界面的页面，起到的作用就像html似的。

主页显示：里面跟html似的，由标签组成界面想要显示的样子；css：和传统的css一样；js：和传统的js一样

转自：https://www.cnblogs.com/zxrxzw/p/11304289.html