Vite的使用

最新推荐文章于 2024-06-09 16:20:20 发布
最新推荐文章于 2024-06-09 16:20:20 发布
阅读量1.9w 收藏 6
点赞数 5
分类专栏： Vue2&Vue3 文章标签： vue vue.js vite vue构建工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47529373/article/details/117904735
版权

Vite的使用

浏览器支持esMoudle的弊端

  • script标签需要加入type="module"
  • 而且我们引入第三方包，我们只用了其中的一点点代码，但是浏览器还是会请求其相关没有用到的js文件
  • 当我们有使用TypeScript，less时，浏览器不能识别。
  • 引入文件时，必须定位到确定的文件，且后缀不能省略。

Vite的安装和基本使用

安装：npm install vite -D 可全局安装也可局部安装，我演示时使用的是局部安装

使用： npx vite

我们得提供一个index.html的文件，不然无法请求到。

此时我们引入其他包时可以不用具体到某个文件，引入js文件可以不写后缀。

image-20210613161317408

Vite对CSS、Less、postcss的支持

  • vite是自动支持css的

了解本专栏 订阅专栏 解锁全文 超级会员免费看
独鹿DT
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 14
    评论
专栏目录
订阅专栏
vite 配置自动补全文件的后缀名
hjh15827475896的博客
08-28 2180
如果 想要像 webpack 一样的不用写， 可以在vite.config.js中配置如下就可以了。vite 不建议自动补全，文件的后缀名的。文件是必须要加上 .vue 的后缀名的。
vite使用
qq_36022463的博客
01-14 367
设置name属性：在setup中。重新写一个script标签。
Vite - 开发初体验，以及按需导入配置
最新发布
CYK_byte的博客
06-09 1291
a）这里我们只需要在 vite.config.js 文件中引入 elementPlus 的解析器，然后把她交给 Components 按需引入插件即可.之后就可以观察到项目中多出了 node_modules 文件（这个文件中存放的就是下载好的依赖），然后通过 npm run dev 就可以成功了。c）接下来你会发现，在 Home.vue 组件中使用 Foo.vue 组件，就可以不用写 import 了~a）例如我们在 Home.vue 文件中使用 ref 写了一个计数器（点击按钮，count++）.
(已解决) Vite中编译JSX时在后缀(.vue)单文件报错原因
qq_41308489的博客
11-17 7848
原因: 因为目前@vitejs/plugin-vue-jsx插件无法解析编译.vue后缀的文件 解决： 把.vue后缀文件更改为.jsx文件 就可以执行 App.jsx // 1. Vite在启动时会做依赖的预构建 // 2. 预构建，运行时默认都只会对jsx与tsx做语法转换。不会对js做jsx的语法转换。 // 目前vite不支持.vue单文件的jsx编译 export default { data() { return { counter: 0
vite忽略.vue扩展名 Failed to resolve import ..... Does the file exist?
热门推荐
u010281877的博客
05-07 4万+
在vite脚手架中, 引入时忽略.vue扩展名将导致错误 // 一个名为tsc.vue的文件， import tsc from "./tsc.vue"; // 上面的引入可以正常运行，但 import tsc from "./tsc"; // 将不起作用, 并提示错误 // Internal server error: Failed to resolve import "./tsc" from "somewhere.js". Does the file exist? 这是因为vite已不再默认忽略.v
vue如何使浏览器url固定_vue自动添加浏览器兼容前后缀操作
weixin_31697021的博客
01-12 821
1.安装loader安装postcss-loader 和 autoprefixer下载：cnpm install postcss-loader autoprefixer --save-dev在webpack.config.js里面设置以下代码test:/\.css$/,use: ['style-loader','css-loader',{loader: "postcss-loader",optio...
vite搭建three.js的开发环境
01-06
本篇文章将详细介绍如何使用Vite搭建一个Three.js的开发环境。 首先，我们需要确保我们的系统已经安装了Node.js，因为Vite是基于Node.js运行的。如果尚未安装，可以访问https://nodejs.org/ 下载并安装适合你操作...
如何使用vite-svg-loader
02-23
"使用 Vite-SVG-Loader 实现 SVG 图像的轻量级引入" 在现代 Web 开发中，使用 SVG 图像已经成为一个非常常见的需求，特别是在 Vue 应用程序中。然而，引入 SVG 图像经常会遇到一些问题，例如图像大小问题、浏览器...
vite-mdx:在Vite中使用mdx的示例
03-21
本示例将详细介绍如何在Vite项目中集成并使用MDX。 1. **安装vite-mdx插件** 在Vite项目中使用MDX，首先需要安装`vite-plugin-mdx`插件。打开终端，进入你的Vite项目目录，然后运行以下命令： ```bash npm ...
vue-cli-plugin-vite：与vue-cli一起使用Vite Today
03-04
立即使用Vite 无需任何代码库修改即可直接使用的vue-cli项目。 目录 用法 vue add vite 插件的生成器将为相应的main。{js，ts}编写一些main.html ，因为vite需要html文件作为dev-server条目文件 动机 我们有很多...
mocha-vite-puppeteer:使用Vite捆绑器和Puppeteer运行Mocha测试
03-30
“ mocha-vite-puppeteer”可以与任何现有的Vite项目一起使用，并且不特定于Vue，React或任何其他前端库。 Vite支持JavaScript和TypeScript。 安装 npm install mocha-vite-puppeteer 跑步 使用Mocha一样，您必须...
【vite】你不知道的小妙招，确定不看一下吗？
Yvette Lau的专栏
07-02 965
梁晓莹: 微医前端技术部 一只喜欢读书????&&游泳????????的猪猪女孩～????分析 version：2.3.7。本文将整理 vite 静态资源的几种处理方式，...
vue3使用vite+setup+ts写一个初级前端项目
qq_44760912的博客
10-08 1526
本项目纯粹是为了学习和巩固刚学的vue3组合式api和语法糖，再加上网上流行vite+ts+vue，所以便有了这个历时四天的vue3前端项目。
Vue中import from的来源：省略后缀与加载文件夹
超频化石鱼的博客
11-02 4万+
Vue使用import ... from ...来导入组件，库，变量等。而from后的来源可以是js，vue，json。这个是在webpack.base.conf.js中设置的： module.exports = { resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('s...
vite安装和使用
qianduanxiaohei的博客
08-12 5735
vite安装和使用。搭建vite项目。创建vue项目
基于Vite的Vue3项目导入的时候模块名要不要加扩展名
听海边涛声
05-19 330
基于Vite的Vue3项目导入的时候模块名要不要加扩展名
解决vue3项目vite打包忽略.vue扩展名
chensi_07的博客
05-21 665
项目打包时报could not relolve “...”，因为vite已不再默认忽略.vue扩展名。在vite.config.js中配置vite使其忽略 .vue 扩展名（不建议忽略）注意：即使忽略了.vue文件，在实际写的时候也要加.vue后缀。
vue2.x 项目 webpack升级vite避坑总结
var_deng的博客
09-26 6112
前言 目前一个用webpack构建的vue2.X 项目由于业务扩展越来越大，导致项目在本地编译时热更新很慢，页面更新需要10几秒以上。为提高团体开发速度和效率，最近打算把底部打包构建的环境由webpack迁移为vite。 为什么 Vite 启动这么快 底层实现上， Vite 是基于 esbuild 预构建依赖的 esbuild 使用 go 编写，并且比以 js 编写的打包器预构建依赖, 快 10 - 100 倍。 因为 js 跟 go 相比实在是太慢了，js 的一般操作都是毫秒计，go 则是纳秒
将项目从 vueCli 移植到 Vite vue
you_get_me_there的博客
02-24 622
记录报错提示
vite 打包 js文件
04-07
Vite 是一个非常快速的工具，它可以帮助你打包 JavaScript 文件。 要使用 Vite 打包 JavaScript 文件，你需要先安装 Vite： ```bash npm install vite --save-dev ``` 然后，在你的项目根目录下创建一个 `index.js` 文件，内容如下： ```js console.log("Hello, world!"); ``` 接下来，在终端中运行以下命令： ```bash npx vite build ``` 这将使用 Vite 打包你的 `index.js` 文件，并将其输出到 `dist` 文件夹中。 你可以在 `dist` 文件夹中找到打包后的 JavaScript 文件，并将其用于你的项目中。
评论 14
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值