vue3、vite使用typescript,数组包含对象的集合数据的ts语法

*.d.ts文件中或者直接在*.vue文件中使用ts语法规定数据类型

定义类型:(可以用一个一个写key的形式,也可以使用索引签名的形式)

// 在.d.ts文件中配置的内容可以在其他文件中引用
interface interA {
    alls: string;
    gee: number;
    // 索引签名的方式就不需要写具体的key,同上
    // [props: string]: string | number
}

变量使用:

 // 数组中有对象的形式ts语法
    let ae = ref<interA[]>([
        {
            alls: '123',
            gee: 200
        }
    ])

对于 Vue 3 + Vite + TypeScript 的项目实战,你可以按照以下步骤进行: 1. 创建项目:使用 Vue CLI 创建一个新的 Vue 3 项目,同时选择 TypeScript 作为语言支持。如果你还没有安装 Vue CLI,可以先通过 npm 全局安装它:`npm install -g @vue/cli`。然后运行`vue create my-project`命令创建项目,并选择 TypeScript 作为预设。 2. 构建工具:Vue CLI 默认使用 webpack 作为构建工具,但是对于 Vue 3,你可以尝试使用 ViteVite 是一个基于 ES Modules 的开发服务器,在开发模式下具有非常快的冷启动速度。安装 Vite:`npm install -g create-vite`,然后在项目目录下运行`create-vite`命令创建一个新的 Vite 项目。 3. 配置:根据你的项目需求,配置 ViteTypeScript。你可以编辑 `vite.config.ts` 文件来自定义 Vite 的配置,例如添加插件、配置别名等。此外,还需要编辑 `tsconfig.json` 文件来配置 TypeScript 相关的选项,如指定编译输出目录、允许的模块类型等。 4. 开发:开始编写代码!在 `src` 目录创建你的组件、页面和其他文件。Vue 3 的语法和 API 与 Vue 2 有一些差异,你可以查阅 Vue 3 的官方文档获取更多信息。同时,由于你选择了 TypeScript,可以利用其类型系统来提供更好的开发体验和代码质量。 5. 运行项目:在项目根目录下运行`npm run dev`命令,启动 Vite 的开发服务器。然后在浏览器访问 `http://localhost:3000`,即可看到你的项目运行起来。 6. 构建和部署:当你的项目开发完成后,可以使用`npm run build`命令构建生产环境的代码。Vite 会将你的代码打包成优化过的 ES Modules 格式,以提供更好的加载性能。构建完成后,你可以将生成的静态文件部署到你喜欢的服务器或者托管平台上。 希望以上的步骤能够帮助你进行 Vue 3 + Vite + TypeScript 的项目实战!如果有任何问题,请随时提问。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值