# vue3-project-template

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

## 推荐 IDE 设置

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and
disable
Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

## 项目初始化

```sh
npm install
```

### 启动开发模式

```sh
npm run dev
```

## 其他能力

### Element Plus 组件自动引入

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

### 集成 Iconify 图标

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

示例:

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

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

图标库地址: [iconify](https://icon-sets.iconify.design/)

图标使用方法: [github.com/unplugin/unplugin-icons](https://github.com/unplugin/unplugin-icons#usage)

### 引入 VueUse

文档地址: [VueUse](https://vueuse.org/guide/)