1.项目初始化

1.vite官网构建项目

 npm init vite@latest vue3-element-admin --template vue-ts

2.插件

插件市场搜索 Vue Language Features (Volar) 和 TypeScript Vue Plugin (Volar) 安装，且禁用 Vetur。如出现项目中识别ts语法报红，卸载当前volar插件，重新安装后重启编辑器。

3，设置别名，使用@ 代替 src

1.修改vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
  plugins: [vue()],
  // 新增
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'src')
    }
  }
})

2.修改tsconfig.json

 "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    },
  }

3.解决path 报红

npm install -D @types/node

2.配置自动导入vue3语法和组件。（同时支持自动导入element plus）

1.安装依赖

unplugin-auto-import：按需自动导入API，ref，reactive,watch,computed 等API
unplugin-vue-components：按需自动导入组件，Element Plus 等三方库和指定目录下的自定义组件。参考element-plus.gitee.io/zh-CN/guide…

npm install -D unplugin-auto-import unplugin-vue-components 

// 其他ui框架可改对应的resolvers
npm install element-plus
npm i -D unplugin-icons

2.vite.config.ts配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
// AutoImport  Components 在plusgins注册后会默认在根目录生成ts文件声明，
// 可更改其中的dts修改路径
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
// 自动导入element-icon
import IconsResolver from "unplugin-icons/resolver"
import path from 'path'
const pathSrc =path.resolve(__dirname,'src')
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ["vue"], // 自动导入 Vue 相关函数，如：ref, reactive, toRef 等
      resolvers: [
        resolvers: [
            ElementPlusResolver(),
            IconsResolver({})
          ],
      ],
      dts: path.resolve(pathSrc, "types", "auto-imports.d.ts")
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
        IconsResolver({
          enabledCollections: ["ep"] 
          // element-plus图标库，其他图标库 https://icon-sets.iconify.design/
        }),
      ],
      dts: path.resolve(pathSrc, "types", "components.d.ts")
    }),
  ],
  resolve:{
    alias:{
      '@':pathSrc
    }
  }
})

3.测试效果

1.在组件中直接写ref语法，发现未报错，且 types/auto-imports.d.ts中有vue的声明

2.将组件中的import 组件删除，发现未报错，且types/components.d.ts生成了对应组件的声明

3.整合svg图标

通过 vite-plugin-svg-icons 插件整合 Iconfont 第三方图标库实现本地图标

1.安装

npm i vite-plugin-svg-icons -D

2. vite.config.ts 中的配置插件

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

export default () => {
  return {
    plugins: [
      createSvgIconsPlugin({
        // 指定需要缓存的图标文件夹
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        // 指定symbolId格式
        symbolId: 'icon-[dir]-[name]',
    ],
  }
}

3.封装svg-icon组件

<!-- src/components/SvgIcon/index.vue -->
<script setup lang="ts">
const props = defineProps({
    prefix: {
        type: String,
        default: "icon",
    },
    iconClass: {
        type: String,
        required: false,
    },
    color: {
        type: String,
    },
    size: {
        type: String,
        default: "1em",
    },
});

const symbolId = computed(() => `#${props.prefix}-${props.iconClass}`);
</script>

<template>
    <svg aria-hidden="true" class="svg-icon" :style="'width:' + size + ';height:' + size">
        <use :xlink:href="symbolId" :fill="color" />
    </svg>
</template>

<style scoped>
.svg-icon {
    display: inline-block;
    outline: none;
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    /* 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果 */
    fill: currentColor;
    /* 定义元素的颜色，currentColor是一个变量，这个变量的值就表示当前元素的color值，如果当前元素未设置color值，则从父元素继承 */
    overflow: hidden;
}
</style>

4.main.js引入

import 'virtual:svg-icons-register';

5.使用

在iconfont下载scg图标到本地 src/assets/icons

  <el-button type="info"><svg-icon icon-class="block"/>SVG 本地图标</el-button>

4.整合SCSS

1.安装

npm i -D sass 

2.创建 variables.scss 变量文件

添加变量 $bg-color 定义，注意规范变量以 $ 开头

3.Vite 配置导入 SCSS 全局变量文件

// vite.config.ts
css: {
    // CSS 预处理器
    preprocessorOptions: {
        scss: {
            javascriptEnabled: true,
            additionalData: `@use "@/styles/variables.scss" as *;`
        }
    }
}

4.js引用scss全局变量

1.新建以 .module.scss 结尾的文件

// src/styles/variables.module.scss

// 导出 variables.scss 文件的变量
:export{
    bgColor:$bg-color
}

2.使用

<script setup lang="ts">
import veribleColor from '@/styles/variables.module.scss'
console.log('veribleColor :>> ', veribleColor);
// 输出内容
{
    "bgColor": "#ff0"
}
</script>