接著上一篇 【Electron + Vue 3.x + Vue Cli 4.x + TypeScript 構(gòu)建桌面應(yīng)用程序】 記錄下按需引入Element-plus遇到的一些坑馒疹。
安裝 vue-cli-plugin-element-plus
vue add element-plus
基礎(chǔ)選擇操作可參考 【Electron 基于 Vue Cli 3 按需引入 Element】
成功引入后纹蝴，如圖：
element.js.png
main.ts.png
在main.ts發(fā)現(xiàn)引入會有紅色的波浪線，運行時會出現(xiàn)報錯陨倡，如下圖：
報錯.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="請輸入內(nèi)容"
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('測試內(nèi)容')
}
}
})
</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>
啟動開發(fā)服務(wù)器
yarn electron:serve
運行程序界面展示
運行程序.png
