element-plus

在 vite + create-vue + vue3 + ts 项目中使用element-plus步骤

1, 下载安装element-plus
    cnpm i element-plus   / yarn add element-plus
2, 下载elment-plus按需导入插件
    cnpm i unplugin-vue-components unplugin-auto-import
3, 配置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()],
            }),
        ],
    })
4, 在页面中直接使用组件库即可
    <el-button type="primary" plain>Primary</el-button>


需要注意的问题: 
1, 安装环境版本要求(此处环境): node: V18.12  npm: V8.12  cnpm: V9.0  yarn: V1.22.19   (或者用yarn安装依赖) 
2, 按需引入配置后,组件无需再手动引入,会在根目录生成components.d.ts文件,会在此文件中自动引入页面中使用到的组件
3, icon图标组件组件单独下载安装@element-plus/icons-vue并引入
    cnpm i @element-plus/icons-vue
    在页面中手动按需引入
        import { Edit } from "@element-plus/icons-vue";
    或者在main.ts中全部引入
        import * as ElementPlusIconsVue from '@element-plus/icons-vue'
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
        app.component(key, component)
        }
4, element-plus 官方在网络差的情况下, 会被路由定向到404页, 一般刷新几下即可恢复