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

于 2024-06-27 19:04:31 发布
阅读量666 收藏 7
点赞数 4
分类专栏： Java Web 文章标签： java 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60243891/article/details/140021915
版权

目录

一、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、研发模式运行当前项目

最低0.47元/天 解锁文章
JavaWeb 25.Vite
m0_73983707的博客
10-23 617
在浏览器支持 ES 模块之前，JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。这也正是我们对“打包”这个概念熟悉的原因：使用工具抓取、处理并将我们的源码模块串联成可以在浏览器中运行的文件。时过境迁，我们见证了诸如webpackRolup和Parce等工具的变迁，它们极大地改善了前端开发者的开发体验当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍。
【Vue教程】使用Vite快速搭建前端工程化项目 Vue3 Vite Node.js
最新发布
web13508588635的博客
03-01 1305
前端工程化是使用软件工程的方法来单独解决前端的开发流程中模块化、组件化、规范化、自动化的问题,其主要目的为了提高效率和降低成本。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，可以使 JavaScript 运行在服务器端。使用 Node.js，可以方便地开发服务器端应用程序，如 Web 应用、API、后端服务，还可以通过 Node.js 构建命令行工具等。
Vite文件目录结构介绍
技术btbysj的博客
06-20 1190
对Vite创建的shop-admin项目的文件目录用途进行介绍
Vue 目录结构 vite 项目
xiaowude_boke的博客
08-14 2403
Vue 目录结构 vite 项目
vite目录介绍
qq_35849707的博客
06-23 1975
1、node_modules：项目依赖包 2、public：公共资源目录 3、index.html：首页，个人觉得主要是head的设计吧，浏览器title、meta等，也可做最外层的页面布局 4、package.json：项目配置文件，npm的指令可在这里体现哟，还可自行编辑，然后install一下~ 5、vite.config.js：配置文件，自行修改可处理跨域问题，如下 ...
Vue 3第二章：Vite文件目录结构及SFC语法
to_the_Future的博客
02-24 5683
Vue3 支持使用单文件组件（SFC）来组织代码。SFC 将一个组件的模板、样式和逻辑封装在一个文件中，使得组件的代码更加清晰和易于维护。以下是一个简单的 SFC 的例子：
前端数据可视化demo 项目使用了vue3，由vite构建
04-28
本项目是一个基于Vue3的前端数据可视化示例，使用了现代化的开发工具Vite进行构建。这个Demo展示了如何在Web应用中有效地展示和交互数据，利用各种技术手段增强用户对数据的理解和探索。以下将详细阐述项目中涉及的...
Vue3+Vite5+TypeScript+Element-Plus构建的后台管理前端模板，配套接口文档和后端源码
04-25
Vue3+Vite5+TypeScript+Element-Plus构建的后台管理前端模板是现代Web应用开发中的一个高效组合，尤其适合构建复杂的后台管理系统。这个模板是基于vue-element-admin的Vue3版本，它提供了完整的功能模块和优雅的界面...
vite构建的Dome模板.zip
11-02
- **构建部署**：在生产环境中，Vite构建的前端静态资源可以部署到任意静态资源服务器，而NestJS应用可以独立部署到Node.js服务器。 6. 学习这个Dome模板，你可以了解Vite如何与NestJS协同工作，掌握前后端分离...
基于Java核心技术的Web全栈开发培训设计源码
02-16
vite.config.ts是一个配置Vite构建工具的文件，而env.d.ts可能包含TypeScript的环境类型声明。最后，readme.txt文件作为项目的简介文档，通常包含了项目的基本信息、安装指南、使用说明等。 这个基于Java核心技术的...
vite创建项目、目录结构分析以及构建应用
m0_56571733的博客
11-01 727
项目启动完成。
前端项目目录结构规范
05-15
前端项目目录结构规范前端项目目录结构
简单并快速的生成前端项目结构projectc
08-07
projectc 模块为控制台功能，所有操作在控制台通过命令行完成
vite构建vue项目目录简介
weixin_44860226的博客
01-14 4593
public 下面的不会被编译 可以存放静态资源assets 下面可以存放可编译的静态资源components 下面用来存放我们的组件App.vue 是全局组件main ts 全局的ts文件vite-env.d.ts存放vite声明文件，由于typescript不认识.vue文件，此文件帮助做了一个声明。
vue项目前端基本目录设计
weixin_57913339的博客
08-01 235
目录如图所示
vue3.0(三) Vite文件目录结构及SFC语法
chengcheng9876的博客
04-28 1242
Vite的介绍，Vite文件目录结构及SFC语法介绍
前端项目一键生成目录文件模板等
kaQin0的博客
04-13 677
前端项目一键生成目录，文件
vite创建基本项目架构
web修理工
12-07 1148
参考vite官网:https://cn.vitejs.dev/guide/ 1.初始化 升级最新版本：npm install vue@next 创建名为'test'的项目：npm init vite-app test 2.下载依赖 运行 npm install npm run dev 3.加入ip登录 4.依赖vue-router 参考博客:https://juejin.cn/post/7001857870035681316 npm install vue-router@4.0 创建src/ro
VUE3（四）目录结构
camellia的博客
02-19 2145
更好的了解项目的目录结构，能更好的去开发项目： 当前展示的目录结构是基于vite搭建的项目。 目录结构如下图所示： 我的代码是托管在我自己的git服务器上边的，默认安装的时候是不存在的。 1：dist目录 存放打包之后的代码文件 2：node_modules 存放项目依赖的包目录 3：public 存放公共文件目录 4：src 存放代码的主要目录 （1）：assets 我这里存放了每个页面对应的css、js以及图片文件 （2）：components 存放项目使用的公共组件 （3）：router 存放vu
java web前端开发
02-21
</think>Java Web 前端开发主要关注于构建用户直接交互的界面和体验，虽然前端技术本身独立于后端语言（如 Java），但在 Java Web 应用中，前端与后端紧密协作。以下是 Java Web 前端开发的核心内容和相关技术介绍：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Orion.Guan山月润无声

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值