草庐IT

vue3+vite在main.ts或者main.js文件中引入/App.vue报错(/App.vue不是模块)

vscode报错:./APP.vue不是模块场景复现情况一、vue3.0+js情况二、vue3.0+ts方案一:根目录新建env.d.ts方案二:根目录新建tsconfig.jsonvue3报错提示找不到模块“/App.vue”或其相应的类型声明场景复现在使用vue3➕vite➕ts或者js搭建前端框架时,在main.ts或者main.js中引入/App.vue报错。报错内容为/App.vue不是模块。下面我们分vue3+js和vue3+ts两种情况讨论,给出相应的解决方案。情况一、vue3.0+js报错显示:报错原因:javascript只能理解.js文件,无法理解.vue文件。解决方案:根

vue3+vite+ts项目集成科大讯飞语音识别(项目搭建过程以及踩坑记录)

🐱个人主页:不叫猫先生🙋‍♂️作者简介:前端领域新星创作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀!💫系列专栏:vue3从入门到精通、TypeScript从入门到实践📢资料领取:前端进阶资料以及文中源码可以找我免费领取🔥前端学习交流:博主建立了一个前端交流群,汇集了各路大神,互相交流学习,期待你的加入!(文末有我wx或者直接私信)目录背景一、项目环境二、注册科大讯飞三、下载语音识别demo四、新建vue3项目五、项目目录六、配置七、踩坑记录八、实现效果背景本人最近在做数字人项目,用到科大讯飞的语音识别功能,遇到了许多坑,做个总结,给兄弟们铺铺路。科大讯飞语音识别主要

Vue3项目(Vite+TS)使用Web Serial Api全记录

前言之前写了一个vue+django的一个通过串口控制的上位机系统。但是实际生产中,不如部署到服务器上,这样可以更好的节约成本。但是这样就需要弄一个客户端来控制处理串口信息。那我就在想能不能通过网页直接拿到客户端的串口信息。所以问了万能的chatgpt,得到了以下答案:是的,前端可以使用WebSerialAPI直接与客户端机器的串口通信,而Diango只需要负责存储数据。当客户端机器发送数据时,前端可以将数据发送到Diango服务器,Diango服务器再将数据存储到数据库中。当需要读取数据时,前端可以从Django服务器中获取数据并显示在页面上。所以我去研究了下WebSerialApi一、什么

vite项目优化

首先在讲述vite优化之前,我们先来分析一下和传统的项目管理构建工具的区别,以webpack为例,它是利用plugin插件和loader加载器对项目的所有模块和依赖统一通过入口文件进行编译,从而变成我们html所需要的js格式渲染我们的页面。随着浏览器的发展,逐渐的已经支持了ES模块因此Vite在设计时考虑在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码,即只在当前屏幕上实际使用时才会被处理。优势:这样就避免了随着应用体积的增大,导致了启动服务缓慢,一处代码更新界面需要数秒钟才能显示的问题。运行速度真的没得说。同样的,作为一个新型的构建框架,也有很多的弊端。缺点:只能针对现代浏览

使用vite 搭建vue 3的项目

一、目标:使用vite搭建一个Vue3的项目,并启动成功。二、准备工作首先你要有Node.js、VSCode编辑器、Chrome浏览器关于下载的问题Node.js可以去官网下载链接:http://nodejs.cn/download/下载左边的长期支持版本就好,最新版本可能会友一些问题。VSCode的下载是比较麻烦的,这边建议直接去国内镜像的下载链接https://vscode.cdn.azure.cn/stable/b4c1bd0a9b03c749ea011b06c6d2676c8091a70c/VSCodeUserSetup-x64-1.57.0.exeChrome浏览器就不用多说了,有需

使用vite 搭建vue 3的项目

一、目标:使用vite搭建一个Vue3的项目,并启动成功。二、准备工作首先你要有Node.js、VSCode编辑器、Chrome浏览器关于下载的问题Node.js可以去官网下载链接:http://nodejs.cn/download/下载左边的长期支持版本就好,最新版本可能会友一些问题。VSCode的下载是比较麻烦的,这边建议直接去国内镜像的下载链接https://vscode.cdn.azure.cn/stable/b4c1bd0a9b03c749ea011b06c6d2676c8091a70c/VSCodeUserSetup-x64-1.57.0.exeChrome浏览器就不用多说了,有需

基于vue3+ts+vite的项目使用‘unplugin-auto-import/vite’插件,自动全局导入api的注意事项

​ 1.首先安装插件npminstallunplugin-auto-import@vitejs/plugin-vue-D2.安装完成后在vite.congfig.ts中配置,红色部分就是关于插件的基础自动导入部分,这样就可以将vue和router的相关api全局导入了,importAutoImportfrom"unplugin-auto-import/vite"exportdefaultdefineConfig({ plugins:[  vue(),  AutoImport({   imports:["vue","vue-router"],   dts:"types/auto-imports.

基于vue3+ts+vite的项目使用‘unplugin-auto-import/vite’插件,自动全局导入api的注意事项

​ 1.首先安装插件npminstallunplugin-auto-import@vitejs/plugin-vue-D2.安装完成后在vite.congfig.ts中配置,红色部分就是关于插件的基础自动导入部分,这样就可以将vue和router的相关api全局导入了,importAutoImportfrom"unplugin-auto-import/vite"exportdefaultdefineConfig({ plugins:[  vue(),  AutoImport({   imports:["vue","vue-router"],   dts:"types/auto-imports.

Mac上初次使用vite新建Vue3项目需要注意,自己的错误记录

执行npminit@vitejs/app时报错:internal/modules/cjs/loader.js:1089thrownewERR_REQUIRE_ESM(filename,parentPath,packageJsonPath);一开始网上找原因,以为是node的版本过低,但是看了是自己的弄的版本号是12.1.x.x刚刚好跨过门槛,但是创建项目不成功,为了保险起见将node版本升级到了15.7.0。试了下,嗯,还是报错。又在网上找了半天,有人安装vite出问题,细瞅瞅,可能是npm的版本太低的原因。想想自己是不也是这个导致的,将npm版本原来的6.x.x更新到8.x.x。重新执行np

Mac上初次使用vite新建Vue3项目需要注意,自己的错误记录

执行npminit@vitejs/app时报错:internal/modules/cjs/loader.js:1089thrownewERR_REQUIRE_ESM(filename,parentPath,packageJsonPath);一开始网上找原因,以为是node的版本过低,但是看了是自己的弄的版本号是12.1.x.x刚刚好跨过门槛,但是创建项目不成功,为了保险起见将node版本升级到了15.7.0。试了下,嗯,还是报错。又在网上找了半天,有人安装vite出问题,细瞅瞅,可能是npm的版本太低的原因。想想自己是不也是这个导致的,将npm版本原来的6.x.x更新到8.x.x。重新执行np