vite使用方法

最新推荐文章于 2024-06-09 16:20:20 发布

还有sei～

最新推荐文章于 2024-06-09 16:20:20 发布

阅读量2.9k

点赞数 1

分类专栏：前端文章标签：前端 javascript vue.js npm 前端框架

本文链接：https://blog.csdn.net/weixin_47872937/article/details/126942719

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vite使用方法

Vite是新一代的前端构建工具，现在用的多的是Webpack

优点如下：

- 在开发环境中，无需打包操作，可快速的冷启动 。
- 轻量快速的热重载（HMR）。
- 真正按需求编译，不再等待整个应用编译完成 。

自动化配置Vite

1. npm init vite-app 目录名 // 创建一个vite文件夹
2. cd 目录名 // 进入到这个文件夹
3. npm install // 安装vite
4. npm run dev //运行vite

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

还有sei～

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vite使用方法

vite使用方法
复制链接

扫一扫

专栏目录

vite开发vue3小结

木玄客的博客

11-01

369

vite+vue3+vuex+vue-router基础项目搭建-自用

vite后台实战项目实录（一）

xiaowu1127的博客

01-04

483

vite后台实战项目实录

参与评论您还未登录，请先登录后发表或查看评论

vite基础知识与冷启动

weixin_61006262的博客

07-14

800

vite 是一个基于 Vue3 单文件组件的非打包开发服务器快速的冷启动，不需要等待打包操作；即时的热模块更新，替换性能和模块数量的解耦让更新飞起；真正的按需编译，不再等待整个应用编译完成，这是一个巨大的改变。并且vite也成功地革了webpack的命，让webpack开发者直接喊大哥：尤神放弃webpack那么vite是如何做到这些的呢？

Vite的基本使用

qq_54889094的博客

04-23

436

Vite的基本使用

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

最新发布

CYK_byte的博客

06-09

1096

a）这里我们只需要在 vite.config.js 文件中引入 elementPlus 的解析器，然后把她交给 Components 按需引入插件即可.之后就可以观察到项目中多出了 node_modules 文件（这个文件中存放的就是下载好的依赖），然后通过 npm run dev 就可以成功了。c）接下来你会发现，在 Home.vue 组件中使用 Foo.vue 组件，就可以不用写 import 了~a）例如我们在 Home.vue 文件中使用 ref 写了一个计数器（点击按钮，count++）.

Vite基本使用

m0_66711291的博客

05-28

9793

文章目录什么是vite创建项目1. 输入2. 安装vite3. 配置项目的基本信息4. 预览效果配置项目配置项配置vue.config.jsvue-routervuexaxiosless 什么是vite vite是vue官方推出的一个打包工具，打包速度比webpack要快得多，具体为什么快我看不懂。总之就是一个打包工具，也可以代替脚手架来创建项目创建项目按照下面的命令可以创建出一个项目 1. 输入 npm init vite@latest 或者 npm create vite@latest 2

vite工具，创建Vue项目，并运行

Smart_11的博客

02-01

235

vite工具，创建Vue3项目

利用Vite或者webpack创建Vue项目，并启动Vue项目

杜晓帅~的博客

09-04

6243

一篇文章带你了解如何使用Vite或者webpack打包Vue项目，并成功启动

vite创建项目、目录结构分析以及构建应用

m0_56571733的博客

11-01

506

项目启动完成。

Vite项目启动都做了什么？

梅花寺

01-16

2223

主要了解了下关于 vite 启动过程中，文件处理、热更新的执行过程，源代码中有很多细节处理，有兴趣可以去深入研究一下，在此过程中，了解了一些 npm 包及其作用，如cacpicocolorschokidar等，以及http缓存的应用，还有发现源码中会有很多map、set数据结构的使用，包括数据增、删、改、是否存在等，带着问题继续探索。为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。

Vue----vite 的基本使用

emmmm.....

04-29

1万+

文章目录2 vite 的基本使用2.1 创建 vite 的项目2.1.1 在对应的文件夹下打开命令窗口2.1.2 运行 npm init vite-app 项目名称2.1.3 运行 cd 项目名称2.1.4 运行 npm install2.1.5 运行2.1.6 打开网站2.2 梳理项目的结构2.3 vite 项目的运行流程2.3.1 在 App.vue 中编写模板结构2.3.2 在 index.html 中预留 el 区域2.3.3 在 main.js 中进行渲染 2 vite 的基本使用 2.1 创建

Vue的新型前端构建工具Vite怎么用

倚栏听风

10-27

1154

Vite

终于搞明白，vite为什么比webpack快了！运行原理、构建方式等方面到底有什么不同！

SmileLife123的博客

09-28

322

1.前端常见工具之间的定位与联系，如webpack、rollup、vite、esbuild、vue-cli等。 2.从运行原理、构建方式、HMR热更新机制、使用成本等方面逐一去分析，vite与webpack之间的差异。

vite简介/如何在已有项目中使用vite

Chancetop的博客

10-21

1735

开箱即用的一种新型前端构建工具

vite入门/徒手搭建vite/配置vite/使用vite脚手架/vite步骤

热门推荐

ispaomoya博客

01-13

4万+

vite入门，认识vite，配置vite，了解vite脚手架

vite 项目运行时出错：‘vite‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

虎康的博客

03-21

4976

因为使用vite创建vue3.0项目的时候，vite不会自动帮助我们install相关的依赖，需要我们手动去安装，然后我去项目的node_modules目录里面查看，果然什么都没有。所以说出现这个问题的原因是：缺少安装依赖这一步！vite不像node或cli，会自动帮助我们执行npm i (install)命令去下载相关依赖，需要我们手动下载。

使用 Vite 构建 Vue 3项目

weixin_58431406的博客

06-23

1636

Vite是一种新型前端构建工具，能够显著提升前端开发体验，

vite搭建项目

qq_41910359的博客

06-12

2328

使用vite搭建vue3项目

请教我vite的使用方法

03-30

Vite 是一个基于 ES Modules 的构建工具，它可以帮助我们快速地搭建一个现代化的前端开发环境。以下是 Vite 的使用方法： 1. 全局安装 Vite： ```shell npm install -g vite # 或者 yarn global add vite ``` 2. 在项目根目录下运行以下命令初始化项目： ```shell npm init vite-app my-project # 或者 yarn create vite-app my-project ``` 这个命令会在当前目录下创建一个名为 my-project 的新项目，并自动下载所需的依赖。 3. 进入项目目录并启动开发服务器： ```shell cd my-project npm run dev # 或者 yarn dev ``` 在浏览器中访问 http://localhost:3000 即可预览项目。 4. 在开发过程中，你可以在 src 目录下创建自己的代码文件，并在入口文件 main.js 中引入： ```javascript import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') ``` 5. 打包项目： ```shell npm run build # 或者 yarn build ``` 这个命令会生成一个 dist 目录，里面包含了打包后的项目文件。以上就是 Vite 的基本使用方法，更详细的使用文档可以参考官方文档：https://vitejs.dev/。

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交