vite+vue3+element-plus

1、在磁盘的某级目录下使用vite创建vue项目

npm init vite@latest

1.1、输入项目名称，默认为“vite-project”

1.2、选择项目类型，默认“Vanilla”，选择“Vue”

1.3、选择语言类型，默认“TypeScript”，看开发习惯，自由选择

1.4、vite项目创建完成

1.5、按上图步骤启动项目


2、安装element-plus

2.1、安装

npm install element-plus --save

2.2-1、按需导入(自动导入)

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

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

2.2-2、按需导入(手动导入)

npm i unplugin-element-plus -D

// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'

export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}

2.3、ICON图标-安装

npm install @element-plus/icons-vue

// vite.config.ts
import ElementPlus from 'unplugin-element-plus/vite'

export default {
  plugins: [
    ElementPlus({
      // options
    }),
  ],
}

2.3、ICON图标-自动导入

npm i -D unplugin-icons

// vite.config.ts
// elementui-plus icon图标
import Icons from 'unplugin-icons/vite'
// 自动注册图标组件
import IconsResolver from 'unplugin-icons/resolver'

export default defineConfig({
  plugins: [
    // ...
    AutoImport({
      resolvers: [
        // 自动导入图标
        IconsResolver({
          prefix: 'icon',
        }),
        ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        IconsResolver({
          enabledCollections: ['ep'],
        }),
        ElementPlusResolver()
      ]
    }),
    Icons({
      autoInstall: true
    })
  ]
})

	// template
    <div>图标1： <i-ep-plus size="40" color="#ff0000" /></div>
    <div>图标2（无效）：
      <el-icon size="40" color="#ff0000">
        <Plus />
      </el-icon>
    </div>
    <div>图标3：
      <el-icon size="40" color="#ff0000">
        <i-ep-plus />
      </el-icon>
    </div>