如何创建vue3+vite+ts的项目

本文章仅为新手提供刚接触vue3时不懂如何创建demo的教程。

一般情况下,官方推荐使用vite来构建vue3项目,vite是一种新型前端构建工具,能够显著提升前端开发体验。但是使用Vite需要Node.js版本 >= 12.0.0。

操作步骤

yarn create vite

1、运行上述命令,会提示你输入项目的名称:
在这里插入图片描述
2、选择所使用的框架
在这里插入图片描述
3、选择使用的编程语言
在这里插入图片描述
上述三步执行完后,就会创建成功一个模板
在这里插入图片描述
4、根据创建成功后的提示执行命令,首先cd todo-list进入到项目目录下,然后执行yarn安装依赖,依赖安装成功后执行yarn dev即可运行项目。
在这里插入图片描述
至此,一个非常简洁的基于vite + tsvue3demo创建成功。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
创建Vue 3 Vite项目可以按照以下步骤进行: 1. 安装Vite: Vite是一个基于Vue 3单文件组件的非打包开发服务器,它可以提供快速的本地开发启动。你可以使用以下命令全局安装Vite: ``` npm install -g create-vite ``` 2. 创建项目: 使用create-vite命令创建一个新的Vue 3项目。在命令行中执行以下命令: ``` create-vite my-vue3-project --template vue-ts ``` 这将创建一个名为my-vue3-project的文件夹,并使用Vue TypeScript模板初始化项目。 3. 进入项目文件夹: 使用cd命令进入项目文件夹: ``` cd my-vue3-project ``` 4. 安装依赖: 在项目文件夹中执行以下命令安装项目所需的依赖: ``` npm install ``` 5. 启动开发服务器: 执行以下命令启动Vite开发服务器: ``` npm run dev ``` 现在,你的Vue 3 Vite项目已经创建成功,并且开发服务器已经启动。你可以通过访问http://localhost:3000来查看你的项目。 引用中提到了创建Vue 3 Vite项目所需的技术栈,包括vue3、tsvitevue-router、element-plus和pinia。这些技术栈可以帮助你更方便地开发Vue 3项目。 引用中提到了选择Vite而不是vue-cli的原因,Vite可以提供本地快速开发启动,并且不需要打包,可以加快开发效率。 引用中给出了在使用Vue 3时可能遇到的一些问题和解决方法,比如在使用插件时需要禁用Vetur并安装Vue Language Features (Volar)插件,以及解决找不到模块或其相应类型声明的问题。 引用中给出了一个示例的vite.config.ts配置文件,这个文件可以用来配置Vite项目,包括设置路径别名等。 希望以上信息对你创建Vue 3 Vite项目有所帮助!<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值