【element-plus】vue3安装element-plus

安装element-plus :（参考官网https://element-plus.gitee.io/zh-CN/guide/quickstart.html）

pnpm install element-plus 

安装完成后在项目中找到main.js文件中，导入element-plus,代码如下：

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css'

createApp(App).use(ElementPlus).mount('#app')
 

// 也可以使用下面方式

// const app = createApp(App) 

// app.use(ElementPlus)

// app.mount('#app')

注意：使用打包体积小的方式导入 。

好处是：打包后使用多少组件就会打包多少组件，没有用到的不会打包进去。

按需导入 （参考官网https://element-plus.gitee.io/zh-CN/guide/quickstart.html）

 安装：pnpm install -D unplugin-vue-components unplugin-auto-import

 安装完成后，在项目中找到vite.config.js文件，进行配置，代码如下： 
 

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

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

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

export default defineConfig({
 //此处server可以根据自己需求设置

  server: {

    open: true,  //项目启动后自动访问项目

    port:8088//这里是可以自己设置端口

  },

  plugins: [

    vue(),

    //当前项目不需要全局引入，用到什么组件自动解析

    Components({

      resolvers:[ElementPlusResolver()]

    }),

    AutoImport({

      resolvers: [ElementPlusResolver()]

    }),

  ],//插件

})

 配置完成后，测试是否设置成功，到官网复制一段代码到编辑器，打开后效果正常，即可。