接著上一篇 【Electron 5.x + Vue Cli 3.x + Vue 2.x + Vue CLI Plugin Electron Builder 構(gòu)建桌面應(yīng)用程序】
現(xiàn)在演示如何按需引入Element墨技。
安裝 vue-cli-plugin-element
更多詳細(xì)請看Element官網(wǎng)：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
安裝成功后创泄，會(huì)自動(dòng)地在相關(guān)的文件寫入配置與示例银舱，無需進(jìn)行手動(dòng)配置铃在，進(jìn)入項(xiàng)目目錄可以看到新增了一個(gè)文件夾 plugins截汪，按需引入組件會(huì)在element.js里寫入 笛辟。
1.png
啟動(dòng)開發(fā)服務(wù)器
yarn electron:serve
1.png
如果需要引入更多組件咧擂，具體可以參考 Element文檔佑稠，然后在 element.js 文件寫入即可。
注意
如果你在 vue create 項(xiàng)目時(shí)不想使用CSS預(yù)處理器這項(xiàng)猾编，會(huì)出現(xiàn)樣式無法引用問題瘤睹。
1.png
這個(gè)問題可以引入一個(gè)插件解決：
yarn add babel-preset-env --dev
然后修改 babel.config.js 配置文件
"presets": [
"@vue/app",
['@babel/preset-env'] //添加 babel-preset-env 配置
],
1.png
引入與不引入CSS預(yù)處理器的配置文件差異對比
img.png
image.png
