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

 更新时间:2023年06月12日 09:32:41   作者:水w  
vite是一个基于Vue3单文件组件的非打包开发服务器,它具有快速的冷启动,不需要等待打包操作,下面这篇文章主要给大家介绍了关于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_,简单的说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,问题解决。

总结

到此这篇关于vite+vue3+ts项目新建以及解决遇到的问题的文章就介绍到这了,更多相关vite+vue3+ts项目新建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • webpack 3 + Vue2 使用dotenv配置多环境的步骤

    webpack 3 + Vue2 使用dotenv配置多环境的步骤

    这篇文章主要介绍了webpack 3 + Vue2 使用dotenv配置多环境,env文件在配置文件都可以用, vue页面用的时候需要在 webpack.base.conf.js 重新配置,需要的朋友可以参考下
    2023-11-11
  • vue+elementUI实现动态合并数据相同的单元格(可指定合并列)

    vue+elementUI实现动态合并数据相同的单元格(可指定合并列)

    这篇文章主要介绍了vue+elementUI如何实现动态合并数据相同的单元格,文中有详细的代码实例供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2023-07-07
  • vue的@change的用法及操作代码

    vue的@change的用法及操作代码

    @change 是 Vue.js 中用于监听表单元素值变化的事件处理器,这篇文章主要介绍了vue的@change的用法,需要的朋友可以参考下
    2023-10-10
  • 解决nuxt页面中mounted、created、watch执行两遍的问题

    解决nuxt页面中mounted、created、watch执行两遍的问题

    这篇文章主要介绍了解决nuxt页面中mounted、created、watch执行两遍的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue 报错Error: No PostCSS Config found问题及解决

    Vue 报错Error: No PostCSS Config foun

    这篇文章主要介绍了Vue 报错Error: No PostCSS Config found问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vue实现按钮旋转和移动位置的实例代码

    Vue实现按钮旋转和移动位置的实例代码

    这篇文章主要介绍了Vue实现按钮旋转和移动位置的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-08-08
  • Vue.set()实现数据动态响应的方法

    Vue.set()实现数据动态响应的方法

    这篇文章主要介绍了Vue.set()实现数据动态响应的相关知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • Vue.js移动端左滑删除组件的实现代码

    Vue.js移动端左滑删除组件的实现代码

    本篇文章主要介绍了Vue.js移动端左滑删除组件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • Vue2项目中Mock.js的完整集成与使用教程

    Vue2项目中Mock.js的完整集成与使用教程

    Mock.js 是一个可以在开发阶段模拟后端数据接口的 JavaScript 库,它能够生成大量不同类型的随机数据,并且模拟真实的接口返回,允许前端开发在没有真实后端接口的情况下进行开发,本文给大家介绍了Vue2项目中Mock.js的完整集成与使用教程,需要的朋友可以参考下
    2025-02-02
  • vue.js指令v-model实现方法

    vue.js指令v-model实现方法

    这篇文章主要为大家详细介绍了vue.js指令v-model实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论