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
相关推荐
_落纸38 分钟前
《自动控制原理》第 3 章 线性控制系统的运动分析:3.6、3.7
笔记·自动化
colus_SEU1 小时前
【计算机网络笔记】第一章 计算机网络导论
笔记·计算机网络·1024程序员节
Pu_Nine_92 小时前
Vue 3 + TypeScript 项目性能优化全链路实战:从 2.1MB 到 130KB 的蜕变
前端·vue.js·性能优化·typescript·1024程序员节
koo3642 小时前
李宏毅机器学习笔记33
人工智能·笔记·机器学习
IT伟哥2 小时前
软件设计师重点笔记-3
笔记·软考·软件设计师·软考备考
航Hang*2 小时前
第1章:初识Linux系统——第8节:查看/修改权限控制和ACL
linux·运维·服务器·笔记·操作系统
m0_626535202 小时前
数据结构学习,一些知识点
数据结构·学习
猫梦www3 小时前
关于Mysql的学习三(事务)
学习·mysql
Yurko133 小时前
【C语言】程序控制结构
c语言·开发语言·学习
Peace & Love4873 小时前
C++初阶 -- 模拟实现list
开发语言·c++·笔记