目录
一、Vite简介
什么是Vite？
Vite 是一个现代前端构建工具，由 Evan You 尤雨溪（Vue.js 的创造者）开发。它的设计理念是通过提供极速的开发体验和高效的构建流程来简化前端开发。
核心特点
- 极速启动和热更新： Vite 使用原生
ES模块来实现即时的模块热更新HMR，大大加快了开发服务器的启动速度和页面更新速度。 - 按需构建： 在开发过程中，Vite 只会处理当前正在使用的模块，这避免了全量构建的浪费时间，提升了开发效率。
- 优化的生产构建： Vite 使用
Rollup作为生产环境的打包工具，支持现代化的代码分割、Tree Shaking 和其他高级优化功能，确保构建出的代码在生产环境中表现出色。 - 插件系统： Vite 拥有丰富的插件生态，可以方便地扩展功能，支持各种前端框架和工具。
- 兼容性： Vite 支持主流的前端框架（Vue、React、Svelte 等）和语言（Javascript、TypeScript），并且能够与各种开发工具和工作流无缝集成。
二、环境准备
安装 Node.js 和 npm
Vite 需要 Node.js 环境来运行
- 下载 Node.js 并安装（包含npm）
终端输入node -vnpm -v，验证安装是否成功
安装 Vite，创建项目
- 使用 npm 创建 Vite 项目
npm create vite@latest - 根据引导，输入项目名
> npx > create-vite ? Project name: » vite-project - 选择框架
√ Project name: ... vite-project ? Select a framework: » - Use arrow-keys. Return to submit. > Vanilla // 不使用框架 Vue React Preact Lit Svelte Solid Qwik Others - 选择语言
√ Project name: ... vite-project √ Select a framework: » Vanilla ? Select a variant: » - Use arrow-keys. Return to submit. > TypeScript JavaScript - 安装依赖
cd vite-project // 进入项目文件夹 npm install // 安装依赖 npm run dev // 可以进行测试 - 项目运行
npm run dev：启动本地开发服务器，默认http://localhost:5173/
npm run build：构建项目，将项目中的代码进行优化和压缩，并生成用于生产环境的文件。
npm run serve：
三、项目结构和配置
项目结构
vite-project/
│
├── node_modules/ # 自动生成的目录，包含项目的所有依赖包，通常不需要修改
│ ├── .bin/ # 二进制执行文件
│ ├── @esbuild/ # esbuild 相关包
│ ├── @rollup/ # rollup 相关包
│ ├── @types/ # 类型定义包
│ ├── esbuild/ # esbuild 主包
│ ├── nanoid/ # nanoid 包
│ ├── picocolors/ # picocolors 包
│ ├── postcss/ # postcss 包
│ ├── rollup/ # rollup 主包
│ ├── source-map-js/ # source-map-js 包
│ ├── typescript/ # typescript 包
│ └── vite/ # vite 主包
│
├── public/ # 存放静态资源，如图标和图片，会被直接拷贝到构建输出中
│ └── vite.svg # Vite 相关 SVG 图标
│
├── src/ # 源代码目录，包括 TypeScript 文件、CSS 文件和其他
│ ├── counter.ts # 计数器组件的 TypeScript 文件
│ ├── main.ts # 应用的入口 TypeScript 文件
│ ├── style.css # 应用的 CSS 文件
│ ├── typescript.svg # TypeScript 相关 SVG 图标
│ └── vite-env.d.ts # Vite 环境的 TypeScript 类型定义
│
├── .gitignore # Git 忽略文件，例如 node_modules
├── index.html # 项目的入口 HTML 文件，Vite 会在这里注入构建后的 JavaScript 和 CSS
├── package-lock.json # 用于锁定依赖版本，确保每次安装时使用相同的版本
├── package.json # 定义项目的基本信息、脚本、依赖等
└── tsconfig.json # TypeScript 的配置文件，指定 TypeScript 编译器的选项
tsconfig.json 配置文件
{
"compilerOptions": {
"target": "ES2020", // 指定 ECMAScript 目标版本
"useDefineForClassFields": true, // 启用类字段的定义语法
"module": "ESNext", // 指定模块系统
"lib": ["ES2020", "DOM", "DOM.Iterable"], // 指定编译时需要包含的库文件
"skipLibCheck": true, // 跳过库文件的类型检查
/* Bundler mode */
"moduleResolution": "bundler", // 模块解析策略，适用于打包工具
"allowImportingTsExtensions": true, // 允许导入 TypeScript 扩展名的文件
"resolveJsonModule": true, // 允许导入 JSON 模块
"isolatedModules": true, // 启用隔离模块
"moduleDetection": "force", // 强制模块检测
"noEmit": true, // 不生成编译输出文件
/* Linting */
"strict": true, // 启用所有严格类型检查选项
"noUnusedLocals": true, // 禁止未使用的局部变量
"noUnusedParameters": true, // 禁止未使用的参数
"noFallthroughCasesInSwitch": true // 禁止 switch 语句贯穿
},
"include": ["src"] // 指定要包含在编译中的文件或目录
}
-
编译目标（target）和模块（module）：
如果你需要支持更广泛的浏览器，可以考虑将 target 修改为 ES2015 或 ES2017。
如果你使用的是一些旧版的构建工具或需要兼容性，可以考虑将 module 修改为 CommonJS 或 AMD。 -
库文件（lib）：
如果你使用一些特定的浏览器 API 或 Node.js API，可以添加相应的库文件。例如，如果你需要使用 WebWorker，可以将其添加到 lib 数组中：
“lib”: [“ES2020”, “DOM”, “DOM.Iterable”, “WebWorker”] -
严格模式（strict）：
如果你发现严格模式过于严格，可以关闭某些特定的检查。例如：
“strict”: true,
“noImplicitAny”: false -
跳过库检查（skipLibCheck）：
如果你需要更严格的类型检查，可以将其设置为 false。 -
输出目录（outDir）：
如果你需要生成编译输出文件，可以指定输出目录：
“outDir”: “./dist” -
源映射（sourceMap）：
如果你需要调试生成的 JavaScript 文件，可以启用源映射：
“sourceMap”: true -
路径映射（paths）：
如果你有复杂的目录结构或使用别名，可以配置路径映射：
“baseUrl”: “./”,
“paths”: {
“@components/": ["src/components/”],
“@utils/": ["src/utils/”]
}
package.json 配置文件
{
"name": "vite-project",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"devDependencies": {
"typescript": "^5.2.2",
"vite": "^5.3.1"
}
}
-
name：项目的名称。
-
private：项目是否为私有项目。如果设置为 true，则无法将此项目发布到 npm 上。
-
version：项目的版本号。
-
type： 指定模块的类型。“module” 表示项目使用 ES 模块（import 和 export 语法）。
-
scripts：定义了可以在命令行中运行的脚本。常用于自动化任务。
- “dev”：启动开发服务器，使用 Vite 运行开发模式。
npm run dev - “build”：先运行 TypeScript 编译器 (tsc) 编译 TypeScript 文件，然后使用 Vite 进行构建。
npm run build - “preview”：启动 Vite 的预览服务器，用于查看生产环境构建后的效果。
npm run preview
- “dev”：启动开发服务器，使用 Vite 运行开发模式。
-
devDependencies：项目在开发过程中所需的依赖项，这些依赖项不会被包含在生产环境构建中。
- “typescript”：TypeScript 的版本，允许在项目中使用 TypeScript。
- “vite”：Vite 的版本，用于快速开发和构建前端应用。
当前 package.json 中没有测试相关的配置，可以添加测试框架和相应的脚本。
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview",
"test": "" // 添加Jest、Vitest等测试框架后添加测试脚本
}
vite.config.ts 配置文件
vite.config.ts是 Vite 的配置文件，使用 TypeScript 编写。这个文件用于配置 Vite 的各种选项，如插件、构建设置、开发服务器选项等。
创建文件
在项目根目录下创建vite.config.ts文件
常用配置
import { defineConfig } from 'vite';
export default defineConfig({
// 根目录，默认为项目根目录
root: 'src',
// 输出目录
build: {
outDir: '../dist',
emptyOutDir: true
},
// 服务器配置
server: {
host: 'localhost',
port: 5173,
strictPort: true,
https: false,
open: true,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
},
// 插件配置
plugins: [],
// 别名配置
resolve: {
alias: {
'@': '/src'
}
}
});
-
root: 设置 Vite 的根目录。如果你希望 src 目录成为项目的根目录，可以配置这个选项。
-
build：配置构建相关的选项。
- outDir：指定构建输出的目录。
- emptyOutDir：如果设置为 true，每次构建前会清空 outDir 目录。
-
server：配置开发服务器。
- host：设置服务器的主机名。
- port：设置服务器的端口号。
- strictPort：如果设置为 true，当端口被占用时，Vite 会退出。
- https：启用 HTTPS。
- open：启动服务器后自动在浏览器中打开应用。
- proxy：配置代理，将请求转发到另一个服务器。
-
plugins：用于配置 Vite 插件。你可以在这里添加 Vite 插件来扩展 Vite 的功能。
-
resolve： 配置模块解析选项。
- alias：配置路径别名，可以简化模块的导入路径。
四、编写代码
创建简易用户登录界面
1. HTML
基本的HTML格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>
常用标签
- 文档结构标签
<html>: 定义 HTML 文档的根元素。 <head>: 包含文档的元数据（meta-data），如标题和链接。 <body>: 包含文档的主体内容。 - 头部标签
<title>: 定义文档的标题，显示在浏览器标签栏。 <meta>: 定义文档的元数据，如字符集、作者、描述等。 <link>: 链接外部资源，如 CSS 文件。 <style>: 内部 CSS 样式。 - 文本格式化标签
<h1> 到 <h6>: 定义标题，<h1> 为最高级别，<h6> 为最低级别。 <p>: 定义段落。 <a>: 定义超链接，href 属性指定链接目标。 <strong>: 定义重要的文本（加粗）。 <em>: 定义强调的文本（斜体）。 - 列表标签
<ul>: 定义无序列表。 <ol>: 定义有序列表。 <li>: 定义列表项。 - 图像和多媒体标签
<img>: 定义图像，src 属性指定图像路径，alt 属性提供替代文本。 <video>: 定义视频，src 属性指定视频路径，controls 属性添加播放控件。 <audio>: 定义音频，src 属性指定音频路径，controls 属性添加播放控件。 - 表格标签
<table>: 定义表格。 <tr>: 定义表格行。 <td>: 定义表格单元。 <th>: 定义表头单元。 - 表单标签
<form>: 定义表单。 <input>: 定义输入控件。 <textarea>: 定义多行文本输入控件。 <button>: 定义按钮。 <select>: 定义下拉列表。 <option>: 定义下拉列表中的选项。 - 容器标签
<div>：最常用的容器标签，用于将多个元素分组到一个块级容器中。通常用来应用样式或进行 JS 操作。 <span> 标签是行内容器标签，用于将文本或其他元素分组到一个行内容器中。 <main> 标签定义文档的主要内容区域。每个页面只能有一个 <main> 元素，通常包含页面的核心内容。
常用属性
- 全局属性
id: 定义元素的唯一标识符。 class: 定义元素的类名，便于 CSS 和 JavaScript 选择。 style: 内联样式。 title: 提供元素的额外信息（鼠标悬停时显示）。 - 特定属性
href（在 <a> 标签中）: 指定链接目标。 src（在 <img>、<video>、<audio> 标签中）: 指定资源路径。 alt（在 <img> 标签中）: 提供替代文本。 type（在 <input> 标签中）: 指定输入类型，如 text、password、checkbox。 name（在 <input> 和 <form> 标签中）: 指定元素的名称，用于表单提交。
HTML5
- 语义化标签
<header>: 定义页面或部分的头部。 <nav>: 定义导航链接的部分。 <section>: 定义页面中的独立部分。 <article>: 定义独立的内容块。 <aside>: 定义内容之外的部分，如侧边栏。 <footer>: 定义页面或部分的底部。 - 多媒体标签
<video>: 定义视频。 <audio>: 定义音频。 <canvas>: 定义图形绘制区域。 - 表单控件
新增的输入类型，如 email、url、date、number。 新的属性，如 placeholder、required。 - 离线和存储
localStorage 和 sessionStorage: 客户端存储数据。 IndexedDB: 浏览器内建数据库。
高级用法
响应式设计
使用 <meta name="viewport" content="width=device-width, initial-scale=1.0">
来实现响应式设计。使用媒体查询来适应不同屏幕尺寸的样式。
HTML 模板
<template>: 定义可以在页面加载时不渲染的模板。
自定义数据属性
data-* 属性允许存储自定义数据，例如 <div data-user-id="12345"></div>。
示例
实现简单用户登录界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="./src/style.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<button type="submit">Login</button>
</form>
<p id="error-message" class="error-message"></p>
</div>
<script type="module" src="./src/main.ts"></script>
</body>
</html>
2. CSS
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述网页文档（通常是 HTML）的样式的语言。它允许开发者控制网页元素的外观，包括布局、颜色、字体、间距等。CSS 提供了灵活的方式来美化和布局网页，使其具有更好的视觉效果和用户体验。
基础概念
-
选择器（Selectors）：选择器用于指定要应用样式的 HTML 元素。例如：
p { color: blue; }上述代码将所有
<p>元素的文本颜色设置为蓝色。 -
属性（Properties）：属性定义了样式的具体设置。例如：
p { color: blue; /* 文本颜色 */ font-size: 16px; /* 字体大小 */ margin: 10px; /* 外边距 */ } -
值（Values）：属性的具体值。例如，color 属性的值可以是颜色名称、十六进制值、RGB、HSL 等：
color: #ff0000; /* 红色 */ color: rgb(255, 0, 0); /* 红色 */ color: hsl(0, 100%, 50%); /* 红色 */ -
规则集（Ruleset）：规则集由选择器和一组属性-值对组成。例如：
h1 { color: green; font-size: 24px; }
选择器
基础选择器
- 元素选择器：选择所有指定的 HTML 元素。
div { color: red; } - 类选择器：选择具有特定类的元素，类名以 . 开头。
.my-class { font-size: 18px; } - ID 选择器：选择具有特定 ID 的元素，ID 以 # 开头。
#my-id { margin: 20px; } - 属性选择器：选择具有特定属性的元素。
[type="text"] { border: 1px solid #ccc; }
组合选择器
- 后代选择器：选择某个元素的所有后代元素。
.parent p { color: blue; } - 子选择器：选择某个元素的直接子元素。
.parent > p { color: green; } - 相邻兄弟选择器：选择紧接在指定元素后的兄弟元素。
h1 + p { margin-top: 0; } - 通用兄弟选择器：选择所有紧接在指定元素后的兄弟元素。
h1 ~ p { color: red; }
布局模型
盒子模型（Box Model）
每个 HTML 元素都可以视作一个矩形盒子，包括：内容区域、内边距（padding）、边框（border）和外边距（margin）。
div {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 15px;
}
布局模式
- 块级布局（Block Layout）：元素占据一整行，默认宽度 100%。
div { display: block; } - 行内布局（Inline Layout）：元素仅占据内容所需的宽度。
span { display: inline; } - 弹性布局（Flexbox）：用于创建复杂的布局结构，支持弹性盒子模型。
.container { display: flex; justify-content: space-between; } - 网格布局（Grid）：创建二维布局系统，支持行和列的排布。
.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); }
示例
实现简单用户登录界面
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.login-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 300px;
width: 100%;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 5px;
}
input {
padding: 8px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
button {
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
button:hover {
background-color: #0056b3;
}
.error-message {
color: red;
font-size: 14px;
margin-top: 10px;
}
3. TypeScript
详细内容
示例
// main.ts
const form = document.getElementById('login-form') as HTMLFormElement;
const errorMessage = document.getElementById('error-message') as HTMLParagraphElement;
form.addEventListener('submit', (event) => {
event.preventDefault();
const username = (form.elements.namedItem('username') as HTMLInputElement).value;
const password = (form.elements.namedItem('password') as HTMLInputElement).value;
// 简易验证
if (username === 'admin' && password === 'password') {
// 登陆成功
errorMessage.textContent = '';
alert('Login successful!');
// 可以在这里重定向
} else {
// 登录失败
errorMessage.textContent = 'Invalid username or password.';
}
});
五、运行应用
切换目录
确保工作目录为项目根目录，Windows 系统上可以使用cd检查、切换到正确目录。
使用开发服务器进行预览
npm run dev
简单登录界面效果图
构建生产环境代码
Vite 可以将你的应用打包成优化后的静态文件，以便部署到生产环境。
npm run build
> vite-vanilla-test@0.0.0 build
> tsc && vite build
vite v5.3.3 building for production...
✓ 4 modules transformed.
dist/index.html 0.86 kB │ gzip: 0.42 kB
dist/assets/index-COLQPMMA.css 0.64 kB │ gzip: 0.36 kB
dist/assets/index-DlH99HlP.js 1.06 kB │ gzip: 0.56 kB
✓ built in 78ms
本地预览已构建的生产环境版本
npm run preview
> vite-vanilla-test@0.0.0 preview
> vite preview
➜ Local: http://localhost:4173/
➜ Network: use --host to expose
➜ press h + enter to show help
1835
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
