使用Vite构建现代化前端应用
💓 博客主页:瑕疵的CSDN主页
📝 Gitee主页:瑕疵的gitee主页
⏩ 文章专栏:《热点资讯》
使用Vite构建现代化前端应用
- 引言
- Vite 简介
- 安装 Vite
- 创建项目
- 启动开发服务器
- 项目结构
- 配置 Vite
- 开发模式
- 生产构建
- 使用插件
- 高级配置
- 环境变量
- 代理配置
- 实际案例
- 总结
- 快速冷启动:利用原生 ES 模块导入,Vite 可以在几秒钟内启动开发服务器。
- 即时热更新:通过 HMR(Hot Module Replacement),Vite 可以在保存文件时立即更新页面,无需刷新浏览器。
- 按需编译:Vite 在开发模式下按需编译模块,提高了开发效率。
- 生产构建:Vite 提供了优化的生产构建,支持 Tree Shaking、代码分割等。
npm install -g create-vite
使用 Vite 创建一个新的项目非常简单。运行以下命令选择一个模板:
create-vite my-app
进入项目目录并安装依赖:
cd my-app
npm install
启动开发服务器:
npm run dev
打开浏览器访问 http://localhost:3000,你将看到 Vite 的欢迎页面。
my-app/
├── node_modules/
├── public/
│ └── favicon.ico
├── src/
│ ├── assets/
│ ├── components/
│ ├── App.vue
│ └── main.js
├── .gitignore
├── index.html
├── package.json
├── vite.config.js
└── README.md
Vite 的配置文件是
vite.config.js,可以在这里进行各种配置。以下是一个基本的配置示例:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {port: 3000,open: true},build: {outDir: 'dist',assetsDir: 'assets',rollupOptions: {input: 'src/main.js'}}
});
在开发模式下,Vite 提供了快速的冷启动和即时热更新功能。每次保存文件时,Vite 会立即更新页面,无需刷新浏览器。
构建生产版本的命令如下:
npm run build
构建完成后,生成的文件将位于 dist 目录中。你可以将这些文件部署到任何静态文件服务器上。
@vitejs/plugin-vue 插件以支持 Vue 3:
npm install @vitejs/plugin-vue
然后在 vite.config.js 中配置插件:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()]
});
Vite 支持环境变量,可以在
.env 文件中定义环境变量。例如,创建一个
.env 文件:
VITE_APP_TITLE=My App
VITE_API_URL=https://api.example.com
在代码中使用环境变量:
console.log(import.meta.env.VITE_APP_TITLE); // My App
console.log(import.meta.env.VITE_API_URL); // https://api.example.com
在开发模式下,可以使用代理配置来解决跨域问题。在
vite.config.js 中配置代理:
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'https://api.example.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}
});
Vite 已经被广泛应用于各种场景,例如:
- 单页应用(SPA):构建响应迅速的单页应用。
- 多页应用(MPA):构建多个独立页面的应用。
- 库开发:开发和发布前端库。
Vite 支持丰富的插件生态和高级配置选项,可以满足各种复杂需求。

相关文章:
使用Vite构建现代化前端应用
💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 使用Vite构建现代化前端应用 引言 Vite 简介 安装 Vite 创建项目 启动开发服务器 项目结构 配置 Vite 开发模式 生产构建 使用插…...
PyQt入门指南三十八 QWizard向导组件
在PyQt中,QWizard 是一个用于创建向导式应用程序的组件。向导是一种用户界面模式,它通过一系列逐步的页面引导用户完成某个任务。每个页面通常包含一些输入字段和选项,用户需要在每个页面上完成相应的操作,然后才能进入下一个页面…...
【数学二】线性代数-矩阵-矩阵的概念及运算
考试要求 1、理解矩阵的概念,了解单位矩阵、数量矩阵、对角矩阵、三角矩阵、对称矩阵、反对称矩阵和正交矩阵以及它们的性质. 2、掌握矩阵的线性运算、乘法、转置以及它们的运算规律,了解方阵的幂与方阵乘积的行列式的性质. 3、理解逆矩阵的概念&#x…...
近期学习前端的心得
1.如果你这一行的编辑权利在于你这一行的某个字段的值,你可以使用这样:disabled"scope.row.某字段 ! 某字段的值" 2.如果你不想使用弹出框的形式来修改数据库,可以采用 对“某字段”列使用了 el-input,并绑定了 v-model 到 sco…...
qt QMenu详解
1、概述 QMenu是Qt框架中的一个类,用于创建和管理菜单。它提供了丰富的接口来添加菜单项(通常是QAction对象)、子菜单以及分隔符。QMenu可以嵌入到菜单栏(QMenuBar)中,也可以作为弹出菜单(通过…...
HTMLCSS:旋转的动态卡片
效果演示 这段代码创建了一个具有动态背景和渐变效果的卡片。卡片背景有一个无限循环的旋转动画,增加了视觉吸引力。这种效果可以用于展示个人信息、项目介绍或其他需要吸引用户注意的内容。 HTML <div class"card"><h3>前端Hardy</h3&…...
通过自然语言表达你的想法。GitHub Spark让任何人都能使用人工智能,为自己创建软件...
我们能否让任何人都能使用人工智能,为自己创建软件?尽管开发者喜欢定制自己的开发环境以提高效率和趣味性,但创建个性化应用程序的复杂性常常阻止他们这样做。 如何使个性化软件的创建变得像定制开发环境一样简单?并让更多人能够轻松实现这种…...
c++的list类
本篇将讲述list类中的各种重要和常用函数(begin()、end()、rbegin()、rend()、empty()、size()、front(&#…...
uniapp数据缓存
利用uniapp做开发时,缓存数据是及其重要的,下面是同步缓存和异步缓存的使用 同步缓存 在执行同步缓存时会阻塞其他代码的执行 ① uni.setStorageSync(key, data) 设置缓存,如: uni.setStorageSync(name, 张三) ② uni.getSt…...
HarmonyOS-权限管理
一. 权限分类 1. system_grant system_grant 为系统授权,无需询问用户,常用的权限包括网络请求、获取网络信息、获取wifi信息、获取传感器数据等。 /* system_grant(系统授权)*/static readonly INTERNET ohos.permission.INTE…...
Github 2024-11-02 Rust开源项目日报 Top10
根据Github Trendings的统计,今日(2024-11-02统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Rust项目10Python项目2Dart项目1RustDesk: 用Rust编写的开源远程桌面软件 创建周期:1218 天开发语言:Rust, Dart协议类型:GNU Affero Genera…...
修改HarmonyOS鸿蒙图标和名字,打包后安装到真机,应用图标丢失变成透明,修改名字也不生效,还是默认的labeL解决方案教程
HarmonyOS鸿蒙打包hap 安装应用到桌面没有图标,用hdc安装到真机,打包后应用图标丢失变成透明,名字也还是默认的label的bug,以下是解决方案 以下是修改方案: 1、修改应用名字: 2、修改应用图标:…...
unreal engine5动画重定向
UE5系列文章目录 文章目录 UE5系列文章目录前言一、下载动画资源二、创建IK Rig(IK绑定) 前言 在Unreal Engine 5.4中,动画重定向(Animation Retargeting)和动作匹配(Motion Matching)是两种不…...
蓝桥杯练习笔记(二十-日期问题)
日期题常见于填空题,关键点涉及闰年的判断和星期几的判断 1.根据间隔天数计算日期 题目来源:CSDN算法技能树 在X星系的广袤空间中漂浮着许多X星人造“炸弹”,用来作为宇宙中的路标。 每个炸弹都可以设定多少天之后爆炸。 比如:…...
jenkins 构建报错 mvn: command not found
首先安装过 maven,并且配置过环境变量 win r ,输入 cmd 键入 mvn -v 出现上图输出,则证明安装成功。 原因 jenkins 没有 maven 配置全局属性, 导致无法找到 mvn 命令。 解决方案 找到全局属性,点击新增,配置 MAVEN_HOME 路…...
Vue computed watch
computed watch watch current prev...
【java】java的基本程序设计结构06-运算符
运算符 一、分类 算术运算符关系运算符位运算符逻辑运算符赋值运算符其他运算符 1.1 算术运算符 操作符描述例子加法 - 相加运算符两侧的值A B 等于 30-减法 - 左操作数减去右操作数A – B 等于 -10*乘法 - 相乘操作符两侧的值A * B等于200/除法 - 左操作数除以右操作数B /…...
数据建模圣经|数据模型资源手册卷3,数据建模最佳实践
简介 本书采用了类设计模式的方式对数据模型进行高度抽象总结,展现了常见的数据模型构建模型等模型的作用、层次、分类、地位、沟通方式,和业务规则。使用一个强大的数据模型模式的数据建模,评估特定与广义模型的优缺点,有助于你改…...
Kafka相关知识点(上)
为什么要使用消息队列? 使用消息队列的主要目的主要记住这几个关键词:解耦、异步、削峰填谷。 解耦: 在一个复杂的系统中,不同的模块或服务之间可能需要相互依赖,如果直接使用函数调用或者 API 调用的方式,会造成模块之间的耦合…...
network HCIE认证
#1 ip地址设置 ip add 192.168.1.1 255.255.255.0 ip add 192.168.1.2 255.255.255.0 #2 DHCP 交换机上配置 system-view //进入系统配置 dhcp enable int g0/0/1 //接入接口管理 dhcp select interface //配置dncp选择接口 #3 DNS域名系统 int g0/0/1 dhcp server dn…...
C++_核心编程_多态案例二-制作饮品
#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为:煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例,提供抽象制作饮品基类,提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...
【杂谈】-递归进化:人工智能的自我改进与监管挑战
递归进化:人工智能的自我改进与监管挑战 文章目录 递归进化:人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管?3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...
springboot 百货中心供应链管理系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,百货中心供应链管理系统被用户普遍使用,为方…...
从零实现富文本编辑器#5-编辑器选区模型的状态结构表达
先前我们总结了浏览器选区模型的交互策略,并且实现了基本的选区操作,还调研了自绘选区的实现。那么相对的,我们还需要设计编辑器的选区表达,也可以称为模型选区。编辑器中应用变更时的操作范围,就是以模型选区为基准来…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
dedecms 织梦自定义表单留言增加ajax验证码功能
增加ajax功能模块,用户不点击提交按钮,只要输入框失去焦点,就会提前提示验证码是否正确。 一,模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...
WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
网络编程(UDP编程)
思维导图 UDP基础编程(单播) 1.流程图 服务器:短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...
