太爽了！这10个 Vite 插件，帮我在开发中节省了大量时间！！

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [vue()]
});

<template>
  <div id="app">
    <h1>Hello Vite + Vue!</h1>
  </div>
</template>
<script>
export default {
  name: 'App'
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
  plugins: [react()]
});

import React from 'react';
function App() {
  return (
    <div className="App">
      <h1>Hello Vite + React!</h1>
    </div>
  );
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));

import { defineConfig } from 'vite';
import ts from '@vitejs/plugin-typescript';
export default defineConfig({
  plugins: [ts()]
});

import { createApp } from 'vue';
import App from './App.vue';
createApp(App).mount('#app');

import { defineConfig } from 'vite';
import Icons from 'vite-plugin-icons';
export default defineConfig({
  plugins: [Icons()]
});

import { defineComponent } from 'vue';
import { HomeIcon } from 'vite-plugin-icons/icons';
export default defineComponent({
  components: {
    HomeIcon
  },
  template: `
    <div>
      <HomeIcon />
    </div>
  `
});

import { defineConfig } from 'vite';
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
  plugins: [
    VitePWA({
      manifest: {
        name: 'Vite PWA App',
        short_name: 'VitePWA',
        start_url: '/',
        display: 'standalone',
        background_color: '#ffffff',
        theme_color: '#42b883',
        icons: [
          {
            src: 'icon.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ]
});

import { defineConfig } from 'vite';
import WindiCSS from 'vite-plugin-windicss';
export default defineConfig({
  plugins: [WindiCSS()]
});

import { defineConfig } from 'windicss/helpers';
export default defineConfig({
  extract: {
    include: ['**/*.{vue,html,jsx,tsx}'],
    exclude: ['node_modules', '.git']
  }
});

import { defineConfig } from 'vite';
import ssr from 'vite-plugin-ssr/plugin';
export default defineConfig({
  plugins: [ssr()]
});

// server.js
import express from 'express';
import { createServer } from 'vite';
import { renderToString } from 'vue/server-renderer';
import App from './src/App.vue';
const app = express();
async function startServer() {
  const vite = await createServer({
    server: { middlewareMode: 'ssr' }
  });
  app.use(vite.middlewares);
  app.get('*', async (req, res) => {
    const html = await renderToString(App);
    res.status(200).send(html);
  });
  app.listen(3000, () => {
    console.log('Server is running at http://localhost:3000');
  });
}
startServer();

import { defineConfig } from 'vite';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11']
    })
  ]
});

import { defineConfig } from 'vite';
import Pages from 'vite-plugin-pages';
export default defineConfig({
  plugins: [Pages()]
});

<!-- pages/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>
<script>
export default {
  name: 'Home'
};
</script>

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import routes from 'virtual:generated-pages';
import App from './App.vue';
const router = createRouter({
  history: createWebHistory(),
  routes
});
createApp(App).use(router).mount('#app');

import { defineConfig } from 'vite';
import Markdown from 'vite-plugin-md';
export default defineConfig({
  plugins: [Markdown()]
});

<!-- docs/README.md -->
# Hello Vite + Markdown!

import { defineComponent } from 'vue';
import README from './docs/README.md';
export default defineComponent({
  template: `
    <div v-html="content"></div>
  `,
  setup() {
    return {
      content: README
    };
  }
});