如何将 Vite 添加到现有的 Vue3 Typescript 项目

最新推荐文章于 2024-06-30 11:52:55 发布
最新推荐文章于 2024-06-30 11:52:55 发布
阅读量1.4k 收藏
点赞数
文章标签： typescript
原文链接：https://niclasnummel.medium.com/how-to-add-vite-to-an-existing-vue3-typescript-project-7fe96e6b7c42
版权

Vite 基本上是webpack的替代品，并且可以非常快速地构建您的 JavaScript 包。它有：

  • 💡 即时服务器启动
  • ⚡️ 热模块更换 (HMR)
  • 🛠️ 丰富的功能
  • 📦 优化构建
  • 🔩 通用插件
  • 🔑 全类型 API

但是如何使它与现有的 Vue3 Typescript 项目一起工作？

        首先，您要安装 Vite 和 @vitejs/plugin-vue 作为开发人员依赖项。

npm install vite @vitejs/plugin-vue --save-dev

最低0.47元/天 解锁文章
jeans5201
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vite简介/如何在已有项目中使用vite
Chancetop的博客
10-21 1742
开箱即用的一种新型前端构建工具
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
vue3老项目如何引入vite
weixin_45563734的博客
12-22 922
vue3老项目如何引入vite
@vue/cli创建的vue3 / vue2项目迁移到vite上
winne雪
04-17 6070
一、迁移过程 vite官网：点击这里 兼容性注意：Vite 需要 Node.js 版本 >= 12.0.0。 1、创建vite项目 npm init @vitejs/app 根据提示把项目名、选择创建的项目类型(我们这里选vue)，语言(javascript) 2、把vue/cli创建的vue3项目中package.json依赖包搬到vite的package.json中 搬完了之后记得使用 npm install安装依赖包。 3、把vue/cli项目中的src目录整个搬到vite项目中替换掉src
在Vue3项目中引入Vite进行热更新
最新发布
Java程序员专栏
06-30 571
完成以上步骤后，你的Vue3项目便成功使用了Vite进行热更新，你可以享受更高效的开发体验。在项目的根目录下创建一个名为`vite.config.js`的文件，准备配置Vite。Vite会自动启动开发服务器，并在文件发生变化时进行热更新，确保开发过程更加流畅高效。第五步：修改package.json脚本，使用Vite进行开发启动。第三步：在项目根目录创建一个vite.config.js文件。第一步：初始化一个Vue3项目，可以使用Vue CLI。第二步：安装Vite，使用npm或yarn。
使用 ViteJs 将 Jest 测试集成到现有的 Vue 3 项目中
前端程序员、项目经理、人工智能博主
07-10 844
构建的现有项目中的挑战。我在各种博客上找到有用的安装指南时遇到了困难。然而，经过多次尝试和付出很大的努力，我最终找到了解决方案。在这篇博文中，我的目标是提供分步安装指南，以帮助其他可能遇到同样挑战的人。****🧪Jest 由 Facebook 开发，是一个广泛使用的 JavaScript 测试框架。它专为测试 JavaScript 应用程序而设计，包括 React、Vue 和 Angular 等前端框架以及后端 Node.js 应用程序。
这是一份保姆级Vue3+Vite实战教程
热门推荐
很多时候犯错都是在不知情的情况下发生的
02-12 1万+
ESLint 不仅能够检测代码中的错误，而且在许多情况下，可以为我们自动纠正错误。如上，这是我电脑 nrm 管理的镜像源列表，最后一个是我公司内网的所以打码了，除了最后一个都是安装 nrm 自带的，你可以使用 nrm use 命令很方便的去切换源，npm 默认就是列表中名为 npm 的源，如果你下载不下来一些工具，可以切换为 taobao 源，当然安装完成后最好切回来，因为除了 npm 源，其他源在下载某些包时，都可能会出现一些莫名的问题。
vue3 + vite
WJLSH123的博客
04-26 7507
端口控制 + 跨域 在vite.config.js文件中 import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import path from 'path'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], base: "./",//打包路径 resolve: { alias: {
Vue3.0 + Vite 搭建 + API详解【持续更新】
weixin_44216637的博客
05-15 1907
api + 性能提升
使用vite创建vue项目和打开已创建的vue项目
baidu_40409033的博客
06-13 605
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目 使用npm：创建好的一个项目在关闭后，再次打开的步骤 打开目标项目文件夹路径下的集中终端，输入指令即可。 `......
最新完整Vite+Vue3+TypeScript项目实战.zip
05-10
最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新完整Vite+Vue3+TypeScript项目实战 最新...
electron-vite2-vue3-typescript-Test
04-22
该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得...
vite-best-template::vulcan_salute:实施vite + vue3 + TypeScript最佳项目实践模板
04-23
该模板将帮助您开始在Vite中使用Vue 3和Typescript进行开发。 推荐的IDE设置 + 。 确保在设置中启用vetur.experimental.templateInterpolationService ！ 如果使用[removed] 是当前处于RFC阶段的功能。 要获得...
基于Vue 3和Vite的TypeScript开发模板设计源码
05-25
本源码为基于Vue 3和Vite的TypeScript开发模板设计，包含11个TypeScript文件、6个JSON...该项目旨在为用户提供一个全面、便捷的开发模板解决方案，通过Vue 3、Vite和TypeScript技术的结合，为用户带来高效的开发体验。
Vue 3 + TypeScript + Vite + pinia + router 脚手架
10-12
Vue 3 + TypeScript + Vite + Pinia + Router 脚手架是一个高效且现代的前端开发环境，专为构建大型、复杂应用而设计。这个脚手架集合了多个流行的库和技术，旨在提供一个快速、类型安全且易于维护的开发体验。 ...
vite-vue3-template:Vite + Vue3项目模板
03-18
Vite + Vue3 项目模板是现代前端开发中的一个高效构建工具，它结合了Vue 3框架的最新特性与Vite的快速开发优势。Vite是由Vue.js的作者尤雨溪开发的一款新型构建工具，旨在解决传统Webpack在开发阶段的性能瓶颈。Vue ...
详解Vite创建Vue3项目+vue-router+ts+vite+element-plus
qq_44552416的博客
01-17 1810
在之前的文章中写过“Vue3+TS+ElementPlus的安装和使用教程【详细讲解】”，但那篇文章写的是创建vue3的项目没有使用到Vite构建工具进行创建还是使用的常规webpacket构建工具进行创建的。提到Vite和webpacket的时候我们可以简单说一下。Vite 和 Webpack 都是现代化的前端构建工具，它们可以帮助开发者优化前端项目的构建和性能。虽然它们的目标是相似的，但它们在设计和实现方面有许多不同之处。具体的区别和工作原理我们可以看此文章“vite和webpack的区别和作用。
vue3和vite
qq_34200636的博客
12-30 2138
新建vue3项目，并使用vite
如何创建vite vue3 typescript项目
09-11
创建 Vite Vue 3 TypeScript 项目的步骤如下： 1. 确保你已经安装了 Node.js。你可以在终端中运行 `node -v` 来检查是否已安装。 2. 打开终端，并进入你想要创建项目的目录。 3. 运行以下命令来创建一个新的 Vite 项目： ``` npm init @vitejs/app my-vue-project --template vue-ts ``` 这将使用 Vite 提供的模板来创建一个基于 Vue 3 和 TypeScript 的项目。 4. 进入项目目录： ``` cd my-vue-project ``` 5. 安装项目依赖： ``` npm install ``` 6. 运行以下命令来启动开发服务器： ``` npm run dev ``` 这将启动一个开发服务器，并在浏览器中打开默认的 Vite 开发页面。 现在，你已经成功创建了一个 Vite Vue 3 TypeScript 项目，可以开始开发了！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值