如何使用vite来创建vue3+TS的项目?

最新推荐文章于 2024-08-27 16:58:03 发布
最新推荐文章于 2024-08-27 16:58:03 发布
阅读量411 收藏
点赞数 3
文章标签： vue typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45274635/article/details/131652284
版权

如何使用vite来创建vue3+TS的项目?

在我们日常开发学习过程中，如何结合vue3来使用TypeScript呢？非常简单一起来看看吧！

使用vite创建项目，并选择带ts的版本，主要使用到的命令：
npm create vite@latest 项目名 – --template vue-ts
官网链接：https://vuejs.org/guide/typescript/composition-api.html
下面一起来创建一个项目试一试吧

  1. 打开cmd，输入命令创建项目
npm create vite@latest 项目名 -- --template vue-ts

在这里插入图片描述

  1. 切换到项目，下包
cd 项目名
npm install

在这里插入图片描述

  1. 运行项目
npm run dev

在这里插入图片描述

复制网址，粘贴到Chrome中，此时就可以看见TS和我们熟悉的大V了~

在这里插入图片描述

通过vscode打开

  1. 也可以通过vscode打开哦

在这里插入图片描述

  1. 打开后，我们就是可以看到项目的目录结构了哦~

在这里插入图片描述

  1. 可以通过终端运行起来
npm run dev

在这里插入图片描述

  1. 按住ctrl+点击网址后，即可看见项目的视图界面

在这里插入图片描述

不吃代码的猫大人
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
搭建vue3+ts+vite项目
xhjtcflm的博客
07-10 957
JavaScript modules (import/export) 选择采用js模块引入或暴露开发。npx eslint --init 初始化。vue.js 选择采用vue.js框架开发。5.cd 项目、pnpm install 、pnpm run dev。（1）下载eslint：pnpm i eslint -D。（2）生成配置文件：eslint.cjs。一、创建项目及项目初始化。
vue3+vite+ts创建项目
m0_69889435的博客
08-01 1282
vue3+vite+ts创建项目。
创建vue3+ts项目
qq_48783694的博客
03-12 3187
在开发项目的时候，经常会用到svg矢量图，使用svg矢量图之后，页面上加载的不再是图片资源，很大的提升了页面性能，svg文件比img小很多，在项目中机会不占资源。安装依赖：https://www.npmjs.com/package/vite-plugin-mock。官网地址：https://element-plus.gitee.io/zh-CN/API接口统一管理：创建src/api/use/index.ts以及type.ts。官网：https://stylelint.bootcss.com/
vite 构建 vue3 + ts 项目
weixin_44536001的博客
06-14 437
5.配置tsconfig.json 和 tsconfig.node.json中moduleResolution 属性为node模式，删除 tsconfig.json "allowImportingTsExtensions": true, 不然Visual Studio对于一些引入编译器会报错。7.安装引入自身项目所需依赖如vue-router、piana、element-plus等。6.配置 tsconfig.json，和vite.config.ts中别名相关配置信息。3.进入项目目录 安装依赖包。
vite+vue3+ts【创建项目】基础配置
爱玩亚索的程序员
05-21 609
vue3 vite 搭建
使用Vite+TS创建项目的操作步骤
NovaLog的博客
07-27 590
你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。版本>=12.0.0。
用 vite 构建 vue3 + TS 项目
qq_40922656的博客
06-09 2645
vue3+ts+vite搭建项目
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip
04-12
基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于vite+vue3+pinia+element-plus+ts后台管理系统源码+项目说明.zip 基于...
vue3+ts+vite+router+vuex+api请求封装
12-29
Vue3+TS+Vite+Router+Vuex+API请求封装是现代前端开发中的一个典型组合，用于构建高效、可维护的后台管理系统。这个脚手架提供了完整的开发环境配置和基础架构，使得开发者能够快速搭建后台应用。下面将详细介绍这个...
全栈-Vite3+Vue3+TS+Ant-design-vue3整合
11-07
在本项目中，我们探索了如何使用最新技术栈进行全栈开发，重点是前端的Vite3、Vue3、TypeScript以及Ant Design Vue3的整合，同时涉及后端的SpringBoot、MybatisPlus和MySQL。这是一个全面的实战教程，旨在帮助开发者...
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
vue3中引入ts
weixin_44581586的博客
04-22 758
【代码】vue3中引入ts。
Vue3+TS教程
volson13的博客
08-28 2579
..// 全局函数return `真${str}`// 全局变量app.config.globalProperties.$env = '全局变量'...全局自定义指令// mian.tsel.focus()})使用自定义指令局部自定义指令// 在模板中启用 v-focus自定义指令的生命周期created() {}, //元素初始化的时候beforeMount() {}, //指令绑定到元素后调用 只调用一次。
搭建一个vue3+ts项目（超祥/必看）
热门推荐
c_qianxia5040的博客
07-24 1万+
Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的state、并添加甚至删除state、actions和getters。@types/node 模块 在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。当修改代码时，HMR。能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。
vite构建vue3+Ts项目
W2279567793的博客
10-10 7223
vite+vue3+ts项目构建
vite+vue3+Ts搭建基础项目框架
qingshui_zhuo的博客
06-13 2547
随着前端技术的更新，程序员们的技术栈也要不断跟上，本来想躺平，不料却被推着走。上个月开发团队新来一个项目需求，要求开发技术栈vue2更换成vue3，毫无准备的小编一脸懵，嗯？怎么说 换就换了？没提前通知也没给时间学习，直接上手就是干？就离谱0.0！没办法，后面就只能跟着会vue3的同事一起开发，参照同事写的模块开发，结果发现除了有些写法不太一样其他的也都差不多，意识到这个之后就不慌了，然后就是边学习边开发。
使用Vite搭建vue3+TS项目
Yan9_9的博客
01-08 2561
vite 是一个基于 Vue3 单文件组件的非打包开发服务器，它具有快速的冷启动，不需要等待打包操作；并且官网说是下一代的前端构建工具。
vue3+el-tale封装（编辑、删除、查看详情按钮一起封装）
最新发布
CallMe_CrabXie的博客
08-27 637
对应的tableData和tableDataHeader文件（实际开发中，应该从后端拿tableData，tableHeader根据情况自定义）
使用vite创建vue3+ts的项目
05-31
使用 Vite 创建 Vue 3 + TypeScript 项目非常简单，只需要先安装 Vite，然后使用 Vite 创建项目即可。 1.装 Vite ```bash npm install -g vite ``` 2. 创建 Vue 3 + TypeScript 项目 ```bash # 在当前目录下创建项目 vite create my-vue3-ts-app --template vue-ts # 或者在指定目录下创建项目 vite create my-vue3-ts-app --template vue-ts --dir my-project ``` 其中，`--template vue-ts` 表示使用 Vue 3 + TypeScript 模板创建项目。 3. 运行项目 ```bash cd my-vue3-ts-app npm install npm run dev ``` 运行以上命令后，Vite 会在浏览器中打开项目，同时会在终端中显示项目的本地开发地址。 至此，一个基于 Vite 的 Vue 3 + TypeScript 项目就创建完成了。需要注意的是，使用 Vite 创建项目时，不需要再手动配置 TypeScript 相关的配置，因为 Vite 默认已经对 TypeScript 进行了支持。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值