欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用Vite創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)的前端項(xiàng)目

 更新時(shí)間：2025年06月01日 08:24:20   作者：charlee44  
這篇文章主要介紹了使用Vite創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)的前端項(xiàng)目,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1. 引言

雖然現(xiàn)在的前端更新?lián)Q代的速度很快，IDE 和工具一批批的換，但是我們始終要理解一點(diǎn)基本的程序構(gòu)建的思維，這些環(huán)境和工具都是為了幫助我們更快的發(fā)布程序。筆者還記得以前寫前端代碼的時(shí)候，只使用文本編輯器，然后在瀏覽器中刷新就可以了。對(duì)于純前端項(xiàng)目，其實(shí)這樣也是很方便的。不過一旦涉及到文件資源訪問的問題就麻煩了，因?yàn)闉g覽器的安全限制，不能訪問域以外的資源。那么你就需要將其部署到 Web 服務(wù)器中，這意味著你要起個(gè)服務(wù)器。另外，調(diào)試的時(shí)候也要每次都刷新頁(yè)面；第三方依賴包的引入也是問題，需要自己去管理，然后進(jìn)行引入。于是，像 Vite 這樣的前端開發(fā)與構(gòu)建工具就出現(xiàn)了，它可以幫助你將上述這些步驟自動(dòng)化處理，加快你的前端程序的編程效率。這里筆者就總結(jié)一下如何使用 Vite 創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)的前端項(xiàng)目。

2. 操作

首先，安裝 Node.js 和 npm。Node.js 是 JavaScript 的運(yùn)行時(shí)環(huán)境，npm 是一個(gè)包管理和任務(wù)運(yùn)行工具，安裝過程比較簡(jiǎn)單，這里就不復(fù)述了。

接下來(lái)，選擇一個(gè)文件夾，在終端中運(yùn)行以下命令來(lái)創(chuàng)建項(xiàng)目：

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

這時(shí)，終端會(huì)讓你選擇一個(gè)框架：

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

這里筆者選擇使用 Vanilla，表示使用原生的模板，不使用任何框架。接下來(lái)，終端會(huì)讓你選擇使用 TypeScript 還是 JavaScript：

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

這里筆者選擇使用 JavaScript。然后等待一會(huì)兒，前端項(xiàng)目就創(chuàng)建完成了，如下所示：

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

雖然可以接著使用終端，但這時(shí)就可以使用 VS Code 接管項(xiàng)目了。通過 VS Code 打開 my-native-js-app 文件夾，并啟動(dòng)終端，如下圖所示：

圖 1 通過 VS Code 打開一個(gè)前端項(xiàng)目

在終端執(zhí)行指令：

npm install

這一步是為了安裝第三方依賴庫(kù)。一般來(lái)說(shuō)，如果你開始一個(gè)新的項(xiàng)目，這一步是必須的。當(dāng)然依賴庫(kù)安裝完成后，如果后續(xù)依賴庫(kù)沒有變動(dòng)，就不需要執(zhí)行這一步了。

此時(shí)的項(xiàng)目的文件組織如下所示：

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"
  }
}

主要作用有兩個(gè)：

  • 依賴管理。dependencies 字段和 devDependencies 字段，其中 dependencies 字段是項(xiàng)目需要的依賴庫(kù)包，devDependencies 構(gòu)建項(xiàng)目需要的依賴庫(kù)包。執(zhí)行 npm install 就是根據(jù)這兩個(gè)字段中的值自動(dòng)安裝響應(yīng)的依賴包。
  • 執(zhí)行任務(wù)腳本。scripts 字段，通過自定義命令來(lái)執(zhí)行跟構(gòu)建相關(guān)的任務(wù)，這里的 dev、build 和 preview 就是最基礎(chǔ)和常用的三個(gè)指令。

dev 就是執(zhí)行指令：

npm run dev

表示在開發(fā)環(huán)境中啟動(dòng)服務(wù)器，終端一般會(huì)有如下提示：

> 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/ ，可以看到頁(yè)面中顯示了一個(gè)基礎(chǔ)的 HTML +JS 示例，如下所示：

圖 2 Vite 自帶的 HTML +JS 示例

另外兩個(gè)指令主要是為了實(shí)際發(fā)布時(shí)使用：

  • npm run build 構(gòu)建項(xiàng)目代碼，比如壓縮、拼接、混淆等。
  • npm run preview 發(fā)布經(jīng)過構(gòu)建后的代碼項(xiàng)目。

3. 解析

這個(gè)示例 JS 項(xiàng)目不僅僅是個(gè)歡迎頁(yè)面，甚至還是個(gè)動(dòng)態(tài)頁(yè)面：可以對(duì)鼠標(biāo)點(diǎn)擊的次數(shù)計(jì)數(shù)。那么我們就來(lái)稍微解析一下其中的代碼。首先是 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>

可以看到這個(gè) HTML 頁(yè)面并沒有顯示在界面的元素，因?yàn)檫@些元素都是通過 JS 動(dòng)態(tài)加載上來(lái)的。另外，要注意的是這里的

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

是用來(lái)兼容高分屏的，具體可以參考文末補(bǔ)充介紹《HTML 頁(yè)面關(guān)于高分屏的設(shè)置》?？梢钥吹郊词故沁@個(gè)最簡(jiǎn)化的示例都把這個(gè)元數(shù)據(jù)標(biāo)簽帶上了，因?yàn)楝F(xiàn)在使用高分屏的設(shè)備已經(jīng)非常多了。

接著我們來(lái)看一下 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  rel="external nofollow"  target="_blank">
      <img src="${viteLogo}" class="logo" alt="Vite logo" />
    </a>
    <a  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'))

這段代碼的主要意思也就是剛才說(shuō)的，查詢#app 元素，并填充 HTML 字符串，也就是這個(gè)頁(yè)面是先顯示 HTML，再通過 js 動(dòng)態(tài)加載元素到頁(yè)面中。

另一個(gè)有意思的點(diǎn)是這里的導(dǎo)入：

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

其實(shí)并不是原生 JS 的行為，而是 Vite 提供的。這其實(shí)也體現(xiàn)了一種思想，HTML、CSS 和 JavaScript 三者來(lái)說(shuō)，JavaScript 才是最主要的，css 樣式和 HTML 頁(yè)面都可以通過 JavaScript 來(lái)生成。

再來(lái)看下 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)
}

函數(shù)實(shí)現(xiàn)很簡(jiǎn)單，就是個(gè)簡(jiǎn)單的計(jì)數(shù)功能。不過要注意的是這里的 export function setupCounter(element) 使用的是 JavaScript ES6（ECMAScript 2015）中的模塊導(dǎo)出語(yǔ)法，表示將 setupCounter 這個(gè)函數(shù)導(dǎo)出。在 main.js 中則進(jìn)行導(dǎo)入：

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

4. 結(jié)語(yǔ)

之所以選擇使用原生 JS 項(xiàng)目沒有使用框架，是因?yàn)楣P者想研究一下比較底層的實(shí)現(xiàn)，以及對(duì)比體會(huì)一些框架的設(shè)計(jì)思路。當(dāng)然不能重復(fù)造輪子，但是也不能離開這些輪子就啥都不會(huì)了，理解一些更深層次、更底層的東西，有助于我們更新?lián)Q代，使用更好的輪子。

補(bǔ)充：HTML頁(yè)面關(guān)于高分屏的設(shè)置

HTML頁(yè)面關(guān)于高分屏的設(shè)置

記錄一個(gè) HTML 頁(yè)面關(guān)于高分屏的踩到的坑。

所謂高分屏，就是在同樣大小的屏幕面積上顯示更多的像素點(diǎn)，這樣可以呈現(xiàn)更好的可視效果的屏幕。例如，我的筆記本是 15.6 寸，理論上它的屏幕分辨率應(yīng)該是 1920 x 1080 像素，但實(shí)際上我的筆記本屏幕分辨率確實(shí) 2560 x 1440 像素，也就是俗稱的 2K 屏。這樣的高分屏雖然實(shí)現(xiàn)了更加細(xì)膩的圖像和更加清晰的文本，但也對(duì)軟件適配帶來(lái)了問題。

我這里遇到的問題是，在 HTML5 頁(yè)面中沒有特別設(shè)置，PC 端的 Chrome 和 Firefox 的環(huán)境下，window.innerWidth, window.innerHeight 這樣的參數(shù)，以及鼠標(biāo)響應(yīng)事件中的鼠標(biāo)位置，都是物理設(shè)備寬度和位置，而不是實(shí)際像素的寬度和位置。在安卓端的 Firefox，也是物理設(shè)備寬度和位置，但是安卓端的 Chrome 確是實(shí)際像素的寬度和位置，導(dǎo)致行為表現(xiàn)不一致。

為了兼容這種情況，可以在 HTML 頭中增加一個(gè) viewport 元標(biāo)簽，并設(shè)置屬性，具體如下設(shè)置：

<!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>

在這個(gè) viewport 元標(biāo)簽中，width=device-width 表示設(shè)置了視口的寬度等于設(shè)備的屏幕寬度，initial-scale=1.0 表示設(shè)置初始縮放比例為 1。

更具體來(lái)說(shuō)，我這里使用的是 three.js 進(jìn)行三維圖形渲染，如果沒有 viewport 元標(biāo)簽，在安卓端的 Chrome 中進(jìn)行位置相關(guān)的計(jì)算總是不正確，研究了很久才找到是高分屏支持的問題。同樣是三維圖形渲染，Cesium.js 官方提供的例子就增加了 viewport 元標(biāo)簽：

<!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>

其實(shí) viewport 元標(biāo)簽只要學(xué)習(xí)過 Cesium 的案例就有印象，但也是泛泛而過。直到遇到了問題踩坑了才明白原來(lái)是這回事，因此將這個(gè)問題記錄一下。

到此這篇關(guān)于使用Vite創(chuàng)建一個(gè)動(dòng)態(tài)網(wǎng)頁(yè)的前端項(xiàng)目的文章就介紹到這了,更多相關(guān)vite創(chuàng)建動(dòng)態(tài)網(wǎng)頁(yè)前端項(xiàng)目?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論