新建一个ts 项目

文章介绍了如何使用TypeScript,微软的开源编程语言,来创建项目。通过全局安装typescript包,搭建自动编译环境,使用Vite创建Vue3+TS项目,并提到了在VSCode中下载相关插件以辅助编码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

typescript是 微软 公司开源的编程语言, type是 类型的意思,表示在js的基础之上提供了强类型 支持。

新建一个ts 项目

全局安装 typescript 包(编译引擎)-> 注册 tsc 命令

npm install -g typescript

搭建自动编译环境

npm create vite@latest ts-pro -- --template vanilla-ts

代码:

let num:number = 123
let num2:number = 456

console.log(num,num2)

Vue3+TS 创建一个新项目

使用vite创建项目,并选择带ts的版本

npm create vite@latest my-vue-ts-app -- --template vue-ts

下载 vscode插件 (提示写代码的时的文本)

 

--

### 使用 Vue CLI 或 Vite 创建 Vue 3 和 TypeScript项目 #### 方法一:通过 Vue CLI 创建 Vue 3 + TypeScript 项目 可以使用 Vue CLI 来快速搭建一个支持 Vue 3 和 TypeScript 的开发环境。以下是具体实现方式: 全局安装 Vue CLI 工具: ```bash npm install -g @vue/cli ``` 创建一个新的 Vue 2 或 Vue 3 项目时,可以通过交互式命令行界面选择所需的选项[^1]。对于 Vue 3 项目,在初始化过程中需明确指定版本并启用 TypeScript 支持。 运行以下命令来启动项目创建流程: ```bash vue create my-vue3-typescript-app ``` 在交互界面上,当被询问到 **Vue version** 时,请选择 `Manually select features` 并勾选 Vue 3 和 TypeScript 功能模块。这一步骤确保最终生成的项目基于最新框架特性构建,并具备完整的类型定义文件支持。 --- #### 方法二:利用 Vite 构建工具设置 Vue 3 + TypeScript 环境 另一种更现代化的方法是采用 Vite 替代传统 Webpack 打包方案来进行高效开发体验优化。下面介绍如何借助 Vite 初始化带有 TypeScript 配置的新 Vue 3 应用程序实例: 执行如下脚本以开始建立过程: ```bash npm init vite@latest my-vue3-typescript-app --template vue-ts ``` 上述操作将引导开发者完成一系列参数设定工作流,其中包括但不限于模板种类挑选环节——这里特别指定了针对 Vue 技术栈且内置了 TypeScript 支持的基础样板结构作为蓝本[^4]。 一旦基础目录树成功生成完毕之后,则需要进入目标文件夹位置继续后续依赖项加载动作: ```bash cd my-vue3-typescript-app npm install ``` 最后为了验证整个环境是否正常运作起来,可尝试启动本地服务器查看效果: ```bash npm run dev ``` 与此同时,如果希望进一步自定义路径别名比如把 'src' 映射成 '@', 参考样例代码展示部分即可得知相应调整措施[^2]: ```javascript import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; import path from "path"; const pathSrc = path.resolve(__dirname, "src"); export default defineConfig({ plugins: [vue()], resolve: { alias: { "@": pathSrc, }, }, }); ``` 以上就是分别运用两种不同技术手段达成相同目的即设立兼容 Vue 3 版本同时还融合了强类型语言特性的前端工程项目全过程说明文档内容摘要总结描述形式呈现给读者朋友们参考学习之用! ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值