Vue3学习日记 Day5 —— Element Plus

Element Plus

1、介绍

    Element Plus是一个适用于vue3的组件库

    

2、导入流程

    1.1、安装

        pnpm add element-plus

        

    1.2、导入方式

        //想要进行组件的引入，需要先下载插件

        pnpm add -D unplugin-vue-components unplugin-auto-import

    

    1.3、配置

       //将以下代码插入到vite.config.js中

        import AutoImport from 'unplugin-auto-import/vite'

        import Components from 'unplugin-vue-components/vite'

        import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

        // https://vitejs.dev/config/

        export default defineConfig({

          plugins: [

            ...

            AutoImport({

              resolvers: [ElementPlusResolver()]

            }),

            Components({

              resolvers: [ElementPlusResolver()]

            })

          ]

        })  

        

3、使用

    //当导入完成后，便会自动按需导入组件，不再需要做任何事情，可以直接使用

    如：

        <el-button></el-button>   

        

4、彩蛋       

    //默认components下的文件也会被自动注册（即不再需要导入，可以直接使用）