课程名称：运行项目工程
课程章节：前后端项目分析（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理所
当。
今日学习收获：技术栈不能用死，要合理的运用才可以进步！
随时随地看视频
