chore: 配置组件库/图标库/axios

songshankun

2023-10-25 666576fefa2371a44b7e84e444e74eed15563039

 src/views/HomeView.vue

@@ -1,3 +1,51 @@
<script setup lang="ts"></script>
<template>
  <div class="home-view">
    <h1>Home View</h1>
    <h2>pinia 示例</h2>
    <section>
      <span> count: {{ counter.count }} </span>
      <el-button type="primary" @click="counter.increment">加一</el-button>
    </section>
    <h2>element plus 组件 icon 示例</h2>
    <section>
      <el-button type="primary">
        <el-icon style="vertical-align: middle">
          <Search />
        </el-icon>
        <span style="vertical-align: middle"> Search </span>

<template>home</template>
        <el-icon class="is-loading">
          <Loading />
        </el-icon>
      </el-button>
    </section>
    <h2>Iconify 图标示例, 支持自动下载自动导入</h2>
    <section>
      <p><a href="https://icon-sets.iconify.design/">iconify</a></p>
      <p>
        iconify 有许多图标集合,所以配置了自动下载和自动引入,
        但是下载所有的图标集合需要约120兆,所以建议事先选定好用哪个图标集, 别乱加图标不然要下载好多
      </p>
      <p>使用方法: <a href="https://github.com/unplugin/unplugin-icons#usage">github.com/unplugin/unplugin-icons</a></p>
      <div>
        <el-icon size="40" color="red">
          <IconAlert />
        </el-icon>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { useCounterStore } from '@/stores/counter'
import { Loading, Search } from '@element-plus/icons-vue'
import IconAlert from '~icons/mdi/alert'

const counter = useCounterStore()
</script>

<style lang="scss" scoped>
section {
  margin: 10px 0 40px 0;
}
</style>