Electron 基于 Vue Cli 4.5.x 按需引入 Element-plus

接着上一篇 【Electron + Vue 3.x + Vue Cli 4.x + TypeScript 构建桌面应用程序】 记录下按需引入Element-plus遇到的一些坑。

安装 vue-cli-plugin-element-plus

vue add element-plus

基础选择操作可参考 【Electron 基于 Vue Cli 3 按需引入 Element】

成功引入后，如图：

在main.ts发现引入会有红色的波浪线，运行时会出现报错，如下图：

解决方法：更改element.js文件后缀改为element.ts，在app加any类型判断。如下图：

增加ElInput 组件引入，在App.vue组件引入：

    el-button

  
import { defineComponent, ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent ({
  name: 'App',
  components: {
    HelloWorld
  },
  setup() {
    return {
      text: ref('测试内容')
    }
  }
})

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

启动开发服务器

yarn electron:serve

运行程序界面展示