``` -------------------------------- ### User Module Template Source: https://github.com/antfu-collective/vitesse/blob/main/src/modules/README.md This is the template for creating a custom user module in Vitesse. It imports the `UserModule` type and exports an `install` function that receives an object with `app`, `router`, and `isClient` properties. This function is where module-specific logic should be placed. ```ts import type { UserModule } from '~/types' export const install: UserModule = ({ app, router, isClient }) => { // do something } ``` -------------------------------- ### Build for Production Source: https://github.com/antfu-collective/vitesse/blob/main/README.md Builds the Vite application for production. The output will be placed in the 'dist' directory. ```bash pnpm build ``` -------------------------------- ### Testing and CI/CD Source: https://github.com/antfu-collective/vitesse/blob/main/README.zh-CN.md Vitesse includes configurations for unit testing with Vitest, E2E testing with Cypress, and integration with GitHub Actions for CI/CD pipelines. ```Markdown - ⚙️ 结合 [GitHub Actions](https://github.com/features/actions)，使用 [Vitest](https://github.com/vitest-dev/vitest) 进行单元测试, [Cypress](https://cypress.io/) 进行 E2E 测试 ``` -------------------------------- ### Build Vitesse Application Source: https://github.com/antfu-collective/vitesse/blob/main/README.zh-CN.md Command to build the Vitesse application for production. This generates a `dist` folder containing the optimized files for deployment. ```bash pnpm build ``` -------------------------------- ### Zero-Config Deployment Source: https://github.com/antfu-collective/vitesse/blob/main/README.zh-CN.md The template is designed for zero-configuration deployment on platforms like Netlify, simplifying the deployment process. ```Markdown - ☁️ 零配置部署 Netlify ``` -------------------------------- ### Development Tools: TypeScript, Vitest, Cypress, pnpm, vite-ssg Source: https://github.com/antfu-collective/vitesse/blob/main/README.zh-CN.md Vitesse is equipped with essential development tools including TypeScript for type safety, Vitest for unit testing, Cypress for E2E testing, pnpm as a package manager, and vite-ssg for server-side generation. ```Markdown ### 开发工具 - [TypeScript](https://www.typescriptlang.org/) - [Vitest](https://github.com/vitest-dev/vitest) - 基于 Vite 的单元测试框架 - [Cypress](https://cypress.io/) - E2E 测试 - [pnpm](https://pnpm.js.org/) - 快, 节省磁盘空间的包管理器 - [`vite-ssg`](https://github.com/antfu/vite-ssg) - 服务端生成 - [beasties](https://github.com/danielroe/beasties) - 关键 CSS 生成器 - [Netlify](https://www.netlify.com/) - 零配置的部署 - [VS Code 扩展](./.vscode/extensions.json) - [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - 自动启动 Vite 服务器 - [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) - Vue 3 ` ``` Features: - `useMouse`: Track mouse coordinates. - `useWindowSize`: Get window dimensions. - `useStorage`: Reactive storage for localStorage/sessionStorage. - `useEventListener`: Declarative event listeners. - And many more utilities for various use cases. ``` -------------------------------- ### Component Auto-loading Source: https://github.com/antfu-collective/vitesse/blob/main/README.zh-CN.md Components are automatically loaded in Vitesse, eliminating the need for manual imports. This feature is configured within the `src/components` directory. ```Markdown - 📦 [组件自动化加载](./src/components) ``` -------------------------------- ### State Management with Pinia Source: https://github.com/antfu-collective/vitesse/blob/main/README.md Leverages Pinia for state management in Vue 3 applications. Pinia is known for its simplicity, type safety, and flexibility, making it easy to manage global state. ```APIDOC Pinia: Description: A state management library for Vue.js, inspired by Vuex but with a simpler API and better TypeScript support. Setup: - Install: `npm install pinia` or `pnpm add pinia` - Create a store (e.g., `src/stores/counter.js`): ```javascript import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), getters: { doubleCount: (state) => state.count * 2, }, actions: { increment() { this.count++ }, }, }) ``` - Use the store in your components: ```vue ``` Features: - Intuitive API for defining state, getters, and actions. - First-class TypeScript support. - No mutations, simplifying state updates. - Plugin system for extending functionality. ``` -------------------------------- ### Critical CSS with beasties Source: https://github.com/antfu-collective/vitesse/blob/main/README.md Utilizes the `beasties` library to extract and inline critical CSS for improved initial page render performance. This ensures that the essential styles are delivered with the HTML. ```APIDOC beasties: Description: A library for extracting and inlining critical CSS for performance optimization. Integration: - Typically integrated within the `vite-ssg` build process or a custom build script. - Example usage within `vite-ssg`'s `createApp` callback: ```javascript import { ViteSSG } from 'vite-ssg' import App from './src/App.vue' import generatedRoutes from 'virtual:generated-routes' import { extractCriticalCSS } from 'beasties' export const createApp = ViteSSG( App, { routes: generatedRoutes }, async ({ app, router, routes, isClient, initialState }) => { if (isClient) { // Hydrate app } // Extract critical CSS on the server-side if (!isClient) { const css = await extractCriticalCSS(app, router) initialState.criticalCSS = css } } ) ``` Usage: - The extracted critical CSS is typically inlined in the `` of the HTML document. Features: - Improves First Contentful Paint (FCP) and Largest Contentful Paint (LCP). - Reduces the need for render-blocking CSS requests. - Works well with SSG workflows. ``` -------------------------------- ### File-based Routing with unplugin-vue-router Source: https://github.com/antfu-collective/vitesse/blob/main/README.md Implements file-based routing, where the file structure in the `src/pages` directory automatically defines the application's routes. This simplifies route management. ```APIDOC unplugin-vue-router: Description: Enables file system based routing for Vue applications. Setup: - Install: `npm install unplugin-vue-router --save-dev` or `pnpm add -D unplugin-vue-router` - Configure in `vite.config.js` or `vite.config.ts`: ```javascript import VueRouter from 'unplugin-vue-router/vite' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ VueRouter({ routesFolder: 'src/pages', }), ], }) ``` Features: - Automatically generates routes based on file structure in the specified folder. - Supports dynamic routes and nested routes. Usage: - Create files in `src/pages` (e.g., `src/pages/about.vue`) to create routes (`/about`). - Nested routes are handled by directory structure (e.g., `src/pages/users/[id].vue` for `/users/:id`). ``` -------------------------------- ### File-based Routing Source: https://github.com/antfu-collective/vitesse/blob/main/README.zh-CN.md Vitesse utilizes a file-based routing system, allowing developers to define routes by organizing files within the `src/pages` directory. This simplifies route management and enhances developer experience. ```Markdown - 🗂 [基于文件的路由](./src/pages) ``` -------------------------------- ### Markdown Support Source: https://github.com/antfu-collective/vitesse/blob/main/README.zh-CN.md Markdown files can be used as components or to embed components within Markdown content, facilitated by `unplugin-vue-markdown` and related plugins like `markdown-it-prism`. ```Markdown - 🗒 [Markdown 支持](https://github.com/unplugin/unplugin-vue-markdown) ``` -------------------------------- ### Internationalization (I18n) Source: https://github.com/antfu-collective/vitesse/blob/main/README.zh-CN.md Vitesse comes with out-of-the-box internationalization support using Vue I18n and `unplugin-vue-i18n`, simplifying the process of creating multilingual applications. ```Markdown - 🌍 [I18n 国际化开箱即用](./locales) ``` -------------------------------- ### API Auto Importing with unplugin-auto-import Source: https://github.com/antfu-collective/vitesse/blob/main/README.md Automatically imports Vue Composition API functions and other utilities directly into your components, eliminating the need for explicit imports. This significantly reduces boilerplate. ```APIDOC unplugin-auto-import: Description: Automatically imports Composition API functions and other utilities, reducing boilerplate code. Setup: - Install: `npm install unplugin-auto-import --save-dev` or `pnpm add -D unplugin-auto-import` - Configure in `vite.config.js` or `vite.config.ts`: ```javascript import AutoImport from 'unplugin-auto-import/vite' import { defineConfig } from 'vite' export default defineConfig({ plugins: [ AutoImport({ imports: [ 'vue', 'pinia', '@vueuse/core', ], dts: true, // generate TypeScript declaration file }), ], }) ``` Usage: - Use Composition API functions directly without importing: ```vue ``` Features: - Auto-imports common libraries like Vue, Pinia, VueUse. - Supports custom import configurations. - Generates TypeScript declaration files for better type checking. ``` -------------------------------- ### Component Auto Importing with unplugin-vue-components Source: https://github.com/antfu-collective/vitesse/blob/main/README.md Automatically imports Vue components used in your templates, eliminating the need for manual imports. This streamlines component usage and reduces boilerplate code. ```APIDOC unplugin-vue-components: Description: Automatically imports Vue components, saving you from manual imports. Setup: - Install: `npm install unplugin-vue-components --save-dev` or `pnpm add -D unplugin-vue-components` - Configure in `vite.config.js` or `vite.config.ts`: ```javascript import Components from 'unplugin-vue-components/vite' import { defineConfig } from 'vite' import { NaiveUiResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ Components({ resolvers: [NaiveUiResolver()] }), ], }) ``` Features: - Auto-imports components from specified directories (e.g., `src/components`). - Supports custom resolvers for UI libraries (e.g., Naive UI, Element Plus). Usage: - Simply use components in your templates without importing them: ```vue ``` ``` -------------------------------- ### Specify Layout in Route Meta Source: https://github.com/antfu-collective/vitesse/blob/main/src/layouts/README.md This code snippet demonstrates how to specify a custom layout ('home') for a route using YAML meta information within a Vue Single File Component (SFC). This functionality is enabled by `unplugin-vue-router` and `vite-plugin-vue-layouts`. ```vue meta: layout: home ``` -------------------------------- ### Theme Toggling with JavaScript Source: https://github.com/antfu-collective/vitesse/blob/main/index.html This snippet enables dark mode functionality by checking user preferences via `prefers-color-scheme` media query and local storage settings. It toggles the 'dark' class on the document element accordingly. Ensure JavaScript is enabled for this feature. ```javascript (function () { const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; const setting = localStorage.getItem('vueuse-color-scheme') || 'auto'; if (setting === 'dark' || (prefersDark && setting !== 'light')) document.documentElement.classList.toggle('dark', true); })() ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.

{{ t('button.about') }}