ts教程

🤔️加入类型标注,增加了部分写代码的工作量,但开发工具依赖类型系统可以有更好的类型检查和提示功能,从而提升开发体验和大型项目的可维护性

npm install -g typescript
使用vue-tsc命令进行类型检查，在package.json可以配置在开启 Vite 开发服务器的同时以
侦听模式运行 vue-tsc，

"scripts": {
  "dev": "concurrently \"vite\" \"vue-tsc --watch\"",  // 这里
  "build": "run-p type-check \"build-only {@}\" --",
  "preview": "vite preview",
  "build-only": "vite build",
  "type-check": "vue-tsc --build",
  "lint": "eslint . --fix",
  "format": "prettier --write src/"
},

concurrently会将所有命令的输出合并到同一终端（ npm install concurrently –save-dev）

vite构建工具

包管理pnpm

npm–>yarn–>pnpm
更快的包安装速度,同一个依赖不需要每个项目下载一次的pnpm
npm install -g pnpm
遇到了一个坑: 项目目录下运行pnpm报错,原因是element plus实例项目中package.json的配置了”packageManager”: “pnpm@10.4.1“,版本号跟我刚安装的不一样导致报错,手动改了一下版本号修复…

react

vue

vue devtools

// 安装
pnpm add -D vite-plugin-vue-devtools

// vite.config.ts
import { defineConfig } from 'vite'
import vueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vueDevTools(),
  ],
})

-element-plus-vue

UnoCSS

😅️目测是一个大一统的css工具,有些借鉴tailwind,与unplugin是同一位作者

定位：原子化 CSS 库
目标：通过按需生成 CSS 和类，帮助开发者快速开发、避免冗余的样式，并提升性能。
功能：
- 原子化 CSS：Unocss 通过生成一个个独立的类（如 p-4、text-center 等），让开发者快速构建 UI 样式，而不需要写冗长的 CSS 规则。
- 按需生成：只会生成你在代码中实际使用到的 CSS 类，这能极大地减少最终打包的 CSS 文件大小。
- 兼容性：与 Vue、React 等框架兼容，支持原生的 class 使用和自动化工具。
- 动态主题：支持动态配置和主题切换，允许根据用户需要定制类。

unplugin

🤔️unplugin-starter是一个插件开发框架，但是我不准备开发插件，我只是想使用基于unlugin开发的一些插件，
比如unplugin-auto-import & unplugin-vue-components,可以避免写import语句,既然是能提升开发体验和效率的,咱得用上
安装后各种奇怪的问题,各种搜没有解决,然后恰好vscode提示升级版本,下载安装重新打开vscode,好了…

定位：插件体系框架，一个可以扩展和增强其他工具的插件系统。
目标：简化各种插件的集成和配置，提升开发工具链的可扩展性和易用性。

功能：

构建工具插件系统：unplugin 是一个用于统一集成插件的框架，它可以为多个构建工具（如 Vite、Webpack、Rollup）提供插件支持，简化插件的安装和使用。
插件生态：unplugin 支持多种插件，可以为不同的开发流程和工具提供扩展支持（如模板解析、自动导入、自动重命名等）。

与 Vite 集成：很多基于 Vite 的项目会使用 unplugin 来增强开发体验。例如，unplugin 可以帮助你更容易地配置和使用 Unocss，使得你不需要手动去配置样式生成流程。

// 安装
pnpm add -D unplugin-auto-import
pnpm add -D unplugin-vue-components
pnpm add -D unplugin-icons



// 配置
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
    AutoImport({
      imports: ['vue', 'vue-router'],
      dirs: ['src/components', 'src/layout/*'],
      resolvers: [ElementPlusResolver()],
      dts: 'src/auto-imports.d.ts',
    }),
    Components({
      dts: 'src/components.d.ts',
      resolvers: [ElementPlusResolver()],
    }),
  ]
})