外贸企业网站开发,怎么制作网站上传,网页免费模板大全,极速云建站认识vite vite组成部分
Vite是一种新型前端构建工具#xff0c;能够显著提升前端开发体验。它主要由两部分组成#xff1a;
一个开发服务器#xff0c;它基于 原生 ES 模块 提供了 丰富的内建功能#xff0c;如速度快到惊人的 模块热更新#xff08;HMR#xff09;。一…认识vite vite组成部分
Vite是一种新型前端构建工具能够显著提升前端开发体验。它主要由两部分组成
一个开发服务器它基于 原生 ES 模块 提供了 丰富的内建功能如速度快到惊人的 模块热更新HMR。一套构建指令它使用 Rollup 打包你的代码并且它是预配置的可输出用于生产环境的高度优化过的静态资源。
vite主要功能
以下是 Vite 的主要功能总结
快速开发服务器
即时启动利用原生 ES 模块Vite 可以在几毫秒内启动开发服务器而无需等待整个项目打包。热模块替换 (HMR)通过 HMR可以在开发过程中即时更新模块无需刷新页面提高开发效率。
轻量级打包
现代浏览器支持Vite 主要面向现代浏览器利用它们对 ES 模块的支持减少了传统打包工具的复杂性。优化依赖预构建通过预构建依赖项来提高性能Vite 使用 esbuild 进行快速预构建显著缩短冷启动时间。
丰富的插件系统
插件扩展基于 Rollup 的插件 APIVite 的插件系统允许开发者轻松扩展和定制构建流程。官方插件提供了一系列官方插件如 Vue、React、TypeScript 等简化框架集成。
构建优化
按需加载Vite 支持动态导入和按需加载优化生产环境中的资源加载。Tree-shaking移除未使用的代码减少打包后的文件体积。代码分割自动进行代码分割将代码分成多个小块提升加载性能。
配置灵活
简单配置通过 vite.config.js 文件进行配置默认配置开箱即用适合大多数项目。自定义配置灵活的配置选项允许开发者根据项目需求自定义构建和开发环境。
支持多种前端框架
Vue通过官方插件支持 Vue 3并且支持 Vue 2。React通过官方插件支持 React 和 JSX/TSX。Svelte通过社区插件支持 Svelte。
快速构建工具
esbuild使用 esbuild 进行依赖预构建极大提高了速度。Rollup生产构建使用 Rollup 打包确保生成高质量的代码。
集成工具
CSS 支持内置支持 PostCSS允许使用现代 CSS 特性和插件。静态资源处理支持导入各种静态资源如图片、字体等并自动进行优化和打包。TypeScript 支持通过插件支持 TypeScript无需额外配置。
开发环境增强
模块联邦支持模块联邦允许在多个项目之间共享代码。环境变量支持 .env 文件定义环境变量方便管理不同环境下的配置。
基础使用
1. 安装 Vite
安装 Node.js
首先需要确保系统已经安装了 Node.js。可以从 Node.js 官网 下载并安装最新的 LTS 版本。
创建 Vite 项目
可以使用 npm、Yarn 或 pnpm 来创建 Vite 项目。以下是使用 npm 的命令
npm create vitelatest my-vite-app
cd my-vite-app # 然后按照提示操作即可
npm install上面的命令创建了一个新的 Vite 项目并安装了所需的依赖项。 还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如要构建一个 Vite Vue 项目运行:
# npm 6.x
npm create vitelatest my-vue-app --template vue# npm 7, extra double-dash is needed:
npm create vitelatest my-vue-app -- --template vue# yarn
yarn create vite my-vue-app --template vue# pnpm
pnpm create vite my-vue-app --template vue更多模板 社区维护模板
2. 项目结构
一个典型的 Vite 项目包含以下目录结构
my-vite-app/
├── index.html
├── package.json
├── public/
│ └── favicon.ico
└── src/├── assets/├── components/├── App.vue├── main.js└── styles/index.html入口 HTML 文件。package.json项目的配置信息和依赖项。public/存放静态资源的目录。src/主要的源码目录。
3. 配置 Vite
Vite 的配置文件是 vite.config.js。这是一个基本的配置文件示例
// vite.config.js
import { defineConfig } from vite
import vue from vitejs/plugin-vueexport default defineConfig({plugins: [vue()],server: {port: 3000, // 开发服务器端口},build: {outDir: dist, // 构建输出目录},
})在安装了 Vite 的项目中可以在 npm scripts 中使用 vite 可执行文件或者直接使用 npx vite 运行它。下面是通过脚手架创建的 Vite 项目中默认的 npm scripts
{scripts: {dev: vite, // 启动开发服务器别名vite devvite servebuild: vite build, // 为生产环境构建产物preview: vite preview // 本地预览生产构建产物}
}4. 启动开发服务器
在项目目录中运行以下命令启动开发服务器
npm run dev这将启动 Vite 开发服务器并在浏览器中自动打开项目。
5. 构建生产版本
要构建生产版本可以运行以下命令
npm run build这将生成生产环境的静态文件并将它们输出到 dist 目录中。
6. 示例代码
以下是一个简单的 Vue 组件示例
src/App.vue
templatediv idapph1Hello Vite Vue!/h1/div
/templatescriptexport default {name: App,}
/scriptstyle scoped#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;}
/stylesrc/main.js
import { createApp } from vue
import App from ./App.vue
import ./styles.csscreateApp(App).mount(#app)7. 配置更多功能
Vite 支持多种插件可以根据需要配置更多功能。例如可以添加 TypeScript 支持、CSS 预处理器等。
添加 TypeScript 支持
npm install typescript然后将 src/main.js 重命名为 src/main.ts并更新相应的代码。
其他资源
Vite 官方文档Vite GitHub 仓库
通过以上步骤可以快速上手 Vite 并开始开发现代 Web 应用。如果有更多需求可以查阅 Vite 的官方文档了解更多高级功能和配置选项。
