从零搭建一个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"