Vite - 开发初体验，以及按需导入配置

已于 2025-06-30 17:39:01 修改
阅读量4.5k 收藏 34
点赞数 37
CC 4.0 BY-SA版权
分类专栏： Vue2、Vue3、Vite、CSS 文章标签： arcgis
于 2024-06-09 16:20:20 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CYK_byte/article/details/139560325

  免费查看本文章可前往我的网站：PiQiu

目录

开始

创建一个 Vite 项目

项目结构

/src/main.js

index.html

package.json

vite.config.js

Vite 项目中使用 vue-router

Vite 组件的“按需引入”

传统的方式引入一个组件

传统方式引入带来的问题

解决办法（配置 按需引入 插件）

示例：elementPlus、naive-ui 按需引入

elementPlus 使用 消息提示 css 失效

Vite vue API 的按需引入

传统方式使用 API

解决办法（配置按需引入）

开始

创建一个 Vite 项目

a）在 vscode 中打开终端，输入如下命令：

npm create vite@latest

b）流程如下：

如果是第一次下载，他会询问你下载 vite，输入 y 即可

接着会询问你给项目起什么名字.  默认为 vite-project

接下来我们选择 Vue 即可.

接下来，会询问你选择 js 还是 ts.（本文以 js 为主） 

了解本专栏 订阅专栏 解锁全文 超级会员免费看
vite-plugin-components:V自动导入Vite的按需组件
03-14
vite-plugin-components 按需组件自动导入Vite 用法 :information: 从v0.6.x支持Vite 2， v0.6.x支持Vite 1。 安装 npm i vite-plugin-components -D # yarn add vite-plugin-components -D 将其添加到vite.config.js // vite.config.js import Vue from '@vitejs/plugin-vue' import ViteComponents from 'vite-plugin-components' export default { plugins : [ Vue ( ) , ViteComponents ( ) ] , } ; 就这样。 照常使用模板中的组件，但是不再需要import和component re
前端开发_按需导入_组件库样式插件_vite-plugin-_1744167384.zip
04-09
vite-plugin-style-import是一种专为Vite构建工具设计的插件，Vite是一种新型的前端构建工具，它利用ES模块的原生支持，通过编译来提升开发体验和效率。vite-plugin-style-import插件可以自动识别开发者在源代码中...
【Vite】配置文件详解
lph159的博客
09-21 4844
Vite 是一款由尤雨溪（Vue.js 作者）开发的构建工具，专为现代前端项目而设计。极速启动：Vite 利用浏览器原生支持的 ES 模块，在开发环境中无需打包即可启动服务，极大提升了项目启动速度。模块热更新（HMR）：Vite 支持基于原生 ESM 的模块热替换，实现了快速、无感知的开发体验。高效构建：Vite 使用 Rollup 进行生产构建，支持按需加载和代码分割，提供了优化的生产环境构建。你也可以创建自定义插件，通过resolveIdloadtransform。
vite 按需引入
zy_080400的博客
05-25 733
vite 按需引入, 安装 unplugin-auto-import， unplugin-vue-components。
Vue 3 项目创建（使用Vite）：如何使用Vite快速创建一个Vue 3项目
最新发布
聚焦 Vue 生态与 JS/TS 技术深耕，围绕组件封装、响应式原理、TypeScript 类型设计展开分享。解析工程化配置、性能优化实战方案，拆解复杂业务场景下的技术实现。以代码实例为核心，记录框架特性探索、开发踩坑复盘与最佳实践
10-22 1021
本文介绍了如何使用Vite快速创建Vue 3项目。Vite作为新一代前端构建工具，相比Webpack具有更快的启动速度和热更新能力。文章详细说明了环境准备步骤，包括Node.js安装和镜像源配置，并提供了创建项目的命令示例。对生成的项目结构进行了解析，重点介绍了核心文件的作用。最后讲解了如何启动开发服务器和可选配置TypeScript支持。通过Vite创建Vue 3项目能显著提升开发效率，适合新项目快速搭建。
Vite开发快速入门
xiangzhihong8的专栏
07-21 3155
一、Vite简介 Vite (法语意为 “快速的”，发音 /vit/) 是一种面向现代浏览器的一个更轻、更快的前端构建工具，能够显著提升前端的开发体验。除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。 1.1 Vite组成 Vite构建工具由两部分组成： 一个开发服务器，它基于原生 ES 模块提供了丰富的内建功能，如模块热更新（HMR）。 一套构建指令，它使用 Rollup 打包你的代码，
vite工程化搭建vue项目之自动按需导入
YuShiYue的博客
06-13 1411
这些，如果我们项目中有很多vue文件，每个文件都手动引入的话也不太友好，虽然没啥问题。其实关于antd-design-vue,element-ui等ui库的图标都是可以在这里面找到的。这些包，总之来说可以实现用官方提供的图标集，能实现按需自动引入，也能实现自定义svg等。通过这些配置我们就可以实现在vue组件中想用哪个api，或者组件就用哪个api以及组件。这些编辑器宏我们是不需要导入的，因为vue已经帮我们实现了，但是。组合式开发的时候，大多数情况下我们的代码可能是这样的。这篇文章，因为我现在没有用到。
vite自动按需导入
webbirds的博客
10-12 8981
vite配置自动打包
vue3 vite配置按需自动引入
lee_uncle的博客
03-18 1591
配置按需自动引入，unplugin-auto-import和unplugin-vue-components的安装使用
Vite 入门篇：学会它，一起提升开发幸福感。
斌擎科技
11-17 1356
很多人对构建工具没有什么概念，只知道是用来打包的。那么到底什么是构建工具呢？使用/处理 less / sass使用tsc将 typescript 转换为 javascript使用将 vue 组件模板转换为 render 函数使用babel将 es 的新语法转换为旧版浏览器认识的语法使用uglifyjs将我们的代码压缩成体积更小的文件......我们可以手动把代码挨个处理一遍，但这样效率非常低，当我们稍微修改一点代码，这个流程又要重新走一遍，非常的麻烦。
vbenjs_vite-plugin-theme_1744169103.zip
04-09
Vite是一种新型前端构建工具，它以原生ES模块导入的形式来提供服务，带来了快速的冷启动、即时热更新以及高效的生产构建。Vite的插件机制允许开发者自定义其构建能力，从而使得Vite能够适应各种项目的构建需求。而...
使用 vite-plugin-vue-setup-extend 插件提升 Vue 3 开发体验
一起coding，一起嗨。
01-24 2035
使用 vite-plugin-vue-setup-extend 插件提升 Vue 3 开发体验
vite-plugin-components实现Vite按需组件自动导入
Vite是一种新型的前端构建工具，它以原生ES模块提供了一种快速、简洁的开发体验。它利用浏览器的原生支持，从而避免了传统的打包过程，提供了更快的启动和HMR（热模块替换）速度。Vite特别适合于使用Vue.js框架的...
vite项目构建配置
qq_47040462的博客
07-30 1263
使用npm create vite@latest构建项目，配置项选项react->ts+SWC即可。让后打开项目npm i。
使用vite实现按需引入
exxes的博客
07-02 554
这个本来是在上一篇的里面发的，但那会突然有问题了，应该是我那会看走眼了，明明前一晚已经ok的，只需要在入口文件哪里export就可以了 使用ts的需要编写一个d.ts文件，不然ts会报错，但不影响使用...
Vite 入门
NolanKy 的 技术博客
02-04 612
文章目录一，简介二，使用 一，简介 项目构建打包工具 一个由 vue 作者尤雨溪开发的 web 开发工具 注意：Vite的生产环境下打包是通过Rollup来完成的 Rollup是JavaScript的模块bundler(打包器)，可以将一小段代码编译为更大或更复杂的内容，例如库或应用程序。 也就是说Vite提供的是开发环境中的编译，打包工作是依靠的Rollup。 在使用Vite前，你需要知道一点，目前它只支持Vue3.x的版本。 二，使用 1，npm方式 npm init vite-app <pr
vite 入门
xihuanLilia的博客
05-02 535
Vite什么是 Vite![在这里插入图片描述](https://img-blog.csdnimg.cn/8acc157bd59b4b9bbb573d6ea0104e65.png)简单的说创建初始化 什么是 Vite Vite是新一代的前端构建工具 对比于webpack 他更轻更快 能够显著的提升前端的开发体验 它由两部分组成 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输
vue3之vite按需引入解放双手（unplugin-auto-import）
qq_43371595的博客
06-24 4025
vue3按需引入，不需要每个页面单独引入
Vite入门指南
懒羊羊我小弟的博客
02-13 1173
本文是 Vite 入门指南。Vite 是新型前端构建工具，有极速启动、闪电热更新等优势。文章介绍了环境准备、创建项目、核心功能实践、配置详解、插件系统、生产构建、环境变量等内容，对比了 Vite 与 Webpack 的差异，还给出完整示例代码与最佳实践。掌握 Vite 能让开发者在现代化前端开发中占先机，文末还给出了进一步探索学习的方向
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陈亦康

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值