插件使用

在项目根目录下创建一个 config 目录，这里用来放置项目配置相关的内容。例如 vite 的插件都可以放在这里

新建 index.ts，这个是插件的主配置

import type { Plugin } from 'vite';
import vue from '@vitejs/plugin-vue';
import {configSvgIconsPlugin} from "./svgIcons";
import {configUnocssPlugin} from "./unocss.ts";
import {createAutoImportPlugin} from "./autoImport.ts";
import {createComponentsPlugin} from "./component.ts";

export function createVitePlugins(isBuild: boolean) {
  const vitePlugins: (Plugin | Plugin[])[] = [
    vue(),
  ];
  // auto import 自动导入插件
  vitePlugins.push(createAutoImportPlugin());
  // components 按需引入组件
  vitePlugins.push(createComponentsPlugin());
  // svg icons
  vitePlugins.push(configSvgIconsPlugin(isBuild));
  // unocss
  vitePlugins.push(configUnocssPlugin());

  return vitePlugins;
}

vite.config.ts 中引入即可

import {createVitePlugins} from './config/vite/plugins'

return {
  plugins: createVitePlugins(command === 'build'),
}

下面来逐个说明各个插件的使用

unplugin-auto-import

自动引入插件

pnpm add unplugin-auto-import -D

autoImport.ts 配置

/**  
 * 按需加载，自动引入依赖  
 */  

import AutoImport from 'unplugin-auto-import/vite'

export const createAutoImportPlugin = () => {
  return AutoImport({
    imports: [
      'vue',
      'vue-router',
      'pinia',
      {
        'naive-ui': ['useDialog', 'useMessage', 'useNotification', 'useLoadingBar']
      }
    ],
    dts: 'types/auto-imports.d.ts'
  })
}

dts 指定生成的 auto-imports.d.ts 文件路径，这里包含所有自动导入的依赖，该文件会自动生成

unplugin-vue-components

按需导入组件

pnpm add unplugin-vue-components -D

component.ts 配置

/**
 * 按需加载，自动引入组件
 */

import Components from 'unplugin-vue-components/vite'
import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'

export const createComponentsPlugin = () => {
  return Components({
    // relative paths to the directory to search for components.
    dirs: ['src/components'],

    // valid file extensions for components.
    extensions: ['vue'],
    // search for subdirectories
    deep: true,
    // resolvers for custom components
    resolvers: [NaiveUiResolver()],

    // generate `components.d.ts` global declarations,
    // also accepts a path for custom filename
    // dts: false,
    dts: 'types/components.d.ts',

    // Allow subdirectories as namespace prefix for components.
    directoryAsNamespace: false,
    // Subdirectory paths for ignoring namespace prefixes
    // works when `directoryAsNamespace: true`
    globalNamespaces: [],

    // auto import for directives
    // default: `true` for Vue 3, `false` for Vue 2
    // Babel is needed to do the transformation for Vue 2, it's disabled by default for performance concerns.
    // To install Babel, run: `npm install -D @babel/parser @babel/traverse`
    directives: true,

    // filters for transforming targets
    include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
    exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/]
  })
}

svg icons

安装

pnpm add vite-plugin-svg-icons -D

svgIcons.ts 配置

import { createSvgIconsPlugin } from "vite-plugin-svg-icons"  
import path from 'path';  

export function configSvgIconsPlugin(isBuild: boolean) {  
  return createSvgIconsPlugin({  
    iconDirs: [path.resolve(process.cwd(), "/src/assets/icons")],  
    symbolId: "icon-[dir]-[name]",  
    svgoOptions: isBuild  
  })  
}

unocss

安装

pnpm add -D unocss

unocss.ts 插件

import Unocss from 'unocss/vite';  

export const configUnocssPlugin = () => {  
    return Unocss();  
};

unocss.config.ts 配置

import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss';

export default defineConfig({
  exclude: ['node_modules', '.git', '.github', '.husky', '.vscode', 'build', 'dist', 'mock', 'public', './stats.html'],
  presets: [presetUno(), presetAttributify(), presetIcons()],
  shortcuts: [],
  rules: [],
  theme: {
    colors: {
      primary: 'var(--primary-color)',
      primary_hover: 'var(--primary-color-hover)',
      primary_pressed: 'var(--primary-color-pressed)',
      primary_active: 'var(--primary-color-active)',
      info: 'var(--info-color)',
      info_hover: 'var(--info-color-hover)',
      info_pressed: 'var(--info-color-pressed)',
      info_active: 'var(--info-color-active)',
      success: 'var(--success-color)',
      success_hover: 'var(--success-color-hover)',
      success_pressed: 'var(--success-color-pressed)',
      success_active: 'var(--success-color-active)',
      warning: 'var(--warning-color)',
      warning_hover: 'var(--warning-color-hover)',
      warning_pressed: 'var(--warning-color-pressed)',
      warning_active: 'var(--warning-color-active)',
      error: 'var(--error-color)',
      error_hover: 'var(--error-color-hover)',
      error_pressed: 'var(--error-color-pressed)',
      error_active: 'var(--error-color-active)',
    },
  },
});

使用的时候在 main.ts 中引入 uno.css

import 'uno.css';

postcss

使用这个插件需要安装一些东西

vite 内置的 css 处理器是 postcss，也是一种 css 预处理器，一般叫后置处理器，其实它能做很多事，非常强大，提供了各种插件，例如示例中使用字符处理插件 postcssPlugin: 'internal:charset-removal'，这个是在引入 sass 时，对编译时可能出现的字符问题进行处理

安装 postcss

npm installl postcss@latest -D

安装 autoprefixer

npm install autoprefixer@latest -D

对于 postcss 的配置，也可以直接新建一个 postcss.config.js 来单独配置这块的选项

module.exports = {
  plugins: {
    autoprefixer: {}
  }
}