vue3-project-template

Vue3 + TypeScript + SCSS + Element Plus 项目模板

推荐 IDE 设置

VSCode + Volar (and
disable
Vetur) + TypeScript Vue Plugin (Volar).

项目初始化

npm install

启动开发模式

npm run dev

其他能力

Element Plus 组件自动引入

配置了组件自动引入, 无需手动引入组件, vite 会在项目根目录下自动调整 auto-imports.d.ts、components.d.ts 内容。 Iconify
图标自动引入同上。

集成 Iconify 图标

iconify 有许多图标集合, 所以配置了自动下载和自动引入, 但是下载所有的图标集合需要约120兆, 所以建议事先选定好用哪个图标集,
别乱加图标不然要下载好多

示例:

<template>
  <el-icon size="40" color="red">
    <IconAlert />
  </el-icon>
</template>

<script setup lang="ts">
import IconAlert from '~icons/mdi/alert'
</script>

图标库地址: iconify

图标使用方法: github.com/unplugin/unplugin-icons

引入 VueUse

文档地址: VueUse