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
相关推荐
yangzhi_emo19 分钟前
ES6笔记4
前端·笔记·es6
qq77982334025 分钟前
PMP考试学习计划与知识大纲
学习·产品经理
索迪迈科技25 分钟前
java后端工程师进修ing(研一版‖day42)
java·开发语言·学习·算法
星梦清河1 小时前
宋红康 JVM 笔记 Day16|垃圾回收相关概念
java·jvm·笔记
誰能久伴不乏1 小时前
Modbus 速查与实战笔记(功能码、帧结构、坑点)
笔记
长安——归故李2 小时前
【modbus学习】
java·c语言·c++·学习·算法·c#
索迪迈科技2 小时前
STL库——map/set(类函数学习)
开发语言·c++·学习
我命由我123452 小时前
Excel 表格 - Excel 减少干扰、专注于内容的查看方式
学习·ui·excel·photoshop·表格·ps·美工
我命由我123452 小时前
Excel 表格 - Excel 单元格添加边框
学习·ui·excel·课程设计·photoshop·ps·美工
easy20202 小时前
从机器学习的角度实现 excel 中趋势线:揭秘梯度下降过程
笔记·机器学习·线性回归