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
相关推荐
swan4162 小时前
SCAU期末笔记 - 数据分析与数据挖掘题库解析
笔记·数据挖掘·数据分析
头疼的程序员3 小时前
MySQL学习之触发器
学习·mysql
ThreeYear_s4 小时前
基于FPGA的PID算法学习———实现PI比例控制算法
学习·算法·fpga开发
银色的白6 小时前
工作记录:人物对话功能开发与集成
vue.js·学习·前端框架
AgilityBaby6 小时前
Unity实现不倒翁
笔记·unity·c#·游戏引擎
新中地GIS开发老师7 小时前
三维GIS开发cesium智慧地铁教程(4)城市白模加载与样式控制
学习·arcgis·智慧城市·webgl·gis开发·webgis·地理信息科学
很甜的西瓜7 小时前
typescript软渲染实现类似canvas的2d矢量图形引擎
前端·javascript·typescript·图形渲染·canvas
Studying 开龙wu7 小时前
机器学习监督学习实战五:六种算法对声呐回波信号进行分类
学习·算法·机器学习
软件开发技术深度爱好者7 小时前
HTML版英语学习系统
学习·html
nenchoumi31198 小时前
UE5 学习系列(二)用户操作界面及介绍
windows·学习·ue5·机器人