当前位置： 首页 > article >正文

使用Vite创建一个动态网页的前端项目

article 2025/9/14 21:30:06

1. 引言

虽然现在的前端更新换代的速度很快，IDE和工具一批批的换，但是我们始终要理解一点基本的程序构建的思维，这些环境和工具都是为了帮助我们更快的发布程序。笔者还记得以前写前端代码的时候，只使用文本编辑器，然后在浏览器中刷新就可以了。对于纯前端项目，其实这样也是很方便的。不过一旦涉及到文件资源访问的问题就麻烦了，因为浏览器的安全限制，不能访问域以外的资源。那么你就需要将其部署到Web服务器中，这意味着你要起个服务器。另外，调试的时候也要每次都刷新页面；第三方依赖包的引入也是问题，需要自己去管理，然后进行引入。于是，像Vite这样的前端开发与构建工具就出现了，它可以帮助你将上述这些步骤自动化处理，加快你的前端程序的编程效率。这里笔者就总结一下如何使用Vite创建动态网页的前端项目。

2. 操作

首先，安装Node.js和npm。Node.js是JavaScript 的运行时环境，npm是一个包管理和任务运行工具，安装过程比较简单，这里就不复述了。

接下来，选择一个文件夹，在终端中运行以下命令来创建项目：

npm create vite@latest my-native-js-app

这时，终端会让你选择一个框架：

> npx
> create-vite my-native-js-app|
*  Select a framework:
|  > Vanilla
|    Vue
|    React
|    Preact
|    Lit
|    Svelte
|    Solid
|    Qwik
|    Angular
|    Marko
|    Others
—

这里笔者选择使用Vanilla，表示使用原生的模板，不使用任何框架。接下来，终端会让你选择使用TypeScript还是JavaScript：

> npx
> create-vite my-native-js-app|
o  Select a framework:
|  Vanilla
|
*  Select a variant:
|  > TypeScript
|    JavaScript
—

这里笔者选择使用JavaScript。然后等待一会儿，前端项目就创建完成了，如下所示：

> npx
> create-vite my-native-js-app|
o  Select a framework:
|  Vanilla
|
o  Select a variant:
|  JavaScript
|
o  Scaffolding project in C:\Work\js\my-native-js-app...
|
—  Done. Now run:cd my-native-js-appnpm installnpm run dev

虽然可以接着使用终端，但这时就可以使用VS Code接管项目了。通过VS Code打开my-native-js-app文件夹，并启动终端，如下图所示：

图1 通过VS Code打开一个前端项目

在终端执行指令：

npm install

这一步是为了安装第三方依赖库。一般来说，如果你开始一个新的项目，这一步是必须的。当然依赖库安装完成后，如果后续依赖库没有变动，就不需要执行这一步了。

此时的项目的文件组织如下所示：

my-native-js-app
├── public
│ └── vite.svg
├── src
│ ├── counter.js
│ ├── javascript.svg
│ ├── main.js
│ └── style.css
├── index.html
└── package.json

这里的package.json文件是npm的核心配置文件，如下所示：

{"name": "my-native-js-app","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"devDependencies": {"vite": "^6.3.5"}
}

主要作用有两个：

  1. 依赖管理。dependencies字段和devDependencies字段，其中dependencies字段是项目需要的依赖库包，devDependencies构建项目需要的依赖库包。执行npm install就是根据这两个字段中的值自动安装响应的依赖包。
  2. 执行任务脚本。scripts字段，通过自定义命令来执行跟构建相关的任务，这里的dev、build和preview就是最基础和常用的三个指令。

dev就是执行指令：

npm run dev

表示在开发环境中启动服务器，终端一般会有如下提示：

> my-native-js-app@0.0.0 dev
> viteVITE v6.3.5  ready in 500 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  press h + enter to show help

在浏览器中访问地址：http://localhost:5173/ ，可以看到页面中显示了一个基础的HTML +JS示例，如下所示：

图2 Vite自带的HTML +JS示例

另外两个指令主要是为了实际发布时使用：

  • npm run build构建项目代码，比如压缩、拼接、混淆等。
  • npm run preview发布经过构建后的代码项目。

3. 解析

这个示例JS项目不仅仅是个欢迎页面，甚至还是个动态页面：可以对鼠标点击的次数计数。那么我们就来稍微解析一下其中的代码。首先是index.html:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

可以看到这个HTML页面并没有显示在界面的元素，因为这些元素都是通过JS动态加载上来的。另外，要注意的是这里的

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

是用来兼容高分屏的，具体可以参看笔者的文章《HTML页面关于高分屏的设置》。可以看到即使是这个最简化的示例都把这个元数据标签带上了，因为现在使用高分屏的设备已经非常多了。

接着我们来看一下main.js：

import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'
import { setupCounter } from './counter.js'document.querySelector('#app').innerHTML = `<div><a href="https://vite.dev" target="_blank"><img src="${viteLogo}" class="logo" alt="Vite logo" /></a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank"><img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" /></a><h1>Hello Vite!</h1><div class="card"><button id="counter" type="button"></button></div><p class="read-the-docs">Click on the Vite logo to learn more</p></div>
`setupCounter(document.querySelector('#counter'))

这段代码的主要意思也就是刚才说的，查询#app元素，并填充HTML字符串，也就是这个页面是先显示HTML，再通过js动态加载元素到页面中。

另一个有意思的点是这里的导入：

import './style.css'
import javascriptLogo from './javascript.svg'
import viteLogo from '/vite.svg'

其实并不是原生JS的行为，而是Vite提供的。这其实也体现了一种思想，HTML、CSS和JavaScript三者来说，JavaScript才是最主要的，css样式和HTML页面都可以通过JavaScript来生成。

再来看下counter.js：

export function setupCounter(element) {let counter = 0const setCounter = (count) => {counter = countelement.innerHTML = `count is ${counter}`}element.addEventListener('click', () => setCounter(counter + 1))setCounter(0)
}

函数实现很简单，就是个简单的计数功能。不过要注意的是这里的export function setupCounter(element)使用的是JavaScript ES6（ECMAScript 2015）中的模块导出语法，表示将setupCounter这个函数导出。在main.js中则进行导入：

import { setupCounter } from './counter.js'setupCounter(document.querySelector('#counter'))

4. 结语

之所以选择使用原生JS项目没有使用框架，是因为笔者想研究一下比较底层的实现，以及对比体会一些框架的设计思路。当然不能重复造轮子，但是也不能离开这些轮子就啥都不会了，理解一些更深层次、更底层的东西，有助于我们更新换代，使用更好的轮子。

相关文章：

使用Vite创建一个动态网页的前端项目

1. 引言 虽然现在的前端更新换代的速度很快&#xff0c;IDE和工具一批批的换&#xff0c;但是我们始终要理解一点基本的程序构建的思维&#xff0c;这些环境和工具都是为了帮助我们更快的发布程序。笔者还记得以前写前端代码的时候&#xff0c;只使用文本编辑器&#xff0c;然…...

编程日记 2025/9/14 21:30:06

系统架构设计师案例分析题——web篇

软考高项系统架构设计师&#xff0c;其中的科二案例分析题为5选3&#xff0c;总分75达到45分即合格。本贴来归纳web设计题目中常见的知识点即细节&#xff1a; 目录 一.核心知识 1.常见英文名词 2.私有云 3.面向对象三模型 4.计网相关——TCP和UDP的差异 5.MQTT和AMQP协…...

编程日记 2025/9/14 20:08:29

MySQL--day5--多表查询

&#xff08;以下内容全部来自上述课程&#xff09; 多表查询 1. 为什么要用多表查询 # 如果不用多表查询 #查询员工名为Abel的人在哪个城市工作? SELECT* FROM employees WHERE last_name Abel;SELECT * FROM departments WHERE department_id 80;SELECT * FROM locati…...

编程日记 2025/9/8 17:53:08

【Redis】AOF日志的三种写回机制

目录 1、背景2、appendfsync always&#xff08;同步写回&#xff09;【1】工作机制【2】特点【3】实现原理 3、appendfsync everysec&#xff08;每秒写回&#xff0c;默认配置&#xff09;【1】工作机制【2】特点【3】实现原理 4、appendfsync no&#xff08;操作系统控制&am…...

编程日记 2025/6/3 19:53:15

leetcode hot100刷题日记——7.最大子数组和

class Solution { public:int maxSubArray(vector<int>& nums) {//方法一&#xff1a;动态规划//dp[i]表示以i下标结尾的数组的最大子数组和//那么在i0时&#xff0c;dp[0]nums[0]//之后要考虑的就是我们要不要把下一个数加进来&#xff0c;如果下一个数加进来会使结…...

编程日记 2025/9/8 17:53:18

基于Spring Boot和Vue的在线考试系统架构设计与实现(源码+论文+部署讲解等)

源码项目获取联系 请文末卡片dd我获取更详细的演示视频 系统介绍 基于Spring Boot和Vue的在线考试系统。为学生和教师/管理员提供一个高效、便捷的在线学习、考试及管理平台。系统采用前后端分离的架构&#xff0c;后端基于成熟稳定的Spring Boot框架&#xff0c;负责数据处理…...

编程日记 2025/9/8 18:00:54

MySQL Workbench 工具导出与导入数据库：实用指南

目录 一、MySQL Workbench 简介二、导出数据库2.1 打开 MySQL Workbench2.2 数据库导出步骤三、导入数据库3.1 打开 MySQL Workbench3.2 数据库导入步骤四、注意事项五、总结MySQL Workbench 是一款强大的数据库管理和开发工具，它提供了直观的图形界面，方便用户进行数据库的设…...

编程日记 2025/7/13 13:27:40

Android 绘制折线图

用了一段时间的 Jetpack Compose ，感觉写 UI 的效率确实会提升不少 。 配合 AI 编程绘制了一个折线图。供大家学习参考！ @Composable fun TemperatureChart() {val timeLabels = listOf("7:00", "8:00", "9:00", "10:00", "11:…...

编程日记 2025/9/8 17:55:45

自建srs实时视频服务器支持RTMP推流和拉流

文章目录 一、整体示意图二、服务器端1.srs简介及架构2.docker方式安装3.k8s方式安装4.端口 三、推流端1.OBS Studio2.ffmpeg推流3.streamlabs苹果手机4.twire安卓手机5.网络推流摄像头 四、拉流端1.vlc2.srs 参考awesome系列&#xff1a;https://github.com/juancarlospaco/aw…...

编程日记 2025/9/8 17:51:08

ubuntu22.04 卸载ESP-IDF

要在Ubuntu 22.04上完全卸载ESP-IDF&#xff0c;请按照以下步骤操作&#xff1a; 卸载ESP-IDF的步骤 删除ESP-IDF目录&#xff1a; # 假设ESP-IDF安装在~/esp/esp-idf目录 rm -rf ~/esp/esp-idf删除ESP-IDF工具链和下载的工具&#xff1a; rm -rf ~/.espressif从PATH中移除ESP…...

编程日记 2025/6/23 17:09:37

Spring IOCDI————(2)

DI详解 我们之前讲了控制反转IOC&#xff0c;也就是bean的存&#xff0c;那么我们还需要Bean的取&#xff0c;就是DI了&#xff0c;DI翻译过来就是依赖注入&#xff0c;啥意思呢&#xff0c;就是我们通过IOC容器&#xff0c;把所有的对象交给Spring管理&#xff0c;我们指定哪…...

编程日记 2025/9/10 16:05:34

80. Java 枚举类 - 使用枚举实现单例模式

文章目录 80. Java 枚举类 - 使用枚举实现单例模式**1️⃣ 为什么用枚举实现单例&#xff1f;****2️⃣ 枚举实现单例模式****3️⃣ 枚举单例如何防止反射攻击&#xff1f;****4️⃣ 枚举单例如何防止反序列化破坏&#xff1f;****5️⃣ 枚举单例 vs 传统单例****6️⃣ 枚举单例…...

编程日记 2025/9/5 18:31:26

融云 uni-app IMKit 上线，1 天集成，多端畅行

融云 uni-app IMKit 正式上线&#xff0c;支持一套代码同时运行在 iOS、Android、H5、小程序主流四端&#xff0c;集成仅需 1 天&#xff0c;并可确保多平台的一致性体验。 融云 uni-app IMKit 在 Vue 3 的高性能加持下开发实现&#xff0c;使用 Vue 3 Composition API&#x…...

编程日记 2025/9/13 6:10:55

Java中的集合详解

下面是文章详细介绍了 Java 集合框架的基本思路、主要接口与实现、各类集合之间的区别与各自的适用场景&#xff0c;以及一些常见的使用技巧和最佳实践&#xff0c;供你参考。 Java中的集合详解 在 Java 开发中&#xff0c;集合&#xff08;Collection&#xff09;作为存储和操…...

编程日记 2025/8/6 2:18:41

利用 Java 爬虫根据关键词获取某手商品列表

在电商领域&#xff0c;根据关键词获取商品列表是常见的需求。某手作为国内知名的电商平台&#xff0c;提供了丰富的商品资源。通过 Java 爬虫技术&#xff0c;我们可以高效地根据关键词获取某手商品列表&#xff0c;并提取商品的基本信息。本文将详细介绍如何利用 Java 爬虫根…...

编程日记 2025/7/5 8:25:11

Axure项目实战：智慧运输平台后台管理端-订单管理2（多级交互）

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！如有帮助请订阅专栏！ Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 课程主题：订单管理2 主要内容：中继器筛选、表单跟随菜单拖动、审批数据互通等 应用场景：订单管理…...

编程日记 2025/9/8 13:05:24

篇章五 项目创建

目录 1.创建一个SpringBoot项目 2.创建核心类 2.1 Exchange类 2.2 MessageQueue类 2.3 Binding类 2.4 Message类 1.Message的组成 2.逻辑删除 3.工厂方法 4.序列化与反序列化 5.offsetBeg和offsetEnd 1.创建一个SpringBoot项目 1.点击 2.填写表单 3.添加依赖 2.创建…...

编程日记 2025/9/8 20:22:58

Ntfs!ATTRIBUTE_RECORD_HEADER结构$INDEX_ROOT=0x90的一个例子

Ntfs!ATTRIBUTE_RECORD_HEADER结构$INDEX_ROOT0x90的一个例子 1: kd> dx -id 0,0,899a2278 -r1 ((Ntfs!_FILE_RECORD_SEGMENT_HEADER *)0xc431a400) ((Ntfs!_FILE_RECORD_SEGMENT_HEADER *)0xc431a400) : 0xc431a400 [Type: _FILE_RECORD_SEGMENT_HEADER …...

编程日记 2025/9/8 11:29:24

AGI大模型（30）：LangChain链的基本使用

为开发更复杂的应用程序，需要使用Chain来链接LangChain中的各个组件和功能，包括模型之间的链接以及模型与其他组件之间的链接。 链在内部把一系列的功能进行封装，而链的外部则又可以组合串联。 链其实可以被视为LangChain中的一种基本功能单元。 API地址：https://python.…...

编程日记 2025/9/8 19:04:35

代码随想录算法训练营第六十六天| 图论11—卡码网97. 小明逛公园，127. 骑士的攻击

继续补&#xff0c;又是两个新算法&#xff0c;继续进行勉强理解&#xff0c;也是训练营最后一天了&#xff0c;六十多天的刷题告一段落了&#xff01; 97. 小明逛公园 97. 小明逛公园 感觉还是有点难理解原理 Floyd 算法对边的权值正负没有要求&#xff0c;都可以处理。核心…...

编程日记 2025/9/10 13:24:14

[创业之路-364]：企业战略管理案例分析-5-战略制定-宇树科技的使命、愿景、价值观的演变过程

目录 一、宇树科技的使命、愿景、价值观的演变过程 初创阶段&#xff08;2016 年成立前后&#xff09;&#xff1a;以技术梦想奠基&#xff0c;明确核心使命愿景 发展阶段&#xff08;2017 - 2023 年&#xff09;&#xff1a;技术突破与市场拓展&#xff0c;价值观逐步成型 …...

编程日记 2025/9/8 11:36:02

React--函数组件和类组件

React 中的函数组件和类组件是两种定义组件的方式&#xff0c;它们有以下主要区别&#xff1a; 1. 语法与定义方式 函数组件&#xff1a; 是 JavaScript 函数&#xff0c;接收 props 作为参数&#xff0c;返回 JSX。 const MyComponent (props) > {return <div>Hell…...

编程日记 2025/9/10 22:04:31

Flask 路由装饰器：从 URL 到视图函数的优雅映射

前置知识&#xff0c;关于Python装饰器的语法&#xff0c;链接&#xff1a;Python 装饰器&#xff1a;从“语法糖”到“代码神器”的深度解析 1、路由装饰器的功能&#xff1a;给 URL 贴 “功能标签” 在 Flask 开发中&#xff0c;你一定见过这样的代码&#xff1a; from fla…...

编程日记 2025/9/10 9:49:03

DDoS防护实战——从基础配置到高防IP部署

一、基础防护&#xff1a;服务器与网络层加固 Linux内核优化&#xff1a; 调整TCP协议栈参数&#xff0c;缓解SYN Flood攻击&#xff1a; # 启用SYN Cookie并减少超时时间 echo 1 > /proc/sys/net/ipv4/tcp_syncookies echo 30 > /proc/sys/net/ipv4/tcp_fin_timeout…...

编程日记 2025/7/31 5:13:55

aws平台s3存储桶夸域问题处理

当我们收到开发反馈s3存在跨域问题 解决步骤&#xff1a; 配置 S3 存储桶的 CORS 设置&#xff1a; 登录到 AWS 管理控制台。转到 S3 服务。选择你存储文件的 存储桶。点击 权限 标签页。在 跨域资源共享&#xff08;CORS&#xff09;配置 部分&#xff0c;点击 编辑。 登陆…...

编程日记 2025/9/8 20:27:15

HOT100(二叉树)

二叉树 二叉树的中序遍历 class Solution { public:void traversal(TreeNode* root, vector<int> & vec){if(root nullptr) return;traversal(root->left, vec);vec.push_back(root->val);traversal(root->right, vec);}vector<int> inorderTraver…...

编程日记 2025/9/5 20:33:35

【vue-text-highlight】在vue2的使用教程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、下载二、使用步骤1.引入库2.用法 效果速通 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;随着人工智能的不断发…...

编程日记 2025/9/8 20:32:11

pycharm无法正常调试问题

pycharm无法正常调试问题 1.错误代码 已连接到 pydev 调试器(内部版本号 231.8109.197)Traceback (most recent call last):File "E:\Python\pycharm\PyCharm 2023.1\plugins\python\helpers\pydev\_pydevd_bundle\pydevd_comm.py", line 304, in _on_runr r.deco…...

编程日记 2025/9/8 20:31:24

springboot3.4.5-springsecurity+session

创建springboot项目&#xff0c;添加以下依赖&#xff1a; LombokSpring WebSpring SecuritySpring Data JDBCMyBatis FrameworkMySQL Driver 添加fastjson2进行序列化和反序列化 <dependency><groupId>com.alibaba.fastjson2</groupId><artifactId>f…...

编程日记 2025/7/3 19:04:21

网络安全利器：蜜罐技术详解

蜜罐是网络安全领域中一种主动防御和情报收集的重要工具。本文将深入探讨蜜罐技术的原理、类型、应用场景以及部署注意事项。 1. 什么是蜜罐？ 蜜罐（Honeypot）是一种安全资源，其价值在于被探测、攻击或未经授权使用。简单来说，蜜罐就是一个诱饵系统，用来吸引黑客的注意力…...

编程日记 2025/9/11 22:25:49