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

你可能感兴趣的:(从零搭建脚手架,typescript,javascript,前端)