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
相关推荐
你要飞37 分钟前
Hexo + Butterfly 博客添加 Live2D 看板娘指南
笔记
Main. 243 小时前
从0到1学习Qt -- 创建第一个Hello World项目
学习
壹号用户3 小时前
python学习之生成器&三者关系
学习
new coder3 小时前
[c++语法学习]Day10:c++引用
开发语言·c++·学习
星域智链4 小时前
宠物智能用品:当毛孩子遇上 AI,是便利还是过度?
人工智能·科技·学习·宠物
ajsbxi4 小时前
【Java 基础】核心知识点梳理
java·开发语言·笔记
呱呱巨基4 小时前
vim编辑器
linux·笔记·学习·编辑器·vim
新子y4 小时前
【小白笔记】普通二叉树(General Binary Tree)和二叉搜索树的最近公共祖先(LCA)
开发语言·笔记·python
聪明的笨猪猪4 小时前
Java JVM “调优” 面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
"菠萝"4 小时前
C#知识学习-017(修饰符_6)
学习·c#