使用Vite搭建vue3+TS项目

最新推荐文章于 2025-04-04 11:13:09 发布
最新推荐文章于 2025-04-04 11:13:09 发布
阅读量749 收藏 11
点赞数 4
CC 4.0 BY-SA版权
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74823863/article/details/144706328

vite简介

vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它具有快速的冷启动，不需要等待打包操作；并且官网说是下一代的前端构建工具。

初始化项目

npm init vite@latest

1.输入项目名称
在这里插入图片描述
2.选择Vue
在这里插入图片描述

3.选择TS
在这里插入图片描述
4.启动项目
在这里插入图片描述
5.项目启动成功
在这里插入图片描述

注意

用vscode进行开发的时候，推荐使用volar,禁用以前vue2常使用的插件Vetur。

修

最低0.47元/天 解锁文章

200万优质内容无限畅学
m0_74823863
关注
vite+vue3+ts 手把手教你创建一个vue3项目
weixin_59916662的博客
10-17 7万+
基本全程cv安装router，less / scss，pinia，axios，element / Ant Design Vue，Echarts ，mockjs，以及如何配置@别名，自定义组件，vue-devtools插件。
Vite + Vue3 + TS从零搭建企业级项目脚手架
最新发布
2401_85392853的博客
05-21 713
【代码】Vite + Vue3 + TS从零搭建企业级项目脚手架。
vite+vue3+ts项目搭建
weixin_44298215的博客
06-06 2411
从0开始搭建一个vue3+vite+ts项目
用vite搭建vue3+ts项目
哈喽234的博客
09-27 1845
1：首先vite环境安装或者2：输入项目的名字,在这里用vue3_test3：选择项目类型，这里选择Vue+ts4：出现下图，初始化基本创建完成项目文件目录如下我们可以发现文件有标红提示，找不到依赖文件，这时候我们到项目目录下，执行一下npm install安装一下相关依赖即可，此时可以看到已经不报错了现在我们npm run dev启动看看此时，项目初始化完成。
用 vite 构建 vue3 + TS 项目实战
weixin_37883657的博客
04-26 1万+
1、项目初始化 npm install create-vite@2.9.0 -g // 全局安装 create-vite npm init @vitejs/app shop-admin // 初始化项目(shop-admin 项目名) cd shop-admin npm install npm run dev 2、eslint 基础配置 npm install eslint --save-dev npm install@eslint/create-confi...
vite创建vue3+ts项目
s_156的博客
04-04 550
如下图最终返回一个本地地址，输入浏览器访问，能打开就没问题了（此处有提示Network：use–host to expose，该问题可在后面配置中解决，解决后再运行会多出几个局域网访问网址，这样只要和你在一个局域网的人都能通过地址访问你的页面了）（注意：下面安装的所有项目依赖包（都在根目录下安装），我的是这一层，可在vs打开的项目里新建控制台面板进行安装（注意路径即可），也可在cmd面板操作）（5）可以保存后，运行看是否报错。（3）选择vue（（有时出现上下键不能选择，手动输入选项回车就行））
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs + Express + postgresql接口
04-10
Vite + Vue3 + ts 注册登录页面书写 搭配Nodejs...一个vue包 vite+vue3+ts+eleplus 配置了router vuex axios postcss-px-to-viewport界面自适应 env prod环境等 启动:均是 npm i npm start 仅供学习哈 也在慢慢完善中
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
基于vite+vue3+pinia+element-plus+ts后台管理系统
04-08
【标题】"基于vite+vue3+pinia+element-plus+ts后台管理系统"是一个现代的前端开发框架，用于构建高效、可扩展的企业级后台管理界面。这个项目整合了多种前沿的技术，旨在提供一个功能全面、性能优异的解决方案，...
vite构建vue3+Ts项目
W2279567793的博客
10-10 7567
vite+vue3+ts项目构建
vue3 +ts 安装并封装axios
热门推荐
weixin_59916662的博客
10-16 2万+
vue3 +ts 安装，封装，使用axios
vue3-使用vite构建vue3+ts项目
m0_60893808的博客
05-11 711
使用 npm# 使用 yarn# 使用 pnpm。
搭建基于 Vite + Vue3 + TS 项目模板
qq_45897239的博客
08-17 1857
一、项目概述 二、创建项目 三、配置路径别名 四、配置路由 五、引入状态管理工具 Pinia 六、引入 UI 框架 Element-plus 七、添加全局接口配置文件 八、集成 Axios 九、集成 VueUse 十、集成 Less
vite 构建 vue3 + ts 项目
weixin_44536001的博客
06-14 509
5.配置tsconfig.json 和 tsconfig.node.json中moduleResolution 属性为node模式，删除 tsconfig.json "allowImportingTsExtensions": true, 不然Visual Studio对于一些引入编译器会报错。7.安装引入自身项目所需依赖如vue-router、piana、element-plus等。6.配置 tsconfig.json，和vite.config.ts中别名相关配置信息。3.进入项目目录 安装依赖包。
vite 创建vue3 ts的项目
借人之智，完善自己
04-06 1112
昨天手贱，在package.js里面不小心加了一个+的字符，导致整个项目编辑的时候，出现了问题。一晚上没有成功，无奈，治好重建，当我重新创建好了之后，发现之前测试的项目有好了。现在记录一下创建项目的流程，以后就好找了。 为什么选择vite vue3 ts 这种。首先，个人感觉vite要比webpackage要快一点。之前一个webpackage什么都没有，启动的话，至少得几秒的时间。vite创建完成之后，启动三位数毫米级，不到1秒的时间。后来随着自己的学习，往里面添加了vuex、 route...
vite+vue3+ts+项目搭建
11-01
vite+vue3+ts+项目搭建是一种基于Vite构建工具，使用Vue3和TypeScript技术栈的前端项目搭建方式。它可以帮助开发者快速搭建一个基于Vue3和TypeScript的前端项目，并且具有较好的性能表现和开发体验。 以下是vite+vue3+ts+项目搭建的步骤： 1. 安装Node.js和npm 2. 使用npm安装Vite：npm install -g vite 3. 创建一个新的Vue3项目：vite create my-project --template vue-ts 4. 进入项目目录：cd my-project 5. 安装项目依赖：npm install 6. 启动项目：npm run dev 在项目搭建完成后，你可以使用Vue Router和Pinia等库来实现路由和状态管理，使用Element Plus等UI库来实现页面布局和组件开发。同时，你也可以使用Vite提供的打包优化功能来提升项目的性能表现。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值