四时宝库

上一篇：Electron桌面应用开发日记：一、起步，整合Vue3

0.直接上手，引入组件

目前适配Vue3的组件库如下图：

具体选择哪个组件库视情况而定，直接参照组件官方文档使用即可。我这里选择的组件库是ant-design-vue。

• 安装ant-design-vue2.0

>yarn add "ant-design-vue@next"

• 修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
//引入ant-design-vue
import Antd from 'ant-design-vue'
//引入css文件
import 'ant-design-vue/dist/antd.css'
//通过use方法应用Antd实例
createApp(App).use(Antd).mount('#app')

• 在App.vue文件中使用组件

注意：从 2.0 开始，ant-design-vue 不再内置 Icon 组件，请使用独立的包@ant-design/icons-vue。

运行看看效果：

1.更换应用程序窗口图标

Electron应用程序窗口的图标可以通过 icon 属性来配置，在 Windows 上推荐使用 ICO 图标来获得最佳的视觉效果, 默认使用可执行文件的图标.

最终效果：

！！！the end！！！

上一篇：Electron桌面应用开发日记：一、起步，整合Vue3