快捷導(dǎo)航

Electron+vite+vuetify項(xiàng)目搭建的流程和方法

更新時(shí)間：2024年06月20日 11:25:10 作者：FireFrame

最近想用Electron來(lái)進(jìn)行跨平臺(tái)的桌面應(yīng)用開發(fā),同時(shí)想用vuetify作為組件,于是想搭建一個(gè)這樣的開發(fā)環(huán)境,這里分享下Electron+vite+vuetify項(xiàng)目搭建的流程和方法,感興趣的朋友一起看看吧

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

如果你用官網(wǎng)的

Build cross-platform desktop apps with JavaScript, HTML, and CSS | Electron

Build cross-platform desktop apps with JavaScript, HTML, and CSS

https://www.electronjs.org/

上面的方法，搭建出來(lái)啥也沒(méi)有，會(huì)比較麻煩。

這個(gè)項(xiàng)目很好的解決了Electron+vite的快速搭建。詳見網(wǎng)站

electron-vite | Next Generation Electron Build Tooling

Next 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)備開始添加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也類似。

/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的組件了。

到此這篇關(guān)于Electron+vite+vuetify項(xiàng)目搭建的流程和方法的文章就介紹到這了,更多相關(guān)Electron vite vuetify項(xiàng)目搭建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: