丁丁书屋

Appearance

Vite ​

Vite 介绍 ​

Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。

痛点解决： webpack 等工具构建大型的应用，大量的 JavaScript 代码量使其遇到性能瓶颈，启动开发服务器和热替换都变得迟钝。

核心特性：

  • 一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能。
    • Vite 的热模块更新 (hot module replacement, HMR) 提供开发者非常好的本地开发体验
  • 一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
  • 高扩展性，Vite 意在提供开箱即用的配置
    • 插件 API 和 JavaScript API 带来了高度的可扩展性，并有完整的类型支持。

目前前端社区中的绝大部分框架，都采用了 Vite，包含 Astro, Nuxt, SvelteKit, Solid Start, Qwik City 都是；基本上除了 Next 与 Angular 之外，热门的框架都是选 Vite。

快速搭建 ​

例：使用 NPM 包管理器，搭建 Vue 3 + TypeScript + Tailwind CSS 的 Vite 项目

方式一：从头搭建

先创建一个 Vite + Vue + ts 项目

bash
npm create vite@latest my-personal-page -- --template vue-ts

查看 create-vite 可以获得更多模板例如vanilla，vanilla-ts，vue，vue-ts，react，react-ts，preact，preact-ts，lit，lit-ts，svelte，svelte-ts。

安装并配置 Tailwind CSS

bash
cd my-personal-page
npm install tailwindcss @tailwindcss/vite

vite.config.ts 文件，引入并配置 tailwindcss 插件：

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue(), tailwindcss], // 注册插件
})

引入 Tailwind 样式

src/main.ts

ts
import './style.css'

src/style.css

css
@import "tailwindcss";

可选删除掉默认生成的示例页面及样式，至此，项目就初始化完成了，运行 npm run dev 启动项目。

方式二：克隆社区模板

vite-ts-tailwind-starter

设置路径别名 ​

引入组件或者依赖时，如果使用相对路径，都要去查看项目层级，十分麻烦。为某一个常用路径或源代码路径例如如 src/ 配置一个别名例如 @ 或 ~，既方便了编写又提升了观感。

vite.config.ts 配置

ts
import { defineConfig } from 'vite'
import path from 'path' // 注意：需要安装 @types/node 才能用 path

// https://vite.dev/config/
export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

tsconfig.json 配置

ts
{
    "paths": {
      "@/*": ["./src/*"] // 和 Vite 的 alias 路径写法一致（带 /*）
    },
    "moduleResolution": "Bundler", // 推荐 "Bundler" 解析策略
    "skipLibCheck": true // 跳过库检查，避免错误
    },
    "include": ["./src/**/*.ts", "./src/**/*.tsx", "./src/**/*.vue"]
}

图标按需加载 ​

安装图标加载插件

bash
npm install -D unplugin-icons unplugin-vue-components @iconify/json

vite.config.ts 配置

ts
import Vue from '@vitejs/plugin-vue'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import Components from 'unplugin-vue-components/vite'

export default {
  plugins: [
    Vue(),
    Components({
      resolvers: [
        // 自动识别图标组件，例如 <icon-carbon-accessibility />
        IconsResolver({
          prefix: 'icon', // 设置图标组件前缀，默认就是 'i'
        }),
      ],
    }),
    Icons({
      compiler: 'vue3', // 指定为 Vue 3 编译
      // autoInstall: true, // 可选：自动安装缺失的图标集
    }),
  ],
}

使用图标（无需导入）

vue
<template>
    <div>
        <i-carbon-accessibility />
        <i-material-symbols-light-sunny-outline style="..." />
    </div>
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>