从零搭建一个Vue3 + Typescript的脚手架——day2

1.配置ElementPlus

ElementPlus简介
Element Plus 是一个基于 Vue 3 的组件库，它提供了丰富的组件和样式，可以帮助开发者快速构建现代化的 Web 应用。Element Plus 是基于 Element UI 的 Vue 3 版本，它提供了更多的组件和样式，同时也支持 Vue 3 的 Composition API。Element Plus 是一个开源项目，它有丰富的文档和示例，可以帮助开发者快速上手。
安装配置

• 使用pnpm安装element-plus

pnpm install element-plus 

• 配置官方的按需导入插件unplugin-vue-components 和 unplugin-auto-import这两款插件

pnpm add unplugin-vue-components unplugin-auto-import -D

• 在vite.config.ts文件中添加配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    // 自动导入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    // 按需导入
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2.封装SvgIcon 组件

Svg简介
Svg 是一种矢量图形格式，它可以在不同的设备和分辨率下保持清晰度。Svg 可以通过 XML 代码来描述图形，因此可以很容易地通过编程来生成和修改图形。Svg 是一种非常灵活的图形格式，它可以在 Web 页面中直接嵌入，也可以通过 JavaScript 来动态生成和修改。Svg 是一种非常流行的图形格式，它被广泛应用于 Web 开发中。
组件封装

• 使用pnpm安装vite-plugin-svg-icons

pnpm add vite-plugin-svg-icons

• 安装fast-glob

pnpm add fast-glob -D

• 配置vite.config.ts文件

import { defineConfig } from 'vite'
import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'; // vite-plugin-svg-icons 用于自动导入 svg 图标

export default defineConfig({
  plugins: [
	createSvgIconsPlugin({
		// 需要自动导入的 svg 文件目录（可自行修改）
		iconDirs: [path.resolve(__dirname, "src/icons")],
		// 执行icon name的格式（可自行修改）
		symbolId: "icon-[dir]-[name]",
		// 更多配置请参考：https://github.com/vbenjs/vite-plugin-svg-icons/blob/HEAD/README.zh_CN.md
	}),
  ]
});

• 在main.ts文件中引入脚本

import "virtual:svg-icons-register"; // vite-plugin-svg-icons 插件注册，不引入会导致svg图标无法正常显示

• 封装svg组件

<template>
	<svg :style="iconStyle" aria-hidden="true">
		<use :xlink:href="symbolId" />
	svg>
template>

<script setup lang="ts" name="SvgIcon">
import { computed, CSSProperties } from "vue";

interface SvgProps {
	name: string; // 图标的名称（Svg 文件名） ==> 必传
	prefix?: string; // 图标的前缀 ==> 非必传（默认为"icon"）
	iconStyle?: CSSProperties; // 图标的样式 ==> 非必传
}

// 接收父组件参数并设置默认值
const props = withDefaults(defineProps<SvgProps>(), {
	prefix: "icon",
	iconStyle: () => ({ width: "50px", height: "50px" }),
});

const symbolId = computed(() => `#${props.prefix}-${props.name}`);
script>

3.配置PostCss

PostCss简介
PostCSS 是一个用 JavaScript 工具和插件转换 CSS 代码的工具。它可以帮助开发者使用最新的 CSS 特性，并且可以将它们转换为兼容旧浏览器的代码。PostCSS 是一个开源项目，它有丰富的文档和示例，可以帮助开发者快速上手。PostCSS 是一个强大的工具，它可以处理 CSS 代码的许多方面，包括自动添加浏览器前缀、优化 CSS 代码、处理 CSS 变量等。PostCSS 是一个非常重要的工具，它可以帮助开发者更好地使用 CSS，并且可以提高 CSS 代码的质量和性能。
安装配置

• 安装postcss

pnpm add -D install postcss autoprefixer cssnano

• 在根目录下创建一个postcss.config.js文件

import autoprefixer from 'autoprefixer'
import cssnano from 'cssnano'
import postcssNesting from 'postcss-nesting'
import cssNext from 'postcss-cssnext'
import postcssPresetEnv from 'postcss-preset-env'

export default  {
    plugins: [
      autoprefixer(), // 自动添加浏览器前缀
      cssnano(), // 压缩css
      postcssNesting(), // 允许使用嵌套语法
      cssNext(), // 使用最新的css语法
      postcssPresetEnv(), // 使用最新的css特性
    ],
  };

• 因为我们使用的是vite，他会自动识别postcss.config.js文件，所以不需要在vite.config.ts文件中配置

4.配置UnoCss

UnoCss简介
UnoCSS 是一个基于原子 CSS 的现代 CSS 框架，它可以帮助开发者快速构建高性能、可维护的 Web 应用。UnoCSS 是一个开源项目，它有丰富的文档和示例，可以帮助开发者快速上手。UnoCSS 是一个强大的工具，它可以处理 CSS 代码的许多方面，包括自动添加浏览器前缀、优化 CSS 代码、处理 CSS 变量等。UnoCSS 是一个非常重要的工具，它可以帮助开发者更好地使用 CSS，并且可以提高 CSS 代码的质量和性能。
安装配置

• 安装unocss

pnpm add -D unocss

• 在vite.config.ts文件中添加配置

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'

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

• 在根目录下创建一个unocss.config.ts文件

import { defineConfig } from 'unocss'

export default defineConfig({
  // ...UnoCSS options
})

• 在main.ts文件中引入执行

import "uno.css"