【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”的形式才能访问到数据。

@声明:“山月润无声”博主知识水平有限,以上文章如有不妥之处,欢迎广大IT爱好者指正,小弟定当虚心受教!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/862019.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Arduino IDE下载、安装和配置

文章开始先把我自己网盘里的安装包分享给大家&#xff0c;链接&#xff1a;https://pan.baidu.com/s/1cb2_3m0LnuSKLnWP_YoWPw?pwdwwww 提取码&#xff1a;wwww 里面一个是Arduino IDE的安装包&#xff0c;另一个是即将发布的版本。 第一个安装包打开直接按照我的步骤安装就…

【第一周】认识小程序

目录 认识小程序发展历史发展前景发展优势个人企业/创业 账号申请开发工具下载流程使用说明 协作项目交流收益渠道 认识小程序 发展历史 微信小程序自2016年首次提出以来&#xff0c;经历了快速的发展和完善过程&#xff0c;以下是其主要发展历史节点&#xff1a; 2016年1月…

将某列缺失分隔符的文字读入 Excel

有个逗号分隔的 txt&#xff0c;共 10 列&#xff0c;第 3 列有时候缺少分隔符&#xff0c;导致该列缺失&#xff0c;数据不齐只剩 9 列。比如最后两行&#xff1a; 01-0104-0133,MAYO, RONIE #2,202403,2024-03-21 22:51:43.000,1449.49,0.00,0.00,08,6CC6BDAC7E45 17-1782-02…

C++ 串口读写

这段代码演示了如何使用 Windows API 中的串口通信功能进行简单的数据发送和接收。它使用了串口的基本操作和设置,并通过 sendSizeCategory 函数实现了一个简单的串口通信示例,发送一个十六进制数据,并读取串口返回的数据。 _CRT_SECURE_NO_WARNINGS:这是针对使用 strcpy …

云端智慧,赋能风电场:工业级控制系统云监控网关

风力发电场监控平台实现对风电场的运行状态和风机的实时数据进行监测、控制和管理&#xff0c;提高风电场的可靠性和运行效率&#xff0c;降低维护成本&#xff0c;实现智能化管理。 风机机组PLC、多功能仪表、无线测温、温度变送器、档位变送器、设备接入网关上传数据服务器。…

STM32G4系列之DAC

一、STM32G4单片机有几个DAC外设&#xff1f; STM32G4单片机共有4个DAC&#xff0c;两个为低速DAC(采样率1MHz)&#xff0c;两个为高速DAC(采样率15MHz)。共包括7个通道&#xff0c;3个外部通道和4个内部通道。 三个外部DAC包括DAC1和DAC2&#xff0c;其可以映射到外部管脚&am…

输电线路-防鸟设备神器合集!往这边看看!

有些人可能会很恨鸟儿吧。 综艺《种地吧》第一、第二季分别有陈某、王某负责河虾塘、龙虾塘&#xff0c;每天都会有一个“贵宾”-白鹭&#xff0c;如期而至开吃。兄弟俩对其真的恨&#xff0c;但又没办法&#xff0c;谁让白鹭是国家二级保护动物呢。同样在输电线路上也有这样的…

【SpringBoot Web框架实战教程】03 SpingBoot 获取 http 请求参数

不积跬步&#xff0c;无以至千里&#xff1b;不积小流&#xff0c;无以成江海。大家好&#xff0c;我是闲鹤&#xff0c;微信&#xff1a;xxh_1459&#xff0c;十多年开发、架构经验&#xff0c;先后在华为、迅雷服役过&#xff0c;也在高校从事教学3年&#xff1b;目前已创业了…

隐秘而又复杂的恶意软件:SSLoad

SSLoad 是一种隐秘的恶意软件&#xff0c;主要通过钓鱼邮件打开突破口&#xff0c;收集各种信息再回传给攻击者。近期&#xff0c;研究人员发现 SSLoad 通过诱饵 Word 文档投递恶意 DLL 文件&#xff0c;最终部署 Cobalt Strike。另一种攻击方式是利用钓鱼邮件诱导受害者到 Azu…

svn切换分支

现在有一个场景&#xff1a; 在svn中有一个b分支&#xff0c;是基于a分支拉出来的&#xff0c;并且我的b分支在本地已经有了改动&#xff0c;a分支在远端也有了改动&#xff0c; 我想把远端a分支的改动同步到我的本地b分支上&#xff0c;如何操作 目前已知的方法 项目右键-&g…

上古世纪战争台服官网地址+台服预约+预创建角色教程

上古世纪战争台服上线啦&#xff0c;在《上古世纪战争》中&#xff0c;通过主要势力和地区&#xff0c;剧情和角色可以想起原作。《上古世纪战争》的主要背景为&#xff0c;原大陆消失之后&#xff0c;完成移民的种族们定居在诺伊大陆之后遇到的多个势力之间的冲突。同时&#…

CentOS安装ntp时间同步服务

CentOS安装ntp时间同步服务 安装ntp 检查服务器是否安装ntp&#xff1a; rpm -q ntp安装ntp&#xff1a; yum install -y ntp服务端配置 配置文件路径&#xff1a;/etc/ntp.conf 设置ntp为开机启动 systemctl enable ntpd查看ntp开机启动状态 enabled:开启, disabled:关闭 …

C# 类中访问修饰符的优先级

参考链接 : C# 指南 - .NET 托管语言 | Microsoft Learn 访问修饰符 - C# | Microsoft Learn

linux指令tcpdump

目录 1. 安装 tcpdump 2. 基本用法 捕获所有网络接口上的数据包 捕获特定网络接口上的数据包 捕获特定协议的数据包 3. 示例 捕获特定主机的数据包 捕获特定端口的数据包 捕获源或目的 IP 和端口的组合 捕获 ICMP 数据包&#xff08;如 ping 请求&#xff09; 捕获并…

MySQL周内训参照4、触发器-插入-修改-删除

触发器 1、用户购买商品时&#xff0c;要求库存表中的库存数量自动修改 详细示例 delimiter $$ create trigger stock_change after -- 事件触发在 下订单之后 insert -- 监视插入事件 on stock -- 监视 order订单表 for each row begin update stock set stockstock-new.st…

C++中int、DWORD和QWORD

当谈论C编程语言时&#xff0c;以下术语经常被提及&#xff1a;int、DWORD和QWORD。它们是用于表示不同数据类型和长度的关键字。以下是它们的详细解释以及举例说明&#xff1a; int&#xff1a; int是C中表示整数的数据类型之一。它通常用于存储有符号的整数值。int的长度在不…

DLS策略洞察:如何应对AI数据中心网络交换机市场的爆发式增长?

摘要&#xff1a; 随着AI技术的发展和应用&#xff0c;AI数据中心对网络交换机的需求日益增加。摩根士丹利预计&#xff0c;2023-2026年间&#xff0c;AI数据中心网络交换机的收入复合年增长率&#xff08;CAGR&#xff09;将达到55%。本文将详细分析AI数据中心网络交换机市场…

C#udpClient组播

一、0udpClient 控件&#xff1a; button&#xff08;打开&#xff0c;关闭&#xff0c;发送&#xff09;&#xff0c;textbox&#xff0c;richTextBox 打开UDP&#xff1a; UdpClient udp: namespace _01udpClient {public partial class Form1 : Form{public Form1(){Initi…

最新Adobe2024全家桶下载,PS/PR/AE/AI/AU/LR/ID详细安装教程

如大家所熟悉的&#xff0c;Adobe全家桶系列常用的软件有Photoshop&#xff08;PS&#xff09;、Premiere&#xff08;PR&#xff09;、After Effects&#xff08;AE&#xff09;、illustrator&#xff08;AI&#xff09;、Audition&#xff08;AU&#xff09;、Lightroom&…

“所得”如何超越“所见”?合合信息扫描全能王发布扫描“黑科技”

数字化时代&#xff0c;扫描工具正变得越来越智能和个性化。除了常规的文件扫描外&#xff0c;无论是在工作中&#xff0c;还是在旅途里&#xff0c;人们也经常会使用手机扫描褶皱、脏污的文件&#xff0c;或是旅行交通地图、博物馆展品介绍等&#xff0c;打造独属于自己的随身…