Vite环境搭建

2026-01-292 min read前端技术

vue

unplugin-auto-import

text

pnpm add unplugin-auto-import

vite.config.ts 中导入插件

vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'

// https://vite.dev/config/
export default defineConfig({
    plugins: [vue(), AutoImport({
        include: [
            /.[tj]sx?$/, // .ts, .tsx, .js, .jsx
            /.vue$/,
            /.vue?vue/, // .vue
            /.vue.[tj]sx??vue/, // .vue (vue-loader with experimentalInlineMatchResource enabled)
            /.md$/, // .md
        ],
        imports: [
            'vue',
            'vue-router',
            'pinia'
        ]
    })],
})

tailwind

bash

pnpm add tailwindcss @tailwindcss/vite

vite.config.ts 中导入插件

vite.config.ts

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import tailwindcss from '@tailwindcss/vite'

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

Prettier

vue-bits

bash

npx jsrepo init https://vue-bits.dev/ui

初始化后会在本地生成配置文件

json

{
  "$schema": "https://unpkg.com/jsrepo@2.4.3/schemas/project-config.json",
  "repos": ["https://vue-bits.dev/ui"],
  "includeTests": false,
  "includeDocs": false,
  "watermark": true,
  "formatter": "prettier",
  "configFiles": {},
  "paths": {
    "*": "./src/vuebit"
  }
}

安装使用,空格选中,回车下载

bash

npx jsrepo add

inspira-ui

shadcn-vue

安装 tailwindcss 依赖和插件

bash

pnpm add tailwindcss @tailwindcss/vite

pm add -D @types/node

style.css

@import "tailwindcss";

配置别名

tsconfig.json

{
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ],
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

```tsconfig.app.json
{
  "extends": "@vue/tsconfig/tsconfig.dom.json",
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true
  },
  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

添加 vite 插件依赖

vite.config.ts

import path from 'node:path'
import tailwindcss from '@tailwindcss/vite'
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [vue(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

初始化

bash

pnpm dlx shadcn-vue@latest init

安装inspira-ui

bash

 pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/wavy-background.json"

页面跳转进度条

bprogress

text

pnpm add @bprogress/vue

vue

<script setup lang="ts">
import App from './App.vue'
import { ProgressProvider } from '@bprogress/vue'
</script>

<template>
  <ProgressProvider>
    <App />
  </ProgressProvider>
</template>

useProgress

vue

<script setup lang="ts">
import { useProgress } from '@bprogress/vue';

const { start, stop, pause, resume } = useProgress();
</script>

<template>
  <button @click="start()">Start</button>
  <button @click="stop()">Stop</button>
  <button @click="pause">Pause</button>
  <button @click="resume">Resume</button>
</template>

nprogress

text

 NProgress.start() — shows the progress bar

 NProgress.set(0.4) — sets a percentage

 NProgress.inc() — increments by a little

 NProgress.done() — completes the progress