2.1 Vite + Vue 3 + TS 项目脚手架深度配置

已于 2025-03-10 07:23:50 修改
阅读量5.8k 收藏 10
点赞数 9
CC 4.0 BY-SA版权
分类专栏： Vue3+TypeScript+DeepSeek全栈开发实战 文章标签： vue.js 前端 javascript
于 2025-03-10 07:17:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_16242613/article/details/146133085

在这里插入图片描述

文章目录

一、环境准备与技术选型

1.1 版本要求

# 推荐版本组合
Node.js >= 18.12.0
Vite 5.x
Vue 3.4+
TypeScript 5.2+

1.2 核心依赖清单

{
   
   
  "dependencies": {
   
   
    "vue"
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Vue--》超详细教程——vite脚手架的搭建与使用
ztK63LrD的博客
12-29 5210
我们要知道Vue是有两个开发者工具的，分别适配Vue2和Vue3，之前在学习Vue2时使用的工具仅限于Vue2使用，在Vue3项目中是不能进行使用的，所有我们还是需要单独安装一个适配Vue3的开发者工具。安装完成打开了开发者模式，小伙伴可能会发现，浏览器的右上角没有Vue插件的标志啊，只需如下操作即可。在工程化的项目中，vue要做的事情很简单，通过main.js把App.vue渲染到index.html的指定区域中。当然你也可以同时打开2和3的工具，用哪个版本的Vue，哪个版本的vue开发者工具就是亮。
十二、vite配置详解
张先森的博客
08-25 1万+
vite配置详解
Vue3+Vite+TS 搭建脚手架
m0_53912016的博客
07-04 837
vue3+TS+vite
Vue3+Vite+TS 快速搭建一套实用的脚手架
传说中的腿腿的博客
05-29 6638
Vue3出了已经有一段时间了，之前做的项目基本都是Vue2+webpack做的，正好现在马上要接一个新的项目，先手撸一套脚手架试试水~ 技术栈 开发工具：VSCode 代码管理：Git 前端框架：Vue3 构建工具：Vite 路由：vue-router 4x 状态管理：vuex 4x AJAX：axios UI库：element-plus 数据模拟：mockjs 代码规范：eslint 代码格式化：Prettier css预处理：sass
vue3的vite配置
weixin_52663662的博客
11-27 3512
vue3的vite配置
vue3+vite+ts 搭建脚手架01创建vite项目并且在项目中初次使用router
不染-9732
03-21 717
vue3+vite+ts 搭建脚手架01创建vite项目并且在项目中初次使用router
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+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架
BDawn的专栏
11-04 1148
从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架
创建 vite + vue3 + ts 项目简单笔记
qq_33365152的博客
09-16 705
创建 vite + vue3 + ts 项目简单笔记、vite、vue3、ts、TypeScript
vite入门/徒手搭建vite/配置vite/使用vite脚手架/vite步骤
热门推荐
ispaomoya博客
01-13 4万+
vite入门，认识vite，配置vite，了解vite脚手架
Vite + Vue3 + TS从零搭建企业级项目脚手架
2401_85392853的博客
05-21 867
【代码】Vite + Vue3 + TS从零搭建企业级项目脚手架。
3分钟教你创建一个vite+ts+vue3的脚手架2024年。
2401_86638866的博客
09-06 1046
main.ts 文件import store from ‘./store’// 引入createApp(App).use(store).mount(‘#app’) // 使用。
基于vite创建一个脚手架（快速入门）
2302_81659011的博客
11-29 2202
vite脚手架的初步配置
vue3+vite+ts 搭建脚手架02 配置@路径
不染-9732
03-27 842
vue3+vite+ts 搭建脚手架02 配置@路径，页面简单布局
vite和vite脚手架的安装
qq_45223390的博客
07-05 1029
vite npm install vite -g, vite脚手架 npm install @vitejs/create-app -g
使用vite创建vue脚手架
sunnyboysix的博客
09-21 1598
一 安装依赖 npm install -g create-vite-app 二 新建项目 create-vite-app projectName 三 安装依赖启动项目 cd projectName npm install npm run dev
关于uniapp的真机调试
qq_43505774的博客
12-27 2226
下载360安全卫士 安装360手机助手（其他软件助手也可以） 将数据线插入电脑连接USB，把手机的开发者模式打开 魅族为例 点击设置 打开关于手机 多次点击版号 打开开发者模式 然后重回设置 点击辅助功能 下拉 就会看见 开发者选项 打开USB调试 用手机助手连接手机成功之后 打开HBuilderX使用运行 就可以看见真机型号， 会提示安装真机插件大概一百多m 然后360会自行安装手机360助手 然后就安装App在手机上面运行 ...
Vue移动应用案例
最新发布
2509_93942886的博客
11-24 210
从基础的Vue核心，到路由、状态管理，再到UI组件库如Vant、NutUI，以及多端框架uni-app、Taro，工具链已经相当成熟。最初版本在千元安卓机上直接卡死，后来我们做了虚拟渲染——只渲染可视区域内的弹幕，同时用Web Worker处理弹幕数据，终于解决了卡顿。性能优化方面，除了常规的代码分割、懒加载，我们还做了很多移动端特有的优化。在移动优先的时代，Vue让前端开发者有了更多可能性。经过多个项目的实践，我总结出Vue移动开发的几个要点：组件设计要原子化，状态管理要适度，性能监控要常态化。
如何用vite+vue3+ts创建项目
01-25
使用vite+vue3+ts创建项目的步骤如下： 1. 首先，确保你已经安装了Node.js和npm。可以在终端中运行以下命令来检查它们的版本： ```shell node -v npm -v ``` 2. 使用以下命令全局安装vite脚手架： ```shell npm install -g create-vite ``` 3. 创建一个新的vite+vue3+ts项目。在终端中运行以下命令： ```shell create-vite my-v3 --template vue-ts ``` 这将创建一个名为my-v3的项目，并使用vue-ts模板。 4. 进入项目目录： ```shell cd my-v3 ``` 5. 安装项目依赖： ```shell npm install ``` 6. 启动开发服务器： ```shell npm run dev ``` 这将启动一个本地开发服务器，并在浏览器中打开项目。 现在，你已经成功创建了一个vite+vue3+ts项目。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北辰alk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值