最近想用Electron來(lái)進(jìn)行跨平臺(tái)的桌面應(yīng)用開(kāi)發(fā)。同時(shí)想用vuetify作為組件，于是想搭建一個(gè)這樣的開(kāi)發(fā)環(huán)境。其中踩了不少坑，總是會(huì)出現(xiàn)各種的編譯錯(cuò)誤和問(wèn)題，依賴的各種問(wèn)題，搞了好久最終環(huán)境終于弄好可正常開(kāi)發(fā)了。這里分享下快速搭建的流程和方法。

如果你用官網(wǎng)的Build cross-platform desktop apps with JavaScript, HTML, and CSS | ElectronBuild cross-platform desktop apps with JavaScript, HTML, and CSShttps://www.electronjs.org/上面的方法，搭建出來(lái)啥也沒(méi)有，會(huì)比較麻煩。

這個(gè)項(xiàng)目很好的解決了Electron+vite的快速搭建。詳見(jiàn)網(wǎng)站electron-vite | Next Generation Electron Build ToolingNext generation Electron build tooling based on Vite.https://electron-vite.org/

命令很簡(jiǎn)單，如果是使用yarn的話，輸入命令

yarn create @quick-start/electron

如果是npm則輸入命令

npm create @quick-start/electron@latest

然后，就是根據(jù)提示，一步一步的就創(chuàng)建了對(duì)應(yīng)的項(xiàng)目了，非常的方便。

創(chuàng)建好了之后，就準(zhǔn)備開(kāi)始添加vuetify了。

然后用yarn安裝

yarn add -D vuetify vite-plugin-vuetify
yarn add @mdi/font

或者是用npm來(lái)安裝

npm i -D vuetify vite-plugin-vuetify
npm i @mdi/font

安裝好了之后，需要做以下的修改，首先根目錄下的electron.vite.config.mjs文件，import一下vuetify，然后在plugins中間需要添加vuetify插件，整個(gè)文件修改完成后如下：

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
export default defineConfig({main: {plugins: [externalizeDepsPlugin()]},preload: {plugins: [externalizeDepsPlugin()]},renderer: {resolve: {alias: {'@renderer': resolve('src/renderer/src')}},plugins: [vue(),vuetify({ autoImport: true })]}
})

然后，在src文件夾中創(chuàng)建plugins文件夾，并添加vuetify.js文件，如果用的是ts也類(lèi)似。

/src/plugins/vuetify.js文件內(nèi)容如下：

import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'const vuetify = createVuetify({ssr: true,
})

最后，找到main.js文件，添加vuetify相關(guān)的內(nèi)容，最終修改如下：

import './assets/main.css'import { createApp } from 'vue'// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'import App from './App.vue'const vuetify = createVuetify({components,directives,
})createApp(App).use(vuetify).mount('#app')

OK，接下來(lái)就可以正常的使用vuetify的組件了。