526互联

在electron项目如何引入element-plus开发

发布时间 2023-06-05 11:55:10作者: NUNA11
  • 安装element-plus
npm install element-plus --save
  • 按需引入插件
npm install -D unplugin-vue-components unplugin-auto-import
  • 配置文件修改

由于我这个是vue-cli搭建的项目，所以是在vue.config.js中，如果是vite搭建的话就写在vite.config.ts中写：

 1 const AutoImport = require('unplugin-auto-import/webpack')
 2 const Components = require('unplugin-vue-components/webpack')
 3 const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
 4 
 5 module.exports = {
 6   // ranspileDependencies: true,
 7   configureWebpack: {
 8     plugins: [
 9       AutoImport({
10         resolvers: [ElementPlusResolver()],
11       }),
12       Components({
13         resolvers: [ElementPlusResolver()],
14       }),
15     ]
16   },
17 }
  • 在用到的.vue文件直接加上element-plus组件的代码，就能在electron里面加入element-plus啦！
 <el-progress type="circle" :stroke-width='12' :percentage="0.3" class="progress" color="#30BF78" />

效果如图