vite创建vue3项目及常见问题

最新推荐文章于 2024-07-15 16:21:12 发布
最新推荐文章于 2024-07-15 16:21:12 发布
阅读量219 收藏
点赞数 2
文章标签： typescript vue.js elementui 前端 scss 前端框架 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41578884/article/details/139008382
版权

一.创建项目

前提：已安装 18.3 或更高版本的 Node.js
1.进入需要创建项目的目录并CMD【MAC在终端打开】
2.输入命令
npm init vite@latest
3.输入项目名称

在这里插入图片描述

4.选择vue

在这里插入图片描述

5.选择TypeScript

在这里插入图片描述

6.进入项目目录

在这里插入图片描述

7.执行下面语句安装依赖
 npm install

在这里插入图片描述

7.运行项目
npm run dev

在这里插入图片描述

二.常见问题

1.项目创建后有以下告警Cannot find module 'vite'. Did you mean to set the 'moduleResolution' option to 'node' ,or to add aliases to the 'paths' option?或者Module "yue"" has no exported member 'ref'. Did you mean to use 'import ref from "vue" instead?
修改两个文件的配置，将其中的"moduleResolution": "bundler"改为"moduleResolution": "node"

在这里插入图片描述

在这里插入图片描述

会飞的猪~~
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3-vite2-vant3-rem
03-31
这个项目"vue3-vite2-vant3-rem"很可能是使用 Vue3、Vite2 和 Vant3 构建的移动端 Web 应用，同时采用 Rem 进行了适配。开发者可能已经配置好了 Vite2 的构建脚本，使得在开发过程中能够利用其快速的热更新和按需...
vite2-in-action:一个关于vite2+vue3项目开发中常见任务实践的库，很适合作为一个项目的起始点，欢迎大家提pr丰富这个项目
05-07
2021先学学vite准没错本文目标vite2变化分析项目中常见任务vite2+vue3实践创建Vite2项目闲言碎语不必说，下面我们表一表好汉vite2使用npm:$ npm init @vitejs/app按提示指定项目名称和模板，或直接指定$ npm init @...
创建vue3项目运行npm create vue@latest报错
weixin_60101822的博客
04-10 1233
创建vue3项目运行npm create vue@latest报错解决办法
创建vue vite项目报错
qq_40287084的博客
01-22 1283
创建vue vite项目报错
Vue3配置Cannot find module ‘vite‘. Did you mean to set the ‘moduleResolution‘ option to ‘node‘,
05-19 2567
【代码】Vue3配置Cannot find module 'vite'. Did you mean to set the 'moduleResolution' option to 'node',
vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决
qq_39111074的博客
06-25 9657
vue3-vite安装后main.ts文件和tsconfig.app.json文件报错解决
Cannot find module ‘vue‘. Did you mean to set the ‘moduleResolution‘ option to ‘node‘, or to add ali
weixin_46773024的博客
04-26 7980
翻译过来是找不到 vue模块 需要将 moduleResolution设置成node。找到 tsconfig.json 文件。
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
这个插件为Vue3、Vite、Vue Router、Pinia等提供了大量的代码片段，只需输入简短的触发词，就能自动生成常见的代码结构，减少了手动编写样板代码的时间。 总的来说，这套"Vue3 + Vite5 + Vue Router + Pinia + ...
从零开始搭建Vue3+Vite+TS+Router+Pinia脚手架源码
11-04
3. **配置Vite**：创建`vite.config.ts`文件，配置Vue、路由、类型支持等相关选项。 4. **设置TypeScript**：配置`tsconfig.json`，定义项目的TypeScript编译选项。 5. **创建项目结构**：建立`src`目录，包含`main....
vue3-vite-eslint-prettier-template:vue3 vite eslint漂亮的模板
03-06
Vue3-Vite-Eslint-Prettier-Template 是一个针对 Vue3、Vite、Eslint 和 Prettier 的项目模板，旨在为开发者提供一个整洁、高效且规范的开发环境。这个模板集成了现代化前端开发所需的诸多工具，帮助开发者快速搭建...
Did you mean to set the ‘moduleResolution‘ option to ‘node‘
huchaoyue_的博客
05-18 6548
main.ts 文件报错：Cannot find module ‘vue’. Did you mean to set the ‘moduleResolution’ option to ‘node’, or to add aliases to the ‘paths’ option? tsconfig.app.json 文件报错：在没有 “node” 模块解析策略的情况下，无法指定选项 “-resolveJsonModule”。
【vue3+ts+vite】Cannot find module ‘vue‘. Did you mean to set the ‘moduleResolution‘ option to ‘node‘,
羊羊羊羊羊羊羊的博客
05-13 2992
Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?
Cannot find module ***. Did you mean to set the ‘moduleResolution’ option to ‘nodenext’,
qq_41257074的博客
05-25 3050
Cannot find module ***. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?
vue3+ts+vite报错
weixin_63722092的博客
05-16 365
src目录下创建shims-vue.d.ts 文件。别用vite了，妈的一天天就他报错，SB东西。
Cannot find module ‘vue‘. Did you mean to set the ‘moduleResolution‘ option to ‘node‘,
xingkongjianchi的博客
05-21 1076
解决 ：在tsconfig.json 中把 “moduleResolution”: “bundler”, 改为： “moduleResolution”: “node”,近期vite-vue3 创建项目后会出现 import { createApp } from ‘vue’ 在vue下红色下划线。
Vue3.0 + Vite 初体验（一）项目配置
weixin_43487782的博客
01-17 9080
Vue3.0 已经发布一段时间了，特别是还发布了一个打包构建工具 Vite，据说是可以干掉 webpack 的，趁这段时间有空，本人也体验了一下。 想使用 Vue3.0 不一定要用 Vite，vue-cli 也可以构建。 $ npm install -g @vue/cli 确保已经升级到最新的版本： $ npm update -g @vue/cli $ vue --version 然后创建项目： $ vue create vue3-demo 选择第二个 Vue 3 Preview，或者自定义安装 使
vue检测页面手指滑动距离，执行回调函数，使用混入的语法，多个组件都可以使用
最新发布
白白的博客
07-15 238
vue检测页面手指滑动距离，执行回调函数，使用混入mixin的语法，多个组件都可以使用
vite创建vue3项目找不到vite
09-16
vite是一个快速的前端构建工具，用于创建Vue项目。下面是三种常见的使用vite创建Vue3项目的方式： 方式一（推荐）：使用脚手架快速创建，勾选依赖的方式。这种方式创建的项目最快捷，因为基本依赖都已经安装好了。你可以使用以下命令创建一个新的Vue3项目： ``` npm init vite@latest ``` 方式二：使用官方模板创建Vue3项目。这种方式会基于模板创建项目。你可以使用以下命令创建一个新的Vue3项目： ``` npm init vite@latest -- --template vue-ts ``` 或者，你可以使用以下命令创建项目并在选择模板时手动勾选： ``` npm init vite@latest ``` 方式三（不推荐）：手动创建空项目，并手动添加依赖。这种方式创建的项目甚至连vite.config.ts都没有。如果你擅长自定义配置，你可以使用以下命令创建一个空项目： ``` npm init vite@latest ``` 创建完项目后，进入项目目录并启动开发服务器： ``` cd my-vue3-app npm run dev ``` 请注意，Vite需要Node.js版本14.18及以上，但有些模板需要更高的Node版本才能正常运行。当你的包管理器发出警告时，请升级你的Node版本。你也可以使用以下命令全局安装Vite： ``` npm install -g vite ``` 希望这些信息对你有帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值