# vue3-ep-project

**Repository Path**: BDNF/vue3-ep-project

## Basic Information

- **Project Name**: vue3-ep-project
- **Description**: 初始化一个vue3-vite-element-plus项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-08-17
- **Last Updated**: 2024-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

// Element Plus 按需引入组件
pnpm install element-plus
1. 安装插件
   pnpm install -D unplugin-vue-components unplugin-auto-import
2. 使用 ElementPlus 的组件就会自动在根目录下生成下面两个文件
   auto-import.d.ts / components.d.ts
3. 如果想更改这两个文件的位置，可以传入第二个参数，里面指定文件的位置。由于用到了 node 的东西，所以最好安装下 node 的 ts 类型插件，这样编译器不爆红
   pnpm i -D @types/node
4. vite.config.ts 配置
   // 自动导入 ElementPlus 组件
   AutoImport({
   resolvers: [ElementPlusResolver()],
   // 指定 ts 类型文件位置
   dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),
   }),
   // 自动注册 ElementPlus 组件
   Components({
   resolvers: [ElementPlusResolver()],
   // 指定 ts 类型文件位置
   dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),
   })
5. 现在文件就生成在了types文件夹内了

// Element Plus 按需自动引入图标
pnpm install @element-plus/icons-vue

pnpm i -D unplugin-icons unplugin-auto-import
// 自动导入ElementPlus组件
    AutoImport({
      resolvers: [
        ElementPlusResolver(),
        // 自动导入图标组件
        IconsResolver({
          prefix: 'Icon',
        }),
      ],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/auto-imports.d.ts', import.meta.url)),
    }),
    // 自动注册ElementPlus组件
    Components({
      resolvers: [
        ElementPlusResolver(),
        // 自动注册图标组件
        IconsResolver({
          enabledCollections: ['ep'],
        }),
      ],
      // 指定ts类型文件位置
      dts: fileURLToPath(new URL('./types/components.d.ts', import.meta.url)),
    }),
    // 自动安装图标
    Icons({
      autoInstall: true,
    }),

pinia 持久化插件安装
pnpm install pinia-plugin-persistedstate