【Java Web】Vite构建前端目录结构

目录

一、Vite概述

二、Vite构建Vue3工程化项目

三、Vite+Vue3项目目录结构

四、Vite+Vue3项目组件（SFC入门）

五、Vite+Vue3样式导入方式

六、Vite+Vue3响应式数据和setup语法糖

---

一、Vite概述

Vite是一种新型前端构建工具,能够显著提升前端开发体验;Vite结合NPM可以自动构建前端项目工程化所需的标准目录结构，并且提供项目的打包和运行功能。

二、Vite构建Vue3工程化项目

1、构建项目

Vite会自定生成如下工程目录结构：

2、进入到工程目录下，拉取package.json文件中指定的依赖框架

3、研发模式运行当前项目

说明：打开Local指定的网址即可浏览器预览当前Vite构建的工程，Ctrl+C结束研发模式运行。

三、Vite+Vue3项目目录结构

四、Vite+Vue3项目组件（SFC入门）

传统方式开发一个网页需要html、css和js等多个文件组成一个网页，这种方式被称为多文件组件，然而这种开发方式代码复用度低，不宜于维护。SFC单文件组件，就是将一个网页拆分为多个*.vue格式的组件所构成的网页，每个*.vue组件里面由style、script和template标签构成，分别用于存放传统的css、js和html代码。然后，将这些*.vue组件组合在一起就构成了一个页面，这种单文件组件化的开发方式代码复用度高，易于后期网页的维护升级。

五、Vite+Vue3样式导入方式

 5.1 在.vue文件中的style标签内编写css样式代码，只作用于当前.vue文件中的template标签

5.2 将css样式单独放在一个文件内，那个.vue文件需要就将其直接导入即可（css样式复用）

• 在style标签内引入css样式文件

• 在script标签内引入css样式文件

5.3 将css文件作用于所有的.vue文件，只需将其在main.js文件中导入即可。这样其它的.html文件在使用script标签引入main.js文件后，实际上就会自动将css样式放在.html文件的head标签中作为样式导入。

六、Vite+Vue3响应式数据和setup语法糖

响应式数据：当变量的值发生变化时，vue框架会自动将变量最新的值更新到DOM树中，从而浏览器显示变量最新的值。

非响应式数据： 当变量数据的值发生变化时，vue框架并不会将其最新值更新到DOM树中，浏览器显示的数据不会发生变化。

• 在vue2中变量数据的值默认是响应式的。
• 在vue3中数据默认是非响应式的，只有通过ref或reactive函数将变量转化为响应式数据；转化时，只需将vue框架中的此两个函数ref或reactive函数导入即可。

如： import {函数名} from 'vue'

注意：ref函数转化的响应式数据,在<script>标签中操作时需要使用“变量.value”的形式才能访问到数据。