安装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()]

    }),

  ],//插件

})

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

Logo

前往低代码交流专区

更多推荐