Vue3+TS+Vite 入门指南(vue3 ts知乎专栏)

Vue3+TS+Vite 入门指南

推荐整理分享Vue3+TS+Vite 入门指南(vue3 ts知乎专栏)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3+ts知乎,vue3 + ts,vue3 v-slot,vue3 ts知乎专栏,vue3 v-slot,vue3.0 ts,vue3+ts知乎,vue3 + ts,内容如对您有帮助，希望把文章链接给更多的朋友！

最近尝试上手 Vue3+TS+Vite，对比起 Vue2 有些不适应，但还是真香~

上手前先说下 Vue3 的一些变化吧~

Vue3 的变化

Vue3 带来的变化主要有以下几个方面：

使用层面

对比起 Vue2 启动速度快很多，新项目从 1s 升级到不到 500msvite.config.ts 配置文件修改后无需重启服务就能更新

代码层面

函数式编程，方便组合逻辑，如mixin容易命名冲突，数据来源不清晰新增 ref，reative API定义变量更好的 ts 支持组件文件中 template 模板内无需用根节点标签包着组件元素

底层设计

双向数据绑定从 defineProperty for in 循环变量改成 proxy。defineProperty 是改变原对象属性标签；而 proxy 未改变原对象，而是产生新的代理对象，js 引擎更喜欢稳定的对象重新定义 vdom 对比思路：区分动静态 dom，只对比动态数据 dom，用block 标记动态标签内部的静态标签使用最长递增子序列算法，找到所有不需要移动的元素compile 编译优化，把大量计算放在 node 层，最后浏览器只需执行最少的代码

底层设计层面的改变决定了 vue3 比 vue2 更快

下面介绍上手步骤~ (官网链接)

创建项目

使用 vite 命令创建初始项目

# npm 6.xnpm create vite@latest my-vue-app --template vue# npm 7+, extra double-dash is needed:npm create vite@latest my-vue-app -- --template vuecd my-vue-appnpm installnpm run devVite 配置

功能一致的配置大多跟 vue-cli 配置大同小异，不过多赘述

resolve

resolve.alias：当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。

/* vite.config.ts */resolve: { //文件系统路径的别名, 绝对路径 alias: { "@": path.resolve(__dirname, "src"), }}

sass配置

安装sass依赖和配置 vite.config.ts 预定义全局变量

npm i sass -D/* vite.config.ts */css: { preprocessorOptions: { scss: { additionalData: '@import "./src/assets/scss/var.scss";' } }}

开启服务配置

开启 http 服务

/* vite.config.ts */server:{ host: 'dev.moon.cn', port: 3000}

开启 https 服务

/* vite.config.ts */let httpsConfig = { key: fs.readFileSync("C:/Users/ca/wps.cn/_wildcard.wps.cn+3-key.pem"), cert: fs.readFileSync("C:/Users/ca/wps.cn/_wildcard.wps.cn+3.pem")};server:{ https: httpsConfig, host: 'dev.moon.cn', port: 443, open: true}预构建依赖优化

默认情况下，Vite 会抓取你的 index.html 来检测需要预构建的依赖项。如果指定了 build.rollupOptions.input，Vite 将转而去抓取这些入口点。

optimizeDeps.include

默认情况下，不在 node_modules 中的，链接的包不会被预构建。使用此选项可强制预构建链接的包。

/* vite.config.ts */optimizeDeps: { include: ['axios'],},

optimizeDeps.exclude

在预构建中强制排除的依赖项。

eslint 配置

vue3 和 ts 的 eslint 配置需另外自行配置，除了需配置 eslint 规则外还需调整 vite 的相关配置，感兴趣的话可以看看我另一篇文章（内附配置解析），或者直接看完整源码，这里不做赘述。

TypeScript

TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目，在编译阶段进行类型检查。

基础知识可直接看中文文档，英文比较好的小伙伴可以直接看官方文档，这里不做赘述，这里分享一些值得说的地方

类型/接口/泛型

类型：类型（type）不是定义一个新类型，而是一个类型别名，使类型更具体化

接口：接口（interface）则是描述一个对象的形状，对值所具有的结构进行类型检查。接口的作用类似于抽象类，不同点在于接口中的所有方法和属性都是没有实值的，换句话说接口中的所有方法都是抽象方法。接口主要负责定义一个类的结构，接口可以去限制一个对象的接口，对象只有包含接口中定义的所有属性和方法时才能匹配接口。同时，可以让一个类去实现接口，实现接口时类中要保护接口中的所有属性。

泛型：支持多种数据结构，有函数泛型，类泛型，接口泛型等。

你可能想问什么时候用类型，什么时候用接口？Typescript团队的建议是

可以使用接口就尽量使用接口，因为接口更灵活，更容易处理

很多时候 interface 和 type 是相同的，但有一个明显区别在于 interface 可以重复定义，类型注解会累加，而 type 重复定义会报错

类型