新建vite+vue3+ts项目,以及解决过程中遇到的问题

news2024/10/2 12:31:59

目录

一、新建vite+vue3+ts项目

二、解决过程中遇到的问题

解决报错:Module ‘“xx.vue“‘ has no default export.

解决报错:Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘uuid’ imported from xxx的解决

解决报错:[plugin:vite:css] Preprocessor dependency "less" not found. Did you install it?


一、新建vite+vue3+ts项目

此处我使用npm做一下安装:

npm create vite

出现如下界面:

  • 输入项目名称,
  • 然后选择项目类型,此处我选择vue,
  • 选择语言,此处我选择的是vue-ts,因为我要用ts版本进行开发。

剩下的就创建完了。最后,把该项目文件夹在vscode里面打开, 然后打开终端,执行以下命令,就可以执行项目了,

npm install

npm run dev

空项目执行很快,不到1秒的时间就启动了,大家可以试一下。

目前项目的目录结构,如下所示:

二、解决过程中遇到的问题

解决报错:Module ‘“xx.vue“‘ has no default export.

场景复现:使用Vue3测试时有如下代码,简单的代码附件了一些看着不爽的提示,虽然不影响正常运行。

原因vetur是一个vscode插件,用于为.vue单文件组件提供代码高亮以及语法支持。那既然官方推荐 _volar_,简单的说volarvetur的升级版本,提供了更好的功能并有更好的TS支持。

解决方法:选择卸载vetur,安装volar插件,最后,记得重启下VS Code。

ok,问题解决了。

解决报错:Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘uuid’ imported from xxx的解决

场景复现

原因:顾名思义,根据错误信息翻译【该文件路径下找不到uuid的包】即没有添加依赖

解决方法:由于找不到包,所以我们下载该包即可

npm install fs-extra --save

ok,问题解决。

解决报错:[plugin:vite:css] Preprocessor dependency "less" not found. Did you install it?

场景复现

原因:style中的lang属性

解决方法:安装node-less 或 less 就可以解决,不安装的话就去除style中的lang属性

ok,问题解决。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/397660.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

如何选择一款数据库?

1主流数据库技术介绍常见的数据库模型主要分为SQL关系型数据库和NoSQL非关系型数据库。其中关系型数据库分为传统关系数据库和大数据数据库,非关系型数据库分为键值存储数据库、列存储数据库、面向文档数据库、图形数据库、时序数据库、搜索引擎存储数据库及其他&am…

Java集合类

在了解Java集合类之前,我们必须首先了解java.util包,这个包提供了所有集合相关的接口和类。 集合是用来存储数据类型的一种数据结构,提到存储数据类型的数据结构我们最先想到的应该是数组,接下来我们简单回顾下Java中集合和数组的…

Xilinx ZYNQ 7000 HDMI

High-Definition Multimedia Interface (HDMI) 参考xilinx application note XAPP460 HDMI来自High-Definition Multimedia Interface 高分辨率多媒体接口,多媒体一般包含图像和声音。 Transition Minimized Differential Signaling (TMDS) 是HDMI的物理层。 TMDS…

春招冲刺(十一):前端面试之网络总结

网络总结 Q1: GET和POST的请求的区别 应用场景:Get是一个幂等请求,一般用于请求资源。post不是幂等请求,一般用于修改资源。缓存:Get请求一般缓存,Post一般不缓存报文格式:Get请求体一般为空,…

【Linux】linux | 修改dns | 修改网卡dns

一、说明1、业务需要,需要修改服务的dns的地址2、改成阿里的二、操作查询需要修改dns的网卡ifconfig说明1: 留意ens192,即网卡名称查看网卡配置文件信息cd /etc/sysconfig/network-scripts ll备份cp /etc/sysconfig/network-scripts/ifcfg-en…

Advantest爱德万直流电源维修电压电流发生器ADCMT系列

Advantest爱德万电源维修常见型号:ADCMT6240A/B;R6243/R6246;ADCMT系列。 维修品牌: 安捷伦Agilent/HP、泰克Tektronix、安立Anritsu、罗德施瓦茨、爱德万Advantest、艾法斯/马可尼IFR/Marconi、吉时利Keithley、日立Hitachi、 松…

【BOOST C++】组件编程(2)-- 组件的设计原理

GitHub - ros2/demos at foxy 一、说明 为了研究ROS2的组件编程,首先要理解如何何为组件。组件本是微软的发明物体,但是在ubuntu上需要自己从底层实现,就说ROS2不用你写,但是就能看明白也是需要一点理论功底的。本篇按照COM内幕的…

【2223sW3】LOG1

写在前面 好好学习,走出宿舍,走向毕设! 一些心路历程记录,很少有代码出现 因为鬼知道哪条代码到时候变成毕设的一部分了咧,还是不要给自己的查重挖坑罢了 23.3.6 lammps代码修改 因为学姐要中期答辩了,…

用Biome-BGC模型如何模拟水循环过程

在Biome-BGC模型中,对于碳的生物量积累,采用光合酶促反应机理模型计算出每天的初级生产力(GPP),将生长呼吸和维持呼吸减去后的产物分配给叶、枝条、干和根。生物体的碳每天都按一定比例以凋落方式进入凋落物碳库;对于水份输运过程…

2023/3/8集合之TreeSet HashSet简介 不含代码

TreeSet : 底层是由TreeMap维护的 无序的,不可重的 底层结构 : 红黑树(平衡二叉树) 特点 : 查询效率高,默认升序排序引用场景 : 适合应用在存储多个单个值的数据的集合,去重的,自动升序排序的场景新增方法:新增了一些与比较大小相关的方法 遍历方式 1)foreach 2)iterator 1测试…

【C语言学习笔记】:图解指针变量

1 指针变量的基本操作基本操作 int a,*iptr,*jptr,*kptr;iptr &a;jptr iptr;*jptr 100;kptr NULL; 图解: 1.1 己址和己空间 指针变量也是一个变量,对应一块内存空间,对应一个内存地址,指针名就是己址。这空内存空间多大…

42-Golang中的单元测试

Golang中的单元测试需求传统方法基本介绍单元测试快速入门总结综合案例需求 在工作中,我们会遇到这样的情况,就是去确认一个函数,或者一个模块的结果是否正确 传统方法 在main函数中,调用addUpper函数,看看实际输出…

322. 零钱兑换 279.完全平方数

322. 零钱兑换 完全背包问题&#xff0c;需要注意的是数组的初始值。 class Solution {public int coinChange(int[] coins, int amount) {int[] dp new int[amount1];for(int i 0;i < amount;i){dp[i] Integer.MAX_VALUE;}dp[0] 0;for(int i 0;i < coins.length;i…

使用 create-react-app 脚手架搭建React项目

❀官网 1、安装脚手架&#xff1a;npm install -g create-react-app 2、查看版本&#xff1a;create-react-app -V &#xff01;&#xff01;&#xff01;注意 Node版本必须是14以上&#xff0c;不然会报以下错误。 3、创建react项目&#xff08;项目名不能包含大写字母&…

Windows上一款特别好用的画图软件

安装 废话不多说&#xff0c;打开windows的应用商店&#xff0c;搜索draw.io&#xff0c;点击获取即可。 画图 draw.io的布局左边是各种图形组件&#xff0c;中间是画布&#xff0c;右边是属性设置&#xff0c;文件扩展名是.drawio。 点击左边列表中的图形可以将它添加到画…

设计模式(十七)----行为型模式之模板方法模式

行为型模式用于描述程序在运行时复杂的流程控制&#xff0c;即描述多个类或对象之间怎样相互协作共同完成单个对象都无法单独完成的任务&#xff0c;它涉及算法与对象间职责的分配。 行为型模式分为类行为模式和对象行为模式&#xff0c;前者采用继承机制来在类间分派行为&…

二、JVM内存结构

文章目录运行时数据区子系统程序计数器&#xff08;PC寄存器&#xff09;虚拟机栈本地方法接口和本地方法栈堆运行时数据区子系统 1、Java虚拟机定义了若干程序运行期间使用到的运行时数据区&#xff0c;其中有一些会随着虚拟机启动而创建&#xff0c;随着虚拟机推出而销毁。另…

SpringBoot接口 - 如何对参数进行校验

在以SpringBoot开发Restful接口时, 对于接口的查询参数后台也是要进行校验的&#xff0c;同时还需要给出校验的返回信息放到上文我们统一封装的结构中。那么如何优雅的进行参数的统一校验呢&#xff1f;什么是不优雅的参数校验后端对前端传过来的参数也是需要进行校验的&#x…

刷题笔记7 | 454.四数相加II 、383. 赎金信 、 15. 三数之和 、 18. 四数之和 、 总结

454.四数相加II 给你四个整数数组 nums1、nums2、nums3 和 nums4 &#xff0c;数组长度都是 n &#xff0c;请你计算有多少个元组 (i, j, k, l) 能满足&#xff1a; 0 < i, j, k, l < n nums1[i] nums2[j] nums3[k] nums4[l] 0 输入&#xff1a;nums1 [1,2], nums…

全网最全Fiddler抓包教程,超过十万人学习此教程!

零基础玩转Fiddler抓包在测试领域应用实战&#xff01;各位做测试的同学想必对抓包工具fiddler并不陌生&#xff0c;但是很多同学可能没有总结过它的用法&#xff0c;下面我总结了fiddler一些常用的用法。 Web端抓包配置 打开Fiddler&#xff0c;Tools -> Fiddler Options…