在之前零散的学习中,偶尔的接触到了Electron+vue+elementui创建桌面应用的文章,感觉有搞头,今天就拿来练练手了,首先,我的开发环境是Windows11 22H2系统,nodejs版本v20.9.0,昨天安装了yarn,版本是1.22.19。

第一步,到项目目录,参照官方命令:

yarn create @quick-start/electron

注意:选择vue,其他TypeScript或者updater plugin等,按照个人喜好选择吧。

第二步,进入项目目录,执行

cd (项目目录)    
yarn
yarn dev

到这里,一个基本的Electron就算是创建成功了,如果没问题的话,到这里,就能看到一个程序窗口了。

第三步,引入Element Plus

参照官方命令:

yarn add element-plus

执行完毕后,有个需要注意的地方,就是..\src\renderer\src\main.js的修改。

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

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

第3、4行是新增的,如果不写后面的,会有个报错。

第四步,检验是否引入Element成功
到..\src\renderer\src\App.vue文件中任意位置增加如下代码:

<el-button type="primary">测试按钮</el-button>

顺利的话,到这里就能看到Element的按钮了~~