Electron 基于 Vue Cli 3 按需引入 Element

接著上一篇 【Electron 5.x + Vue Cli 3.x + Vue 2.x + Vue CLI Plugin Electron Builder 構建桌面應用程序】
現在演示如何按需引入Element。

安裝 vue-cli-plugin-element

更多詳細請看Element官網:https://element.eleme.cn/#/zh-CN/component/quickstart

vue-cli-plugin-element GitHub地址:https://github.com/ElementUI/vue-cli-plugin-element

vue add element

如圖所示:

1.png

安裝成功后,會自動地在相關的文件寫入配置與示例,無需進行手動配置,進入項目目錄可以看到新增了一個文件夾 plugins,按需引入組件會在element.js里寫入 。

1.png

啟動開發服務器

yarn electron:serve
1.png

如果需要引入更多組件,具體可以參考 Element文檔,然后在 element.js 文件寫入即可。

注意

如果你在 vue create 項目時不想使用CSS預處理器這項,會出現樣式無法引用問題。

1.png

這個問題可以引入一個插件解決:

yarn add babel-preset-env --dev

然后修改 babel.config.js 配置文件

"presets": [
    "@vue/app",
    ['@babel/preset-env'] //添加 babel-preset-env 配置
  ],
1.png

引入與不引入CSS預處理器的配置文件差異對比

img.png
image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容