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

  npm install

  npm run dev

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

在终端执行指令：

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

> 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示例，如下所示：

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

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

使用Vite创建一个动态网页的前端项目的更多相关文章

  1. ajax:用于创建快速动态网页的技术

    ajax是一种用于创建快速动态网页的技术. 异步的javascript和XML(JSON),主要是完成一个局部刷新. 异步:你传输吧,我先干我自个儿的事,你传好了告诉我一声 同步:你传输,我停下活儿看 ...

  2. VC++ 创建一个动态增长的层叠菜单

    工作中需要创建一个动态增长的层叠菜单,类似于动态增长的多语言切换菜单,也是废了好大劲哪,分享一下,请交流参考. 类似效果图: 弹出子菜单各菜单项的意义一致,用ON_COMMAND_RANGE宏来统一实 ...

  3. 创建一个动态Web项目:

    开始你的Eclipse,然后进入“文件”>“新建”>“动态Web项目,然后输入项目名称为HelloWorldStruts2和设置其他的选项,在下面的屏幕: 选择在屏幕上的所有默认选项,最后 ...

  4. 做了一个动态代理IP池项目，邀请大家免费测试~

    现在出来创业了,目前公司在深圳. 做了啥呢, 做了一个动态代理 IP 池项目 现在邀请大家免费测试体验! 免费激活码:关注微信公众号:2808proxy (每人每天限领一次噢~) 网站:https:/ ...

  5. 如何打造一个"逼格"的web前端项目

    最近利用空余的时间(坐公交车看教程视频),重新了解了前后端分离,前端工程化等概念学习,思考如何打造一个“逼格”的web前端项目. 前端准备篇 前端代码规范:制定前端开发代码规范文档. PS:重中之中, ...

  6. web学习---html，js，php，mysql一个动态网页获取流程

    使用bootstrap的cms模版系统搭建了一个信息管理系统.通过这个系统学习动态网页获取的工作流程. 抓包分析一个页面的数据请求流程如下图所示: 同样,对于需要向数据库插入数据,可以使用ajax接口 ...

  7. Django命令行相关命令 以及创建一个空白网页的步骤

    django相关命令行命令: django.admin.py是Django的一个用于管理任务的命令行工具,manage.py是对django-admin.py的简单包装,每个Django Projec ...

  8. 用Eclipse 创建一个 简单的 Maven JavaWeb 项目

    使用Maven 创建一个简单的 javaWeb 项目: 本篇属于 创建 JavaWeb 项目的第三篇: 建议阅读本篇之前 阅读 用 Eclipse 创建一个简单的web项目  ;本篇是这这篇文章的基础 ...

  9. 如何创建一个Asp .Net Web Api项目

    1.点击文件=>新建=>项目 2.创建一个Asp .NET Web项目 3.选择Empty,然后选中下面的MVC和Web Api,也可以直接选择Web Api选项,注意将身份验证设置为无身 ...

  10. 创建一个scrapy爬虫框架的项目

    第一步:打开pycharm,选择"terminal",如图所示: 第二步:在命令中端输入创建scrapy项目的命令:scrapy startproject demo (demo指的 ...

随机推荐

  1. Docker - 部署zyplayer_doc团队协作文档

    原文链接:https://mp.weixin.qq.com/s/ew3O0EKLo8KoOMkpT-IePw 一.介绍   zyplayer-doc是一款适合企业和个人使用的WIKI知识库管理工具,提 ...

  2. win7系统清理C盘空间方法实测

    问题描述:win7电脑C盘容易满,采用如下方法清理 方法一:win+r,输入%temp%查看临时文件,手动删除不需要的文件 方法二:减小休眠文件:如果你很少使用休眠模式,可以通过win+r输入cmd命 ...

  3. HttpClient 进行soap请求

    当你在使用C#的HttpClient进行SOAP请求时,确保你的代码类似于以下示例: using System; using System.Net.Http; using System.Text; u ...

  4. Linux云服务器如何安装配置Redis

    为大家分享linux云服务器如何安装配置Redis,示例为CentOS7系统 Redis 是一款开源的高性能内存数据库,以极速读写(微秒级)和丰富数据结构著称,支持字符串.哈希.列表等类型,兼具持久化 ...

  5. CTF-CRYPTO-ECC(2)

    CTF-CRYPTO-ECC(2) 椭圆加密 4.BSGS(小步大步法) [HITCTF 2021 ] task.py #Elliptic Curve: y^2 = x^3 + 7 mod N whi ...

  6. python以及java环境搭建+解决不同版本环境共存问题

    1.搭建python环境 1.安装python3.9.7,选择自定义安装.将文件添加至环境路径,然后选择下一步. 2.默认.然后选择下一步. 3.选择适用于所有使用者,选择自己想要存放的路径,然后选择 ...

  7. Creo 4.0二次开发工具框架搭建

    一.新建MFC DLL工程  二.配置项目属性 附加依赖项中输入:netapi32.lib;psapi.lib;mpr.lib;wsock32.lib;protk_dll_NU.lib;protk_d ...

  8. Delphi 增加/获得windows用户帐号

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  9. 泛型（Generics）

    Java中的泛型(Generics)是JDK 5引入的一种特性,它使得类.接口和方法能够以一种类型参数化的方式进行定义和使用.泛型的主要目的是增强代码的类型安全性和可读性,同时减少类型转换(cast) ...

  10. Spring AI与DeepSeek实战三：打造企业知识库

    一.概述 企业应用集成大语言模型(LLM)落地的两大痛点: 知识局限性:LLM依赖静态训练数据,无法覆盖实时更新或垂直领域的知识: 幻觉:当LLM遇到训练数据外的提问时,可能生成看似合理但错误的内容. ...