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.mzph.cn/pingmian/28135.shtml

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

相关文章

前端面试题日常练-day71 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备,答案在文末 好的,以下是另外五个与Sass相关的选择题: Sass中,以下哪个符号用于声明一个变量? a) $ b) c) # d) & 在Sass中,以下哪个符号用于引入…

践行国产化替代,优刻得私有云勇当先锋

编辑:阿冒 设计:沐由 阳泉,十万火急! 位于太行山西麓的山西省阳泉市,是一座历史悠久、底蕴深厚、资源丰富的名城,拥有超百万常住人口,国内生产总值在2022年成功跨越千亿元大关。然而&#xff0c…

「C系列」C 共用体

文章目录 一、C 共用体1. 定义共用体2. 初始化共用体变量3. 访问共用体成员4. 共用体的用途 二、C 共用体常见问题1. 内存覆盖问题2. 类型混淆3. 初始化问题4. 跨平台兼容性问题5. 逻辑错误 三、相关链接 一、C 共用体 在C语言中,共用体(union&#xff…

RocketMQ源码学习笔记:源码启动NameServer,Broker

这是本人学习的总结,主要学习资料如下 马士兵教育rocketMq官方文档 目录 1、Overview2、NameServer2.1、源码启动NameServer 3、Broker启动过程 1、Overview 这篇文章的源码的版本是release-4.9.8。在启动各个模块之前应该先对项目进行打包mvn install -Dmaven.te…

OS复习笔记ch9-1

单处理器调度 调度类型 主要类型 长程调度:决定将哪个进程放入进程池中 中程调度:决定将哪些进程部分或者全部放入内存中 短程调度:决定哪个空闲进程上处理机 I/O调度:决定哪个进程的I/O请求被可用的I/O设备处理 处理器调度和进…

HTML中的<img>标签使用指南

在HTML中&#xff0c;<img>标签用于嵌入图片。它是一个自闭合标签&#xff0c;意味着它没有结束标签。<img>标签的属性可以控制图片的显示方式和来源。以下是<img>标签的使用和属性的详细介绍。 <img>标签的基本用法 基本的<img>标签只需要src…

jupyter notebook中使用不同的anaconda环境及常用conda命令

conda命令 在jupyter notebook中使用不同的anaconda环境其他常用conda命令 在jupyter notebook中使用不同的anaconda环境 创建环境 myenvname 需替换为自己的环境名称 conda create --name myenvname python3.7激活环境 conda activate myenvname 在该环境中安装Jupyter N…

java8 树类型转换

/*** 创建树** param list 列表* param parentRoot 父根* return {link List}<{link TreeLabelDto}>*/ public static List<TreeLabelDto> createTree(List<TreeLabelDto> list, String parentRoot) {Map<String, List<TreeLabelDto>> roo…

springboot原理篇-springboot

springboot原理篇-springboot&#xff08;三&#xff09; 一、起步依赖 虽然我是直接学习springboot的&#xff0c;没有经历过使用spring开发&#xff0c;但是鉴于我还学习了c,对依赖这方面真的一言难尽&#xff01;springboot起步依赖解决依赖问题我实在是羡慕&#xff01; 直…

第 18章 安全架构设计理论与实践

安全架构是架构面向安全性方向上的一种细分&#xff0c;可关注三个安全方面&#xff0c;即产品安全架构、安全技术体系架构和审计架构&#xff0c;这三个方面可组成三道安全防线。本章主要分析安全威胁、介绍安全模型&#xff0c;在此基础上&#xff0c;就系统、信息、网络和数…

mac m芯片安装win11遇坑

mac m芯片安装win11遇坑 1、下载arm架构镜像 磁力链接&#xff1a; magnet:?xturn:btih:e8c15208116083660709eac9aee124e025c01447&dnSW_DVD9_Win_Pro_11_22H2_64ARM_ChnSimp_Pro_Ent_EDU_N_MLF_X23-12755.ISO&xl57198960642、使用VMWare Fusion安装&#xff0c;启…

element Steps 步骤条无法设置单击事件

原因&#xff1a;vue封装click方法阻止了element组件的原DOM事件 解决方案 为 click方法 添加修饰符 native&#xff0c;click.native <el-steps :active"1"><el-step title"步骤 1" description"这是一段很长很长很长的描述性文字" cl…

从0开始理解DevOps

目录 一、DevOps背景 二、DevOps介绍 DevOps 组成 三、Jenkins Jenkins 工作流程 四、云原生与DevOps 相信你一定听过 DevOps 这个词&#xff0c;那它到底是什么呢&#xff1f;为什么越来越多的互联网企业都在追随使用它&#xff1f;它与云原生有什么关系&#xff1f;本文将…

VRChat 2024年裁员原因与背景深度分析

VRChat&#xff0c;作为2022年元宇宙/VR社交领域的巨头&#xff0c;近期在2024年宣布裁员计划&#xff0c;其背后原因和背景值得业界尤其是仍在纯元宇宙虚拟空间创业的同仁们重点关注。 一、创始人决策失误 根据CEO的邮件披露&#xff0c;VRChat的创始人因缺乏经验和过度自信…

Java 桥接模式(Bridge Pattern)是设计模式中的一种结构型设计模式,桥接模式的核心思想是将抽象与实现解耦

桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;它将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。桥接模式的核心思想是将抽象与实现解耦&#xff0c;使得它们可以独立扩展。 在桥接模式中&#xff0c;通常包含以下四个…

八股两场合集

Java 语言有哪些特点?(基本概念) JVM vs JDK vs JRE Java为什么半编译半解释语言 continuexxx的区别 finalxxxx的区别(finalize不熟悉) 成变和成变的区别 重载和重写有什么区别 字符型常量与字符串常量区别(卡顿,2字节) 深拷贝与浅拷贝的区别,引用拷贝了解吗(不了解引…

MySQL之优化服务器设置(四)

优化服务器设置 InnoDB的IO配置 双写缓冲(Doublewrite Buffer) InnoDB用双写缓冲来避免页没写完整所导致的数据损坏。当一个磁盘写操作不能完整地完成时&#xff0c;不完整的页写入就可能发生&#xff0c;16KB的页可能只有一部分被写到磁盘上。有多种多样的原因(崩溃、Bug&am…

【纯干货级教程】深度学习根据loss曲线进行分析调参

相信很多刚刚接触目标检测系列算法小伙伴跑深度学习算法时会有许多困惑&#xff0c;比如训练得出的loss曲线有什么意义&#xff1f;训练的一些参数要如何设置选择&#xff1f;选择哪个算法模型作为baseline、选择哪个参数量/复杂度/深度的模型进行训练最为合适&#xff1f; 本…

生成和链接动态库

生成和链接动态库 在Linux和windows中的动态库是不一样的 linux 的动态库不需要设置导入导出符号&#xff0c;以.os为后缀windows中需要设置导入和导出符号.lib&#xff0c;以及动态库的后缀是dll 1、windows环境 1、创建动态库 项目结构 CMakeLists.txt cmake_minimum_re…

如何使用 pip 卸载所有已安装的 Python 包?

在开发过程中,我们可能会安装许多 Python 包,有时需要彻底清理环境,以便从头开始或者解决冲突问题。下面将介绍如何使用 pip 命令卸载所有已安装的 Python 包。 一、列出所有已安装的包 首先,需要列出当前环境中所有已安装的包。使用以下命令: pip freeze这将输出所有已…