Vite+Typescript+Vue3学习笔记

Vite+Typescript+Vue3学习笔记

1、项目搭建

1.1、创建项目(yarn)

shell 复制代码
D:\WebstromProject>yarn create vite
yarn create v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:
      - create-vite
      - cva
√ Project name: ... vite-project
√ Select a framework: >> Vue
√ Select a variant: >> TypeScript

Scaffolding project in D:\WebstromProject\vite-project...

Done. Now run:

  cd vite-project
  yarn
  yarn dev

Done in 14.81s.

1.2、vite-env.d.ts

vite使用的是ts,不识别.vue后缀的文件,需在vite-env.d.ts配置下

tsx 复制代码
/// <reference types="vite/client" />
declare module "*.vue" {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
}

1.3、常用依赖

1、@types/node

ts需安装node的类型,否则使用node相关会提示找不到

shell 复制代码
# @types/node
yarn add -D @types/node

2、auto-import

用于简化Vue3中ref、reactive**、**watch和UI组件的导入

shell 复制代码
# unplugin-vue-components、unplugin-auto-import
yarn add -D unplugin-vue-components unplugin-auto-import

3、sass

shell 复制代码
# sass
yarn add -D sass

4、vue-router

shell 复制代码
# vue-router
yarn add vue-router@4
相关推荐
Moonnnn.2 小时前
【单片机期末】单片机系统设计
笔记·单片机·嵌入式硬件·学习
行云流水剑4 小时前
【学习记录】使用 Kali Linux 与 Hashcat 进行 WiFi 安全分析:合法的安全测试指南
linux·学习·安全
门前云梦6 小时前
《C语言·源初法典》---C语言基础(上)
c语言·开发语言·学习
我不吃饼干7 小时前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
小前端大牛马7 小时前
java教程笔记(十一)-泛型
java·笔记·python
sjtu_cjs7 小时前
Tensorrt python api 10.11.0笔记
开发语言·笔记·python
0x7CF7 小时前
QT3D学习笔记——圆台、圆锥
qt·学习·3d
qq_386322698 小时前
华为网路设备学习-24(路由器OSPF - 特性专题)
学习·华为·智能路由器
viperrrrrrrrrr78 小时前
大数据学习(132)-HIve数据分析
大数据·hive·学习
2401_878454538 小时前
node.js的初步学习
学习·node.js