我在vite项目上踩的坑

已于 2022-03-17 18:31:16 修改
阅读量1.1k 收藏
点赞数
文章标签： vue.js typescript 前端
于 2022-03-17 18:30:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48920202/article/details/123557288
版权
在学习Vue、Vite和TypeScript的过程中遇到了编辑器报错的问题。创建Vite项目后，VSCode中显示组件导入错误，但实际运行正常。通过调整Vetur设置，解决了编辑vite.config.ts时的报错。具体解决方案是：在VSCode的Vetur插件设置里，确保某些特定选项的状态正确。持续更新中，分享更多开发经验。
摘要由CSDN通过智能技术生成

学习vue+vite+ts的坑

1.使用vite创建完成后,导入的组件会在vscode上报错,运行时没有问题,在编辑vite.config.ts时也会报错
解决办法:在vscode上
在这里插入图片描述
这里的对号必须打上
搜索vetur:
在这里插入图片描述

这里的对号必须取消,不然会报错

持续更新中…

weixin_48920202
关注
vite简介/如何在已有项目中使用vite
Chancetop的博客
10-21 1772
开箱即用的一种新型前端构建工具
记一次成功把Vue2后台项目改造成Vite2的踩坑经历
yilingsj的博客
06-02 7633
公司后台项目基于@花裤衩大神的vue-element-admin，随着项目功能的不断完善和需求不断增加，项目启动也变的越来越慢。慢到什么程度呢？我i7-10代16G内存的本本跑项目最快也需要近3分钟，实在难以忍受。几经折腾，终于成功改造成了vite。现在跑项目，5秒内即可跑起来，简直不要太爽！此次改造的过程遇到很多问题，现将遇到的问题做下记录，以防后续改造类似项目时继续踩坑。本次要改造的是一个基于vue-element-admin的后台项目。由于项目比较老，所以没有使用到typescript
使用vite打包时候遇到的坑
weixin_42369612的博客
08-15 9254
使用vite打包时候遇到的坑
【vue3】vite工具创建vue3项目，遇到的坑及解决办法，nvm下载与使用
花椒和蕊的博客
08-22 1035
vite工具创建vue3项目
GIS实战项目12：解决安装依赖报错问题.‘vite‘ 不是内部或外部命令，也不是可运行的程序///npm ERR! code ERESOLVE
最新发布
weixin_55429615的博客
07-04 191
解决方案：手动安装依赖。在 package.json 文件中查找依赖列表，并逐个执行 npm install 命令来安装依赖包。安装完成后，就可以启动了。老师给了一个源代码，需要部署环境并启动。需要安装一下：npm install。报错原因3：缺少依赖且无法解析。最后最后，就可以正常运行了。报错原因2：解析依赖错误。解决方案：配置镜像源。
记录目前使用vue3.2.0&&vite4.2.0时遇到的一些坑-持续更新
qq_43698957的博客
12-06 717
vue ts使用markdown-it需要使用以下命令安装才行。
用vue创建的项目后，使用了boostrap后，内容都是居中的，解决办法
ssigin的博客
03-27 1059
直接把根组件的App.vue中的<style></style>里面的内容清空。
Vue3框架Vite引用vant组件方法及相关问题解决方法
qq_39111074的博客
03-19 3571
Vue3框架Vite引用vant组件方法及相关问题解决方法
vue3移动端项目构建TS，vue3+vant+vite+axios+pinia+sass+typescript
02-08
在使用该架构前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、pinia、vant、sass、vite、vue3和typescript，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配等功能 vue3：...
vue3 PC端项目构建TS，vue3+antd+vite+axios+pinia+sass+typescript
02-18
在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、vue3，其中还会介绍到如何跨页面传递数据、国际化配置、rem适配、状态管理等功能 vue3：...
vite+vue3+typescript 搭建项目框架
qq_25687271的博客
07-24 1485
最近为了挑战自己，接到公司任务，说要写一个新的系统，心血来潮。就打算用新的技术来搭建一个项目框架。选用了vite + vue3+typescript+vant 来搭建。以下是自己一步一步搭建的过程。以及用自己的血泪踩得深坑。（PS:主要是为了激励自己学习新的技术，所以我的项目是从零开始搭建的，边做边学，哭唧唧） 第一步 搭建基础的项目 Vite是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。 通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。 ..
【Vue3】Vue3中安装和配置Vant组件库
【敦厚的曹操】的专栏
12-04 3267
【Vue3】Vue3中安装和配置Vant组件
详细vite创建vue3项目(vue3+vue-router+ts+vite+element-plus+pinia)
热门推荐
qq_44423029的博客
08-17 5万+
超详细步骤vite创建vue3项目，技术栈vue3+ts+vite+element-plus+pinia，跟着做就搭出来了（保姆级）
关于修改vite+vue创建的项目的默认样式问题
weixin_46367832的博客
05-22 274
以上改成最终呈现的形式，修改的代码(主要就是修改根组件的样式）修改了根组件的样式，变成了另一个丑样子。项目默认居中，造出来的这个丑东西。
【Vue3项目搭建至布局】
qq_55054495的博客
02-04 4781
这篇文章内容是从vue3项目构建到实现一个简单的布局，用到组件化原理和路由 vue3创建项目： vue create 项目名称 Manually select features 选择手动选择功能 选择Vue version,babel,TypeScript,Router,Vuex, 选择3.x 下面一路回车等待项目创建完成 创建项目成功后vscode打开 组件化布局（.vue编写->使用页面导入->注册->使用） 在components文件夹下创建Header.vue,Side..
【vue3】使用vite构建vue3项目
嗨，朋友你好！我是前端领域的工作者
03-30 2万+
使用vite构建vue3项目、vite介绍、vite对比webpack
Vuetity水平垂直居中
老码农重操旧事业
12-31 1432
Vuetify 水平垂直居中，通过v-layout、v-flex以及v-container的fill-height属性。 <template> <v-container class="fill-height"> <v-layout align-center align-content-center> <v-flex> <v-container> <v-row class="text-
当使用vue3和element-plus时遇到的无法设置居中问题
woshitugouwat的博客
01-09 1780
vue和elementui不得不说的故事
vue3写的echarts示例：表示总数居中，图表位置。。。
qq_57540936的博客
08-13 825
faf
我想在vite 上使用postcss
07-15
当你想在 Vite 中使用 PostCSS，你需要进行一些配置。首先，确保你已经安装了 PostCSS 相关的依赖。你可以使用以下命令进行安装： ``` npm install postcss postcss-preset-env ``` 接下来，在你的 Vite 项目根目录下创建一个名为 `postcss.config.js` 的文件，并添加以下内容： ```javascript module.exports = { plugins: [ require('postcss-preset-env')() ] } ``` 这个配置文件会告诉 Vite 使用 PostCSS 和 `postcss-preset-env` 插件。 最后，打开你的 Vite 配置文件 `vite.config.js`，并添加以下内容： ```javascript import { defineConfig } from 'vite'; export default defineConfig({ css: { postcss: { plugins: [] } } }); ``` 在 `plugins` 数组中，你可以添加你想要使用的其他 PostCSS 插件，比如 `autoprefixer` 等。 完成以上步骤后，你就可以在 Vite 中使用 PostCSS 了。记得重新启动 Vite 以使配置生效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值