typescript vue？Vite Vue TS

本篇文章给大家谈谈typescript vue，以及Vite Vue TS对应的知识点，文章可能有点长，但是希望大家可以阅读完，增长自己的知识，最重要的是希望对各位有所帮助，可以解决了您的问题，不要忘了收藏本站喔。

Vue中使用TypeScript

​ Tip:这篇文章是我用到了typescript后写的，因为刚接触没多久，写得不好多多海涵，栗子用了另外一位作者的，在此表示感谢，vue3.x开始会慢慢向typescript靠拢，所以学习ts是非常有必要的，阅读本文需要具备一定的TypeScript基础和vue基础。

当我们在 vue单文件中使用 TypeScript时,引入 vue-property-decorator之后, script中的标签就变为这样:

等同于：

把我们需要用到的属性给导入进来，在这里我导入了Component；这是 vue-property-decorator组件提供的属性，至于有哪些属性下面我会说到。

相信很多小伙伴也注意到我使用了和以往不同的写法，使用了es6的类的写法，至于为何可以使用这种写法就是因为这个组件是完全依赖于 vue-class-component；这是尤大神写的支持vue的组件，具体可看。建议先看看~

Tip:(很重要的一点)：在类中声明的变量其实和data中声明的是一样的，都是有双向绑定的；也就是例子中的ValA和ValB有了类型指定同时能双向绑定

这个组件完全依赖于 vue-class-component.它具备以下几个属性:

因为我个人也刚学ts没多久，写得不好，还请多多海涵。后续会继续更新。

基于Vue3 和 TypeScript 项目大量实践后的思考

Vue3出来已经有一段时间了，在团队中，也进行了大量的业务实践，也有了一些自己的思考。

总的来说，Vue3无论是在底层的原理上，还是在业务的实际开发中，都有了长足的进步。

使用 proxy代替之前的 Object.defineProperty的API，性能更加优异，也解决了之前vue在处理对象、数组上的缺陷；在diff算法上，使用了静态标记的方式，大大提升了Vue的执行效率。

在使用的层面，我们从options Api，变成了composition Api，慢慢的在实际的业务中，我们抛弃了原本的data、methods、computed那种隔离式的写法。compositon Api，它更加聚焦，它讲究的是相关业务的聚合性。

完全良好的支持了TypeScript，类型校验也成为了以后Vue3进行大型项目开发的质量保障，同时这也是面向了趋势--前端的未来就是TypeScript！

compositon Api的本质，体现在代码里面，也就是一个setup函数，在这个setup函数中，返回的数据，会用到该组件的模板中。return的这个对象，一定程度上，代表了之前vue2中的data属性。

这时候，对于大多数初学者来说，可能存在的疑惑就是，那么我能不能定义options Api的写法，比如data、computed、watch、methods等等。

这里我需要明确的是，Vue3是完全兼容Vue2的这种options Api的写法，但是从理念上来说，更加推荐setup的方式，来写我们的组件。

原因如下：Vue3的存在，本身是为了解决Vue2的问题的，Vue2的问题就是在于，聚合性不足，会导致代码越来越臃肿！setup的方式，能够让data、方法逻辑、依赖关系等聚合在一块，更方便维护。

也就是说，以后我们尽量不要写单独的data、computed、watch、methods等等，不是Vue3不支持，而是和Vue3的理念违背。

components属性，也就是一个组件的子组件，这个配置在Vue2和3的差异不大，Vue2怎么用，Vue3依然那么用。

在功能方面，ref和 reactive，都是可以实现响应式数据！

在语法层面，两个有差异。ref定义的响应式数据需要用[data].value的方式进行更改数据；reactive定义的数据需要[data].[prpoerty]的方式更改数据。

但是在应用的层面，还是有差异的，通常来说：单个的普通类型的数据，我们使用ref来定义响应式。表单场景中，描述一个表单的key:value这种对象的场景，使用reactive；在一些场景下，某一个模块的一组数据，通常也使用reactive的方式，定义数据。

那么，对象是不是非要使用reactive来定义呢？其实不是的，都可以，根据自己的业务场景，具体问题具体分析！ref他强调的是一个数据的value的更改，reactive强调的是定义的对象的某一个属性的更改。

周期函数，在Vue3中，是被单独使用的，使用方式如下：

在Vue2中，其实可以直接通过this.$store进行获取，但是在Vue3中，其实没有this这个概念，使用方式如下：

在Vue2中，是通过this.$router的方式，进行路由的函数式编程，但是Vue3中，是这么使用的：

merchant.ts

这一部分内容，准确的来说，是TS的内容，不过它与Vue3项目开发，息息相关，所以真的想用Vue3，我们还是得了解TS的使用。

不过这一部分，我不会介绍TS的基础语法，主要是在业务场景中，如何组织TS。

在一个常见的接口请求中，我们一般使用TS这么定义一个数据请求，数据请求的req类型，数据请求的res类型。

vue3+typescript创建项目详细步骤

以下是使用 Vue 3和 TypeScript创建项目的详细步骤：

1.新建项目文件夹在本地计算机上选择一个合适的路径，新建一个文件夹作为项目根目录。2.全局安装 Vue CLI打开终端（Windows用户使用 CMD或 PowerShell，macOS/Linux用户使用 Terminal），运行以下命令安装 Vue CLI：cnpm install-g@vue/cli#或npm install-g@vue/cli如果已安装旧版本，建议先卸载旧版：npm uninstall-g@vue/cli。

3.创建项目在终端中导航到项目文件夹，运行以下命令：vue create项目名称将项目名称替换为实际的名称（如 my-vue3-ts-project），名称需符合 npm包命名规范（仅支持小写字母、数字和连字符）。

4.配置项目选择配置方式：在交互界面中，选择 Manually select features（手动选择特性），以便自由配置项目。

选择特性：使用空格键勾选以下特性（根据需求调整）：

TypeScript：启用 TypeScript支持。

Babel：适配 JavaScript新特性。

Router：添加 Vue Router（如需路由功能）。

CSS Pre-processors：支持 Less/Sass等 CSS预处理器（按需选择）。

Linter/ Formatter：代码规范校验（如 ESLint）。

Class-style component syntax：启用类组件风格（类似 React）。

跳过测试框架：不选择自动化测试框架（如 Unit Testing或 E2E Testing）。

启用类组件：选择 Y启用类组件语法（可选）。

配置 Babel转义：确保启用 Babel对 TypeScript和 JSX的转义。

路由模式：选择路由模式（Y为 HTML5 History模式，N为 Hash模式）。

CSS预处理器：根据习惯选择 Less/Sass/Stylus（如选择 Sass，需后续安装 sass-loader和 node-sass）。

代码风格校验：选择 ESLint配置（如 Standard或 Prettier），并配置校验时机：

Lint on save：保存时校验。

Lint and fix on commit：提交时校验并修复。

配置文件存放位置：选择 In dedicated config files（独立配置文件）或 In package.json（合并到 package.json）。

保存预设：选择 N不保存当前配置为模板（除非需复用）。

5.等待项目初始化Vue CLI会自动安装依赖并生成项目结构，完成后终端会显示成功信息。6.运行项目进入项目目录并启动开发服务器：cd项目名称npm run serve浏览器访问 即可查看项目。7.后续配置（可选）安装 Sass/Less：若选择了 CSS预处理器，需额外安装依赖：npm install sass sass-loader--save-dev# Sass#或npm install less less-loader--save-dev# Less配置 Vue Router：在 src/router/index.ts中修改路由规则。添加 Vuex：如需状态管理，运行 vue add vuex。关键注意事项Node.js版本：确保使用 Node.js 14+和 npm 6+。TypeScript支持：项目默认生成 shims-vue.d.ts文件，无需手动配置.vue文件的 TypeScript类型。依赖冲突：若使用 cnpm安装依赖，建议后续改用 npm或 yarn避免潜在问题。通过以上步骤，即可快速创建一个基于 Vue 3和 TypeScript的项目框架。

typescript vue和Vite Vue TS的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！