Electron 基于 Vue Cli 4.5.x 按需引入 E

接着上一篇 【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】

成功引入后，如图：

element.js.png main.ts.png

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

报错.png

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

修改后.png

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

<template>
  <img src="./assets/logo.png">
  <div>
    <el-button type="primary">el-button</el-button>
    <el-input
      type="text"
      placeholder="请输入内容"
      v-model="text"
      maxlength="10"
      show-word-limit
    >
    </el-input>
  </div>
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

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

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

<style>
#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;
}
</style>

启动开发服务器

yarn electron:serve

运行程序界面展示

运行程序.png