2025又开始写前端啦,一些学到的新TIPS😎️

  1. 初试typescrpt
    🤔️在代码中加入类型标注,增加了部分工作量,但不一定会降低效率,某些开发工具依赖类型系统可以有更好的功能,从而提升开发体验…
    ts教程
    npm install -g typescript
    使用vue-tsc命令进行类型检查，在package.json可以配置在开启 Vite 开发服务器的同时以
    侦听模式运行 vue-tsc，
    1
    2
    3
    4
    5
    6
    7
    8
    9
    "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）
  2. 关于前端ui框架
    本来想尝试arcoDesign,但是在使用arco-cli创建项目时候报错,github上issue里有人骂…
    element plus & ant design一直在更新
    https://www.antdv.com/docs/vue/introduce-cn
    https://element-plus.org/zh-CN/
    https://ant-design-x.antgroup.com/index-cn
  3. 关于pnpm
    npm–>yarn–>pnpm
    更快的包安装速度,同一个依赖不需要每个项目下载一次的pnpm
    npm install -g pnpm
    遇到了一个坑: 项目目录下运行pnpm报错,原因是element plus实例项目中package.json的配置了”packageManager”: “pnpm@10.4.1“,版本号跟我刚安装的不一样导致报错,手动改了一下版本号修复…
  4. vue devtools
    之前vue官网看到过推荐,但没有用过,这次体验了一下发现确实很不错呢
    https://devtools.vuejs.org/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 安装
    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(),
      ],
    })
  5. unplugin-auto-import & unplugin-vue-components
    🤔️可以避免写import语句,既然是能提升开发体验和效率的,咱得用上
    安装后各种奇怪的问题,各种搜没有解决,然后恰好vscode提示升级版本,下载安装重新打开vscode,好了…
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    // 安装
    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()],
        }),
      ]
    })
  6. UnoCSS
    😅️目测是一个大一统的css工具,有些借鉴tailwind,与unplugin是同一位作者