vite使用方法

最新推荐文章于 2024-05-10 18:35:03 发布

还有sei～

最新推荐文章于 2024-05-10 18:35:03 发布

阅读量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

366

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

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

xiaowu1127的博客

01-04

480

vite后台实战项目实录

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

vite基础知识与冷启动

weixin_61006262的博客

07-14

792

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

Vite的基本使用

qq_54889094的博客

04-23

433

Vite的基本使用

vite构建包本地启动

最新发布

Java小白白的博客

05-10

363

在本地启动 Vite 前端项目并进行开发服务器部署需要安装一些 npm 包。这是用于在开发过程中实时预览项目的服务器。目录启动一个静态文件服务器，通常在。这会启动一个开发服务器，通常在。替换为你实际的项目目录。

Vite基本使用

m0_66711291的博客

05-28

9726

文章目录什么是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

233

vite工具，创建Vue3项目

vite+vue3使用模块化批量发布Mockjs接口

03-29

在现代前端开发中，使用Vite和Vue3的组合已经成为了一种高效且灵活的选择。"vite+vue3使用模块化批量发布Mockjs接口"这个主题涵盖了如何在Vite搭建的环境中，结合Vue3和Mockjs来实现接口的模块化和批量处理。这将...

Vue 中使用 CSS Modules优雅方法

08-27

主要介绍了Vue 中使用 CSS Modules优雅方法,本文文字结合实例代码的形式给大家介绍的非常详细，需要的朋友可以参考下

vite+vue3动态模块化导入并使用pinia

03-25

4. **使用Pinia**：Vue3组件内，可以使用`useStore`函数来获取对应的Pinia store实例，然后直接调用store中的方法或访问状态。这样，组件就能根据需要即时获取和修改状态，同时避免了不必要的初始加载开销。 5. **...

vite-react-rollthedice:使用Vite和Reactjs演示简单的应用程序

05-25

在"vite-react-rollthedice"项目中，我们可以看到如何将Vite与React结合使用。首先，通过Vite的初始化命令创建项目结构，安装React及其依赖。项目的主入口文件通常为`index.html`，这里会引入`vite`的服务器脚本以...

vite2.0+react17+mobx+antd带登录，tabs多开窗口的应用系统框架

03-21

1.采用vite搭建，支持图片压缩，兼容ie11，包名自定义，proxy代理请求，less语法，自动生成压缩包框架，框架主题色定制和公用样式开发 2.请求api接口方法采用axios封装，带响应拦截以及请求拦截事件 3.模拟登录页...

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

杜晓帅~的博客

09-04

6214

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

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

m0_56571733的博客

11-01

491

项目启动完成。

Vite项目启动都做了什么？

梅花寺

01-16

2217

主要了解了下关于 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

1146

Vite

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

SmileLife123的博客

09-28

317

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

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

Chancetop的博客

10-21

1719

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

请教我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/。

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

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

提交