vite 初始化常用插件

最新推荐文章于 2024-07-06 17:32:32 发布
最新推荐文章于 2024-07-06 17:32:32 发布
阅读量628 收藏
点赞数
分类专栏： vue 文章标签： vue.js javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58039950/article/details/124699982
版权
本文介绍了Vite的快速创建项目的优势，并详细讲解了如何使用Vite的插件，包括@vitejs/plugin-legacy以支持老旧浏览器，vite-plugin-banner用于在生成的JS文件中添加注释，vite-plugin-html实现HTML压缩和模板功能，以及unplugin-auto-import自动导入API。此外，还提到了import语法的raw写法及其应用场景。
摘要由CSDN通过智能技术生成

Vite 官方中文文档

webpack

  • 细颗粒
  • vue-loader ts-loader
  • 原理：
    • 把所有的src文件打包成一个bundle.js文件→>慢

vite 创建项目

使用 Yarn:

$ yarn create vite

vite →es module 比较火 浏览器的特性所以变快了

插件

• @vitejs/plugin-legacy - Legacy browser support.

yarn add @vitejs/plugin-legacy

使用

// vite.config.js
import legacy from '@vitejs/plugin-legacy'

export default {
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
}
  • vite-plugin-banner 支持你生成的JS文件增加注释

https://github.com/chengpeiquan/vite-plugin-banner

npm instal

最低0.47元/天 解锁文章
jpruby
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vite-plugin-html:一个用于处理html的vite插件。 它基于lodash模板开发
05-14
vite-plugin-html English | 用于index.html的Vite插件，可提供基于Minify和EJS模板的功能。 安装（纱线或npm） 节点版本： > = 12.0.0 版本号： > = 2.0.0 yarn add vite-plugin-html -D 或者 npm i vite-plugin-html -D 用法 更新您的index.html以添加一些EJS标记 < head > < meta charset =" UTF-8 " /> < link rel =" icon " href =" /favicon.ico " /> < meta name =" viewport " content =" width=device-width, initial-scale=1.0 " /> < title > < %
vite-plugin-html-env:一个重写HTML的Vite插件
05-01
vite-plugin-html-env 一个用于重写html的Vite插件 用法 npm install --save-dev vite-plugin-html-env # or yarn add vite-plugin-html-env -D // vite.config.js import VitePluginHtmlEnv from 'vite-plugin-html-env' export default { plugins : [ VitePluginHtmlEnv ( ) , // or // VitePluginHtmlEnv({ // CUSTOM_FIELD // }) ] } 建议使用VITE_APP_作为键前缀。 # .env VITE_APP_TITLE=测试标题 VITE_APP_HOST=dev.sev
VUE初始化（通用模板和dev-tools插件）
Arog的博客
12-27 402
vue 模板配置和dev-tools
[Vite]Vite-legacy插件原理了解
最新发布
SCUhzs
07-06 953
[Vite]Vite-legacy插件原理了解
vite 插件配置
weixin_43294560的博客
03-04 4626
1、插件配置 项目根目录新建vite.config.js 引入下载的插件,在plugins中使用 import { defineConfig } from 'vite' import legacy from '@vitejs/plugin-legacy' export default defineConfig({ plugins: [ legacy({ targets: ['defaults', 'not IE 11'] }) ] })
【Vite】Vite配置文件中的插件学习
Triumph_light的博客
11-07 3310
vite会在生命周期的不同阶段去调用不同的插件以达到不同的目的。
vite-vue3-tailwind：具有Vite脚手架，通用ESLint插件的Vue3快速入门样板
02-13
- `main.js`：应用的入口文件，初始化Vue3实例。 - `components`：自定义组件库，存放各个独立的Vue组件。 - `views`：视图组件，通常对应应用程序的不同页面。 - `router`：路由配置，使用Vue Router管理应用的...
集成了各类插件Vue3模板框架
04-07
这些插件和库的集成大大简化了项目初始化工作，使得开发者可以专注于业务逻辑，而不是基础架构的搭建。 Fast-Vue3，作为压缩包文件的名称，可能是一个专门为Vue3设计的快速启动模板。它可能包含了上述提到的Vue3...
vite_windi_sample
05-20
Vite是由Vue.js作者尤雨溪开发的一款现代化的前端构建工具，它利用了ES模块的原生加载能力，实现了快速的热更新和按需编译，大大提升了开发效率。而Windi CSS则是一个实用的CSS框架，它引入了Tailwind CSS的设计理念...
vue3+vite5+vue-router+piniaPC与移动端，各种实用的插件库及对应示例.zip
04-03
- `main.js`：应用的入口文件，初始化Vue实例和相关依赖。 2. `public` 文件夹：存放静态资源，如HTML模板、图片、字体等。 3. `vite.config.js`：Vite的配置文件，可以自定义项目构建设置。 4. `.gitignore`：...
vite-app-test
03-27
2. 初始化项目：`vite init vite-app-test` 3. 进入项目目录并安装依赖：`cd vite-app-test && npm install` 4. 启动开发服务器：`npm run dev` 5. 编写代码，Vite会自动监听文件变化并更新。 6. 生产环境构建：`npm...
vite+vue3项目采用ejs语法配置cdn引入在线依赖
全易
08-17 1389
EJS 支持直接在标签内书写简单、直白的 JavaScript 代码。只需让 JavaScript 输出你所需要的 HTML ，完成工作很轻松！
vite配置
qq_47040462的博客
07-03 938
主要配置有：root(源文件路径)、define（全局常量）、resolve（模块解析）、base(静态文件路径)等。以下也是常用的配置（实际根据具体项目而定）
项目vue-cli脚手架初始化项目、项目的其他配置和路由分析
m0_68997646的博客
10-28 355
项目vue-cli脚手架初始化项目、项目的其他配置和路由分析
vite.config.js 配置参数
wx479的博客
03-28 1805
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import { resolve } from 'path' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { host: '0.0.0.0', open:true, //设置为自动打开网页 }, .
vite配置文件共享配置，公共配置（root，base，mode，define，plugins，publicDir，resolve，html，css，envDir）（2024-05-28）
hap1994的博客
05-28 1487
此选项的值可以是文件的绝对路径，也可以是以项目根目录为基准的相对路径。如果你在你的应用程序中有相同依赖的副本（比如 monorepos），请使用此选项强制 Vite 始终将列出的依赖项解析为同一副本（从项目根目录）。但是要注意，如果你添加的是实际的样式而不仅仅是变量，那这些样式在最终的产物中会重复。启用此选项会使 Vite 通过原始文件路径（即不跟随符号链接的路径）而不是真正的文件路径（即跟随符号链接后的路径）确定文件身份。该值可以是文件系统的绝对路径，也可以是相对于项目根目录的相对路径。
黑马小兔鲜儿Vue3项目 项目初始化
qq_60161705的博客
09-17 203
第一次写博客，见谅。这个笔记是根据黑马最新的小兔鲜儿做的一些步骤，没有太多的说明是为什么这么做的，请大家还是看一遍视频然后再根据这个敲一遍。或者看这个!文档。
Vite插件大全
GuoFei的博客
10-21 6000
Vite下一代前端开发与构建工具 Vite优势 ???? 极速的服务启动 ⚡️ 轻量快速的热重载 ????️ 丰富的功能 ???? 优化的构建 ???? 通用的插件 ???? 完全类型化的API Vue 3 Vitesse 基于Vite的入门模板. vite-vue3-tailwind-starter Vite
vue常用初始化流程
qq_31436871的博客
01-20 445
博客搬运自我的个人博客 chantAria的博客 精力有限,新博客我会同步到CSDN,但博客内容的更新只会出现在个人博客 欢迎大家来玩耍哦! 首先记录下插件与依赖的区别 依赖等同于npm install XXX，它仅仅是把所需的东西放到你的node_modules文件夹中 插件将调用插件自身的js脚本，可以将依赖添加到package.json中，并在项目的适当位置插入导入语句 所以我们需要安装的是插件。 npm install 第一步首先是要进行npm install,不然后续会出很多问题. 安装 ax
使用vite初始化vue3项目
04-28
好的，以下是使用 Vite 初始化 Vue 3 项目的步骤： 1. 首先，确保你的电脑已经安装了 Node.js 和 npm 包管理器。 2. 打开命令行工具，进入你想要创建项目的目录。 3. 运行以下命令安装 Vite： ``` npm install -g vite ``` 4. 运行以下命令初始化 Vue 3 项目： ``` vite create my-vue-app --template vue ``` 其中，my-vue-app 是你的项目名称，可以根据自己的需求进行修改。 5. 等待安装完成后，进入项目目录： ``` cd my-vue-app ``` 6. 运行以下命令启动项目： ``` npm run dev ``` 等待编译完成后，在浏览器中打开 http://localhost:3000 ，你就可以看到 Vue 3 项目的欢迎页面了。 希望这个回答能够帮助到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值