详细介绍：Javaweb 14.3 Vue3 和 Vite

Document
{{message}}
const app = Vue.createApp({
setup(){
// 定义数据 以变量/对象的形式
let message = "hello"
let headline = "vue"
let colorStyle = {"background-color":"blue"}
function fun1(){
alert("hello")
}
// 载 return 中返回变量/方法 才能够和 HTML 元素关联
return {
message,
headline,
colorStyle,
fun1
}
}
})
// 将 app 对象挂载在指定的元素上，被挂载的元素内部就可以通过 vue 框架实现数据的渲染了
app.mount("#app")

Vue3 通过 Vite 实现工程化

Vite 介绍

我们载前面学习 Javaweb 项目的时候，了解了其基础的目录和文件。包含 src 和 web 文件，web 文件中包含 WEB-INF，WEB-INF 中包含 web.xml，这就是其项目的一个工程化的目录文件。

前端项目也是有一定的工程化标准的，因其基础的目录结构和文件较多较繁琐，我们使用 vite 进行构建~

Vite 创建 Vue3 工程化项目

Vite + Vue3 项目的创建，启动，停止

在终端控制台进行如下操作~

执行完毕后，就会为我们创建这个项目：

可以打开 package.json 文件，发现其中是有相关依赖的，但是我们的项目中并没有对应的 node_modules ，是因为，尽管 package.json 中已经声明了相关依赖，但其实并没有真实的导入进来，我们可以执行 npm i 命令来进行下载~

打开 http://localhost:5173/ 就可以打开初始页面了

这样，我们就使用 vite 构建了一个工程化的项目~

在命令行中输入 Ctrl + C 就可以停止项目~

补充：因为我们的 nodejs 的版本是18.16.0，所以当我们 create vite 的时候，一定要指定版本，如果不指定，会自动下载最新的版本，可能会不兼容~

Vite + Vue3 项目的目录结构

public 目录：用于存放一些公共资源，例如 HTML 文件，图片，字体等。这些资源会直接被复制到构建出来的目标目录中

src 目录：存放项目的源代码，包括 JavaScript CSS Vue 组件图像和字体资源等。以下是 src 内部划分建议：

1. asset 目录：用于存放一些项目中用到的静态资源。

2. components 目录：用于存放香瓜的文件。组件是代码复用的一种方式，用于抽象处一个可以复用的 UI 组件，方便在不同的场景中进行重复使用。

3. layouts 目录：用于存放布局组件的文件。布局组件通常负责整个应用程序的整体布局，例如头部，底部，导航菜单等。

4. pages 目录：用于存放页面级别的组件文件，通常是路由对应的组件文件。

5. plugins 目录：用于存放 Vite 插件相关的文件。

6. router 目录：用于存放 Vue.js 的路由配置文件，负责管理视图和 URL 之间的映射关系。

7. store 目录：用于存放 Vuex 状态管理的相关文件

8. utils 目录：用于存放一些二通用的工具函数

vite.config.js 文件：Vite 的配置文件。可以使用 ES6 模块的语法进行配置

package.json 文件：标准的 Node.js 项目配置文件。

Vite 项目的入口为 src/main.js 文件，也是整个前端应用程序的入口文件。

vite 的运行界面：

在安装了 vite 的项目中，可以在 npm scripts 中使用 vite 可执行文件。

运行设置端口号：（vite.config.js）

Vite + Vue3 项目组件

VUE组件：

一个页面作为整体，是由多个部分组成的，每个部分就可以被理解为一个组件

每个 .vue 文件就可以理解为一个组件，多个 .vue 文件可以构成一个整体页面

组件化给我们带来的另一个好处就是组件的复用和维护都十分方便

.vue 文件：

传统的页面有 html 文件 css 文件和 js 文件三个文件组成（多文件组件）

vue 将这些文件合成一个 vue 文件（Single-File Component 简称 SFC 单文件组件）

vue 文件对 js/css/html 统一封装，该文件由三个部分组成：<script><template><style>

script标签：代表组件的 js 代码，代替传统的 js 文件

template标签：代表组件的 html 代码，代替传统的 html 文件

style标签：代表组件的 css 代码，代替传统的 css 文件

工程化 vue 项目如何组织这些组件？

index.html 是项目的入口，其中<div id = "app"></div> 是用于挂在所有组件的元素

src = "/src/main.js"，index.html 中的 script 标签中引入了一个 main.js 文件，具体的挂在过程在 main.js 中执行

main.js 是 vue 工程中非常重要的文件，决定了这个项目使用那些依赖~

在 main.js 中导入的 App.vue 组件也是 vue 中的核心组件，所有的其他组件都要通过该组件来进行导入，该组件可以通过路由来控制页面的切换

可以在 App.vue 中导入其他 .vue 文件

这样通过 App.vue 导入了其他 vue 组件~

整体流程图：

Vite + Vue3 的css 样式的导入方式：

1. 在 .vue 文件中的 style 标签中

2. 将 css 样式独立保存到 css 文件中，那个 .vue 文件需要，就在那里导入即可~

导入外部的 css 文件，可以在 script 标签中导入，也可以在 style 标签中导入

Vite + Vue3 响应式入门和 setup 函数

再使用 vite 创建一个 vue + JavaScript 项目：

App.vue

Vue3 响应式数据入门：

// 存储 vue 页面逻辑 js 代码
export default {
setup() {
// 定义一些要展示到 HTML 上的一些数据 变量 / 对象
let counter = 1;
// 让 counter 自增的方法
function counterIncr(){
counter++
}
// 让 counter 自减的方法
function counterDecr() {
counter--
}
// 显示 counter 值的方法
function showCounter() {
alert(counter)
}
return {
counter,
counterIncr,
counterDecr,
showCounter,
};
},
};
/* 存储的是 css 代码。 scoped 的意思是 Vue.js 单文件组件中用于设置组件样式的一种方式
它的含义是将样式局限在当前组件中，不对全局样式造成影响
*/

按照理解，我们可以写出上述代码，但是当我们运行，发现页面中间的 counter 并不会变化，但当 showCounter 方法执行的时候，弹出的 counter 的确发生了变化。

==》

响应式数据：在数据变化时，vue 框架会将变量最新的值，更新到 dom 树中，页面数据就是实时最新的

非响应式布局：在数据变化时，vue 框架不会将变量最新的值，更新到 dom 树中，页面数据并不是实时最新的

在 vue2 中，数据不做特殊处理，默认就是响应式的。

vue3 中，数据要经过 ref / reactive 函数的处理才是响应式的

ref reactive 函数是 vue 框中给我们提供的方法，导入进来就可以使用

ref 处理的响应式数据，在操作的时候需要注意：

在 script 标签中，操作 ref 的响应式的数据需要通过 .value 的形式操作

在 template 标签中，操作 ref 的响应式的数据就可以直接使用了，无需 .value 的形式

完！

posted @ 2025-09-05 18:50 yfceshi 阅读(14) 评论(0) 收藏举报

刷新页面返回顶部