Element-Plus

这里请注意区分两个项目：
element3 是由前端大圣老师（hug-sun）组织社区开发的适配vue3的版本，用于学习与研究，非官方。
element-plus 是由饿了么大前端打造的项目，也是本次使用的项目，是element-ui官方团队。

安装

  1. # yarn
  2. yarn add element-plus -S
  4. # npm
  5. npm i element-plus -S

引入项目（自定义主题）

这里直接讲述需要自定义主题时引入项目的方法。普通的引入以及按需引入请查看官方文档即可。

在 src/assets/style 文件夹中创建 element-variables.scss 文件：

  1. /* 改变主题色变量 */
  2. $--color-primary: #7020e3;
  4. /* 引入字体文件 */
  5. $--font-path: 'element-plus/lib/theme-chalk/fonts';
  7. /* 引入element样式 */
  8. @import 'element-plus/packages/theme-chalk/src/index';

在 main.ts 文件中：

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  4. import ElementPlus from 'element-plus'
  5. import '~/style/element-variables.scss'
  7. createApp(App)
  8.   .use(ElementPlus)
  9.   .mount('#app')

在 .vue 文件使用：

  1. <template>
  2.   <h1>button</h1>
  3.   <el-button type="primary">
  4.     button
  5.   </el-button>
  6. </template>

页面中成功展示：
image.png

在Element-Plus中使用iconfont

首先进入 iconfont，注册账号。
创建一个项目，将喜欢的图标添加至购物车，再将购物车内的图标添加至项目。

  1. 将项目下载至本地并解压，得到如下文件：

image.png

  1. 在 **src/assets** 下创建一个 **iconfont** 文件夹，并将这五个文件放进去：

image.png

  1. 这是 **iconfont.css** 的内容，下面的icon-xxx就是各个图标的类名：

image.png

  1. 在 **main.ts** 中引入

    1. import '~/iconfont/iconfont.css'

  2. 在 **.vue** 文件中

    1. <template>
    2. <h1>iconfont button</h1>
    3. <el-button
    4.  icon="iconfont icon-code"
    5.  type="primary"
    6. >
    7.  <span>iconfont</span>
    8. </el-button>
    9. </template>

    页面已成功展示：
    image.png

    Trouble Shooting

    当项目引入了Element-plus并打包时，可能会遭遇如下的错误：
    image.png
    这应该属于Element Plus的问题，但是我们必须解决这个错误，免得我们无法打包。最简单的解决方案就是让 vue-tsc 的检查调过对这些第三方库的ts检测，我们在 tsc 后面添加一个 --skipLibCheck 参数即可。

    1. // package.json
    2. {
    3. "scripts": {
    4.  "build": "vue-tsc --noEmit --skipLibCheck && vite build",
    5. },
    6. }

vite-plugin-svg-icons（svg雪碧图）

vite-plugin-svg-icons 是一个vite插件，生成svg雪碧图，并且在vue中可以使用一个简单易用的 SvgIcon 组件，轻松的展示svg图标。
以下仅展示基础用法，若要查看更多详细配置，请访问上方链接：

准备工作

1. 安装

  1. # yarn
  2. yarn add vite-plugin-svg-icons -D
  4. # npm
  5. npm i vite-plugin-svg-icons -D

2. 创建存放svg的文件夹

在 assets 下创建一个 icons 文件夹，将所有的svg放在这个文件夹中。
也可以在icons中按照svg功能区分文件夹存放。
image.png

3. 配置Vite：

修改vite.config.ts文件：

  1. // vite.config.ts
  2. import { defineConfig } from 'vite'
  3. import vue from '@vitejs/plugin-vue'
  4. import { resolve } from 'path'
  5. import viteSvgIcons from 'vite-plugin-svg-icons'
  7. const pathResolve = (dir: string): string => {
  8.   return resolve(__dirname, '.', dir)
  9. }
  11. // https://vitejs.dev/config/
  12. export default defineConfig({
  13.   plugins: [
  14.     vue(),
  15.     viteSvgIcons({
  16.       // 指定需要缓存的图标文件夹
  17.       iconDirs: [pathResolve('./src/assets/icons')],
  18.       // 指定symbolId格式
  19.       symbolId: 'icon-[dir]-[name]',
  20.     }),
  21.   ],
  22. })

4. 注册插件

在 main.ts 中注册插件：

  1. // main.ts
  2. import 'vite-plugin-svg-icons/register'

使用

1. 创建Vue组件

在 src/components 文件夹下创建 SvgIcon 组件：

  1. // src/components/SvgIcon/index.vue
  2. <template>
  3.   <svg aria-hidden="true">
  4.     <use :xlink:href="symbolId" />
  5.   </svg>
  6. </template>
  8. <script>
  9. import { defineComponent, computed } from 'vue'
  11. export default defineComponent({
  12.   name: 'SvgIcon',
  13.   props: {
  14.     prefix: {
  15.       type: String,
  16.       default: 'icon',
  17.     },
  18.     name: {
  19.       type: String,
  20.       required: true,
  21.     },
  22.   },
  23.   setup(props) {
  24.     const symbolId = computed(() => `#${props.prefix}-${props.name}`)
  25.     return { symbolId }
  26.   },
  27. })
  28. </script>

2. 注册全局组件

在main.ts中：

  1. // main.ts
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  5. import 'vite-plugin-svg-icons/register'
  6. import SvgIcon from '@/components/SvgIcon/index.vue'
  8. createApp(App)
  9.   .component('SvgIcon', SvgIcon)
  10.   .mount('#app')

3. 使用

在.vue文件中：

  1. <template>
  2.   <h1>icons/logo.svg</h1>
  3.   <SvgIcon
  4.     name="logo"
  5.     style="width: 80px;height:80px;"
  6.   />
  8.   <h1>icons/error/404.svg</h1>
  9.   <SvgIcon
  10.     name="error-404"
  11.     style="width: 80px;height:80px;"
  12.   />
  13. </template>
  15. <script lang="ts">
  16. import { defineComponent } from 'vue'
  18. export default defineComponent({
  19.   name: 'App',
  20.   components: {},
  21. })
  22. </script>

查看页面，已经成功生成了，且更改svg文件内容也可以热更新~
image.png