美文网首页Electron前端前端开发那些事儿
Electron 基于 Vue Cli 4.5.x 按需引入 E

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

作者: Mr丶HUANG | 来源:发表于2021-04-02 10:57 被阅读0次

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

    相关文章

      网友评论

        本文标题:Electron 基于 Vue Cli 4.5.x 按需引入 E

        本文链接:https://www.haomeiwen.com/subject/sgyfkltx.html