接着上一篇 【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
网友评论