使用Vite创建一个动态网页的前端项目
作者：charlee44
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 | * Select a variant: | > TypeScript | JavaScript —
虽然可以接着使用终端，但这时就可以使用 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"
}
}主要作用有两个：
- 依赖管理。dependencies 字段和 devDependencies 字段，其中 dependencies 字段是项目需要的依赖库包，devDependencies 构建项目需要的依赖库包。执行
npm install就是根据这两个字段中的值自动安装响应的依赖包。 - 执行任务脚本。scripts 字段，通过自定义命令来执行跟构建相关的任务，这里的 dev、build 和 preview 就是最基础和常用的三个指令。
dev 就是执行指令：
npm run dev
表示在开发环境中启动服务器，终端一般会有如下提示：
> my-native-js-app@0.0.0 dev > vite VITE 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" rel="external nofollow" />
<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" rel="external nofollow" target="_blank">
<img src="${viteLogo}" class="logo" alt="Vite logo" />
</a>
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" rel="external nofollow" 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 = 0
const setCounter = (count) => {
counter = count
element.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 项目没有使用框架，是因为笔者想研究一下比较底层的实现，以及对比体会一些框架的设计思路。当然不能重复造轮子，但是也不能离开这些轮子就啥都不会了，理解一些更深层次、更底层的东西，有助于我们更新换代，使用更好的轮子。
补充：HTML页面关于高分屏的设置
HTML页面关于高分屏的设置
记录一个 HTML 页面关于高分屏的踩到的坑。
所谓高分屏，就是在同样大小的屏幕面积上显示更多的像素点，这样可以呈现更好的可视效果的屏幕。例如，我的笔记本是 15.6 寸，理论上它的屏幕分辨率应该是 1920 x 1080 像素，但实际上我的笔记本屏幕分辨率确实 2560 x 1440 像素，也就是俗称的 2K 屏。这样的高分屏虽然实现了更加细腻的图像和更加清晰的文本，但也对软件适配带来了问题。
我这里遇到的问题是，在 HTML5 页面中没有特别设置，PC 端的 Chrome 和 Firefox 的环境下，window.innerWidth, window.innerHeight 这样的参数，以及鼠标响应事件中的鼠标位置，都是物理设备宽度和位置，而不是实际像素的宽度和位置。在安卓端的 Firefox，也是物理设备宽度和位置，但是安卓端的 Chrome 确是实际像素的宽度和位置，导致行为表现不一致。
为了兼容这种情况，可以在 HTML 头中增加一个 viewport 元标签，并设置属性，具体如下设置：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>High DPI Support</title>
</head>
<body>
</body>
</html>在这个 viewport 元标签中，width=device-width 表示设置了视口的宽度等于设备的屏幕宽度，initial-scale=1.0 表示设置初始缩放比例为 1。
更具体来说，我这里使用的是 three.js 进行三维图形渲染，如果没有 viewport 元标签，在安卓端的 Chrome 中进行位置相关的计算总是不正确，研究了很久才找到是高分屏支持的问题。同样是三维图形渲染，Cesium.js 官方提供的例子就增加了 viewport 元标签：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
/>
<title>Hello World!</title>
</head>
<body>
</body>
</html>其实 viewport 元标签只要学习过 Cesium 的案例就有印象，但也是泛泛而过。直到遇到了问题踩坑了才明白原来是这回事，因此将这个问题记录一下。
到此这篇关于使用Vite创建一个动态网页的前端项目的文章就介绍到这了,更多相关vite创建动态网页前端项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！