Vite 2 + Vue 3 + TypeScript 后台模板构建指南（二）

嗨，大家好！欢迎来到本文，我们将继续深入探讨使用 Vite 2、Vue 3 和 TypeScript 构建后台模板。在上一篇文章中，我们介绍了 Vite 的基本配置。今天，我们将深入探讨如何配置路径别名、SCSS、Windi CSS 和应用启动页加载。让我们开始吧！

配置路径别名

路径别名允许您使用简短且易于记忆的名称来引用模块。这在大型项目中特别有用，其中您可能有多个文件夹和模块。要配置路径别名，您需要在 vite.config.js 文件中使用 alias 选项。例如：

import { defineConfig } from 'vite'

export default defineConfig({
  alias: {
    '@components': path.resolve(__dirname, './src/components'),
    '@assets': path.resolve(__dirname, './src/assets'),
  },
})

在上面的示例中，我们创建了两个别名：@components 和 @assets。这将允许我们在代码中使用这些别名来引用相应的目录。

配置 SCSS

SCSS（Sass 的超集）是一种强大的 CSS 预处理器，它提供了许多有用的特性，例如变量、嵌套和混合。要配置 SCSS，您需要安装 sass 和 sass-loader 依赖项。安装完成后，您可以在 vite.config.js 文件中添加以下配置：

import { defineConfig } from 'vite'
import sass from 'sass'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        implementation: sass,
      },
    },
  },
})

这将允许您在组件中使用 SCSS 文件。

配置 Windi CSS

Windi CSS 是一个实用的 CSS 框架，它提供了类似于 Tailwind CSS 的按需使用实用程序类。要配置 Windi CSS，您需要安装 @windicss/vite-plugin 插件。安装完成后，您可以在 vite.config.js 文件中添加以下配置：

import { defineConfig } from 'vite'
import WindiCSS from 'vite-plugin-windicss'

export default defineConfig({
  plugins: [
    WindiCSS(),
  ],
})

这将允许您在组件中使用 Windi CSS 实用程序类。

配置应用启动页加载

在某些情况下，您可能希望在您的应用程序启动时显示一个加载指示器。您可以使用 vite-plugin-loading 插件来实现这一点。安装完成后，您可以在 vite.config.js 文件中添加以下配置：

import { defineConfig } from 'vite'
import Loading from 'vite-plugin-loading'

export default defineConfig({
  plugins: [
    Loading(),
  ],
})

这将显示一个加载指示器，直到您的应用程序加载完成。

结论

在这篇文章中，我们深入探讨了如何配置路径别名、SCSS、Windi CSS 和应用启动页加载，以使用 Vite 2、Vue 3 和 TypeScript 构建后台模板。通过遵循这些步骤，您可以创建功能强大且用户友好的后台模板。在下一篇文章中，我们将探讨如何使用 TypeScript 和 Vuex 来管理状态。敬请期待！