Electron+vite+vuetify项目搭建

最近想用Electron来进行跨平台的桌面应用开发。同时想用vuetify作为组件,于是想搭建一个这样的开发环境。其中踩了不少坑,总是会出现各种的编译错误和问题,依赖的各种问题,搞了好久最终环境终于弄好可正常开发了。这里分享下快速搭建的流程和方法。

如果你用官网的Build cross-platform desktop apps with JavaScript, HTML, and CSS | ElectronBuild cross-platform desktop apps with JavaScript, HTML, and CSSicon-default.png?t=N7T8https://www.electronjs.org/上面的方法,搭建出来啥也没有,会比较麻烦。

这个项目很好的解决了Electron+vite的快速搭建。详见网站electron-vite | Next Generation Electron Build ToolingNext generation Electron build tooling based on Vite.icon-default.png?t=N7T8https://electron-vite.org/

命令很简单,如果是使用yarn的话,输入命令

yarn create @quick-start/electron

如果是npm则输入命令

npm create @quick-start/electron@latest

然后,就是根据提示,一步一步的就创建了对应的项目了,非常的方便。

创建好了之后,就准备开始添加vuetify了。

然后用yarn安装

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

或者是用npm来安装

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

安装好了之后,需要做以下的修改,首先根目录下的electron.vite.config.mjs文件,import一下vuetify,然后在plugins中间需要添加vuetify插件,整个文件修改完成后如下:

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文件夹中创建plugins文件夹,并添加vuetify.js文件,如果用的是ts也类似。

/src/plugins/vuetify.js文件内容如下:

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

最后,找到main.js文件,添加vuetify相关的内容,最终修改如下:

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,接下来就可以正常的使用vuetify的组件了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/354185.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

关于接口多态,何时使用接口名创建对象?何时使用子类创建对象?

接口创建对象只能创建他的实现类,所以会出现两种创建方式: 1、接口 对象名 new 类名 2、子类对象 对象名 new 类名 举个例子,swimming是一个接口,flog是他的一个实现类,重写了swimming的eat()方法 子类对象 对象名…

【QT】信号与槽

目录 概述 Q_OBJECT 自定义信号 自定义槽 带参数的信号和槽 信号与槽断开 定义槽函数时,使用lambda表达式 概述 所谓的信号槽,要解决的问题,就是响应用户的操作,这是QT与其他GUI开发框架比较不同的地方。其他的GUI开发框…

Z世代职场价值观的重塑:从“班味”心态到个人成长的追求

近日,社交平台Soul APP联合上海市精神卫生中心(俗称“宛平南路600号”)发布《2024年Z世代职场心理健康报告》(下称“报告”),发现今天的年轻人正以其独特的价值观和行为模式,重新定义成功与成就…

收银系统源码-千呼新零售2.0【线下促销】

千呼新零售2.0系统是零售行业连锁店一体化收银系统,包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体,线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货等连锁店使用。 详细介绍请查看下…

百元内平价蓝牙耳机推荐,四款高热度平价耳机推荐!

在追求高品质音乐体验的同时,我们也不得不考虑预算的限制,不过市面上有不少百元内平价蓝牙耳机,它们在保证音质和舒适度的同时,也兼顾了价格的亲民性,身蓝牙耳机测评的达人,经手过不少的百元蓝牙耳机&#…

用android如何实现计算机计算功能

一.新建一个项目 步骤&#xff1a; 1.新建项目 2.选择 二.用户界面构建 找到项目的res的下面layout里面的activity.xml文件进行约束布局界面构建。 activity.xml代码如下&#xff1a; <?xml version"1.0" encoding"utf-8"?> <androidx.c…

http缓存及http2配置

http缓存及http2配置极大提高了网页加载得速度 1.1 nginx安装 首先是需要安装nginx 去官网下载windows版本的安装包 nginx 命令 nginx start //启动 nginx -s stop nginx -s reload // 重新运行 tasklist /fi "imagename eq nginx.exe" //进程 把打包好的文件copy…

关于Panabit在资产平台中类型划分问题

现场同事问了一个问题&#xff1a;Panabit能不能当做CentOS接入&#xff1f; 我第一反应是&#xff1a;Panabit是个什么鬼&#xff1f;为啥要混编接入&#xff1f;后期维护都是事啊。所以&#xff0c;我就想回答&#xff1a;不能&#xff01; 但是&#xff0c;最好要给出一个…

stable diffusion 局部重绘 reference-only api 接口调试

webUI api payload 插件生成的接口参数不准确&#xff0c;reference-only 的image不是对象&#xff0c;就是不同字符串字段&#xff0c;直接传&#xff0c;不是套image。 综上&#xff0c;那个插件参数不确定&#xff0c;应直接看插件的源码&#xff0c;看它接受什么参数 错误…

若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局

若依RuoYi-Vue分离版—富文本Quill的图片支持伸缩大小及布局、工具栏带中文提示 1.在vue.config.js 文件中添加 一下内容2.下载安装插件3.在Editor组件中引入插件4.使用Editor组件&#xff08;特别注意要的加 v-if &#xff09;5.bug 之 imageResize的 img的style丢失1.先创建一…

第九届信也科技杯全球AI算法大赛——语音深度鉴伪识别参赛A榜 0.968961分

遗憾没有进复赛&#xff0c;只是第41名。先贴个A榜的成绩。A榜的前三十名晋级&#xff0c;个个都是99分的大佬&#xff0c;但是B榜的成绩就有点低了&#xff0c;应该是数据不同源的问题&#xff0c;第一名0.78分。官网链接&#xff1a;语音深度鉴伪识别 官方baselin:https://g…

企业设备管理现状与解决方案

在当今企业运营中&#xff0c;设备管理作为保障生产稳定、提升效率的重要环节&#xff0c;其复杂性和挑战性日益凸显。无论是生产车间、石油化工、物业小区&#xff0c;还是消防器材、建筑施工等领域&#xff0c;都面临着设备故障频发、维修流程繁琐等共性问题。 为了帮助企业…

一个简单、快速用于训练和微调中等规模GPT模型的开源项目

大家好&#xff0c;今天给大家分享的是一个简单、快速用于训练和微调中等规模GPT模型的开源项目&#xff0c;该项目旨在拓宽深度学习领域的应用&#xff0c;特别是为深度学习的入门者提供便利。 Nano GPT是一个基于PyTorch的开源项目&#xff0c;由前特斯拉AI负责人Andrej Ka…

干货丨好用的上网行为管理软件有哪些?全网行为管理系统详解

在当今数字化办公环境中&#xff0c;员工的上网行为直接关系到企业信息安全、工作效率以及合规性。 为了有效管理网络资源&#xff0c;确保工作环境的高效与安全&#xff0c;一套强大的上网行为管理软件变得尤为重要。 本文将为您详细介绍几款市场上口碑良好的上网行为管理软件…

【mysql】排错和调优

通用的一些排错方法。 1、查看进程信息 mysql> show full processlist;mysql> show processlist; 2、information_schema information_schema这张数据表保存了MySQL服务器所有数据库的信息。如数据库名&#xff0c;数据库的表&#xff0c;表栏的数据类型与访问权限等。…

企业数据资产入表操作指引

在数字经济时代&#xff0c;数据已成为企业的关键生产要素&#xff0c;其管理和应用至关重要。数据资产入表操作涉及复杂的评估和管理过程&#xff0c;企业需要遵循合规性、真实性和透明性的原则。本指南旨在为企业提供系统化的操作指导&#xff0c;帮助实现数据资产的高效管理…

数据分析必备:一步步教你如何用matplotlib做数据可视化(6)

1、Matplotlib 网格 axes对象的grid()函数将图中网格的可见性设置为on或off。还可以显示网格的主要/次要(或两者)刻度。另外&#xff0c;可以在grid()函数中设置color&#xff0c;linestyle和linewidth属性。 参考以下示例代码 import matplotlib.pyplot as plt import numpy…

【DAMA】掌握数据管理核心:CDGA考试指南

引言&#xff1a;        在当今快速发展的数字化世界中&#xff0c;数据已成为组织最宝贵的资产之一。有效的数据管理不仅能够驱动业务决策&#xff0c;还能提升竞争力和市场适应性。DAMA国际一直致力于数据管理和数字化的研究、实践及相关知识体系的建设。秉承公益、志愿…

【吊打面试官系列-Mysql面试题】SQL 语言包括哪几部分?每部分都有哪些操作关键字?

大家好&#xff0c;我是锋哥。今天分享关于 【SQL 语言包括哪几部分&#xff1f;每部分都有哪些操作关键字&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; SQL 语言包括哪几部分&#xff1f;每部分都有哪些操作关键字&#xff1f; SQL 语言包括数据定义(DDL)、…

终极版本的Typora上传到博客园和csdn

激活插件 下载网址是这个&#xff1a; https://codeload.github.com/obgnail/typora_plugin/zip/refs/tags/1.9.4 解压之后这样的&#xff1a; 解压之后将plugin&#xff0c;复制到自己的安装目录下的resources 点击安装即可&#xff1a; 更改配置文件 "dependencies&q…