【九月打卡】第20天 SpringBoot+Vue3 项目实战（11）

课程名称：运行项目工程

课程章节：前后端项目分析（2）

主讲老师：神思者

前端项目

前端项目是基于Vue3.0构建的，所以目录结构上跟传统的Vue项目相同，下面是项目结构的截图。

序号		资源名称								作用
 1		package.json						前端项目构建信息
 2		vite.config.js						Vite框架配置文件
 3		index.html				所有VUE页面都会被编译到index.html页面中
 4		index.css							index页面的样式文件
 5		dist目录				存放编译后的各种文件（项目发布前才需要编译）
 6		node_modules目录					存放各种依赖库
 7		public目录							存放公共文件
 8		src目录					存放Vue页面、JavaScript文件、静态资源文件等
 9		src/asserts目录						存放静态资源文件
 10		src/components目录		存放自定义Vue组件，目前存放的是自定义标签引用SVG图片
 11		src/icons目录						存放引入的SVG文件
 12		src/router目录						定义的是全局路由
 13		src/utils目录						存放公共工具脚本
 14		src/views目录						存放各种Vue页面
 15		App.vue					加载某个路由页面，最终App.vue的内容被编译到index.html里面
 16		main.js							Vue项目的主文件（入口程序）

1. 注意事项

在package.json文件中的各种依赖库版本大家不要随便修改，因为Vue3.0更新较为频繁，如果贸然使用新版本的Vue库，很有肯能会导致前端项目启动失败。如说vue-router库的4.0.5版本，就不能用3.0.3之后的Vue库，否则全局路由会失效，导致无法切换前端页面。

2. 引入ElementUI-Plus组件库

由于前端项目用的是Vue3.0，如果想要使用ElementUI组件库，要引入ElementUI-Plus组件库，不能引入老版本的ElementUI，这一点切记！这个项目中各种依赖库引用好了，阅读一下main.js文件中的代码。

import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import locale from 'element-plus/lib/locale/lang/zh-CN'
……

//使用ElementUI
app.use(ElementPlus, {
    locale
})

3. 使用JQuery

在Vue项目中使用JQuery？
MVVM可以省去我们自己直接操作DOM，为什么还要引入JQuery？
原因：项目中要使用同步执行的Ajax请求。

ElementUI中很多组件的动画效果都有回调函数，把JS代码写到这种动画回调函数中，就能在操作控件的时候完成特殊的功能。

例如下面的截图中，表格记录有个“折叠图标”，点击图标我们可以展开或者折叠详情信息。通常情况下，用户展开详情信息的时候，我们才发送Ajax请求查询数据。而不是预先把每个记录的详情信息查询出来，那样做要查询的数据太多，对后端项目和数据库都产生很大的负载。有可能用户只展开几条详情，而你把所有数据的详情都预先查询出来，是不是很不妥？

ElementUI中的动画回调函数里面放置异步执行的代码通常会出严重的BUG，这是因为动画回调函数不会等待异步代码彻底执行完，然后再往下执行。例如我们在动画回调函数中发送Ajax查询数据，但是动画回调函数不会等待Ajax执行完，它自己先提前执行完了，所以导致Ajax代码也跟着退出运行了。你说这算不算是严重的BUG？那怎么解决这个事情呢？很简单，Ajax换成同步执行的。强制让动画回调函数等待Ajax执行完，它自己才能退出。

目前来说，只有JQuery的Ajax既支持异步又支持同步，所以在项目中引入JQuery理所
当。

今日学习收获：技术栈不能用死，要合理的运用才可以进步！