vite+vue3+ts项目新建以及解决遇到的问题
一、新建vite+vue3+ts项目
此处我使用npm做一下安装:
npm create vite
出现如下界面:
- 输入项目名称，
- 然后选择项目类型，此处我选择vue，
- 选择语言，此处我选择的是vue-ts，因为我要用ts版本进行开发。
剩下的就创建完了。最后，把该项目文件夹在vscode里面打开， 然后打开终端，执行以下命令，就可以执行项目了，
npm installnpm run dev
空项目执行很快，不到1秒的时间就启动了，大家可以试一下。
目前项目的目录结构，如下所示：
二、解决过程中遇到的问题
解决报错：Module ‘“xx.vue“‘ has no default export.
场景复现：使用Vue3测试时有如下代码，简单的代码附件了一些看着不爽的提示，虽然不影响正常运行。
原因：vetur是一个vscode插件，用于为.vue单文件组件提供代码高亮以及语法支持。那既然官方推荐 _volar_，简单的说volar是vetur的升级版本，提供了更好的功能并有更好的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，问题解决。
总结
到此这篇关于vite+vue3+ts项目新建以及解决遇到的问题的文章就介绍到这了,更多相关vite+vue3+ts项目新建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
下面小编就为大家分享一篇解决vue 路由变化页面数据不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
通过debug搞清楚.vue文件如何变成.js文件(案例详解)
这篇文章主要介绍了通过debug搞清楚.vue文件如何变成.js文件,本文以@vitejs/plugin-vue举例,通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue3 源码导读(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要给大家介绍了基于vue通用表单解决方案的思考与分析，文中通过示例代码介绍的非常详细，对大家学习或者使用vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-03-03
这篇文章主要为大家详细介绍了Vue实现本地购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
解决vue使用echarts报错:Can't get DOM width&nbs
这篇文章主要介绍了解决vue使用echarts报错:Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-05-05
这篇文章主要介绍了vue 在单页面应用里使用二级套嵌路由，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
解决Vue中的生命周期beforeDestory不触发的问题
这篇文章主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了解决在el-dialog中无法正确获取DOM的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
下面小编就为大家分享一篇vue获取当前点击的元素并传值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论