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 "create-vite@4.4.1" 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
相关推荐
魔芋红茶11 分钟前
spring-initializer
python·学习·spring
西岭千秋雪_35 分钟前
Redis性能优化
数据库·redis·笔记·学习·缓存·性能优化
随便取个六字37 分钟前
GIT操作 学习
git·学习
chuanauc39 分钟前
Kubernets K8s 学习
java·学习·kubernetes
小张是铁粉44 分钟前
docker学习二天之镜像操作与容器操作
学习·docker·容器
小张是铁粉1 小时前
oracle的内存架构学习
数据库·学习·oracle·架构
HERR_QQ1 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
HuashuiMu花水木1 小时前
Matplotlib笔记4----------图像处理
图像处理·笔记·matplotlib
DES 仿真实践家2 小时前
【Day 11-N22】Python类(3)——Python的继承性、多继承、方法重写
开发语言·笔记·python
IMPYLH8 小时前
Python 的内置函数 reversed
笔记·python