做网站什么的好,做网站哪个服务商便宜,网站源代码怎么生成网页,上海公司核名查询最近想用Electron来进行跨平台的桌面应用开发。同时想用vuetify作为组件#xff0c;于是想搭建一个这样的开发环境。其中踩了不少坑#xff0c;总是会出现各种的编译错误和问题#xff0c;依赖的各种问题#xff0c;搞了好久最终环境终于弄好可正常开发了。这里分享下快速搭…最近想用Electron来进行跨平台的桌面应用开发。同时想用vuetify作为组件于是想搭建一个这样的开发环境。其中踩了不少坑总是会出现各种的编译错误和问题依赖的各种问题搞了好久最终环境终于弄好可正常开发了。这里分享下快速搭建的流程和方法。
如果你用官网的Build cross-platform desktop apps with JavaScript, HTML, and CSS | ElectronBuild cross-platform desktop apps with JavaScript, HTML, and CSShttps://www.electronjs.org/上面的方法搭建出来啥也没有会比较麻烦。
这个项目很好的解决了Electronvite的快速搭建。详见网站electron-vite | Next Generation Electron Build ToolingNext generation Electron build tooling based on Vite.https://electron-vite.org/
命令很简单如果是使用yarn的话输入命令
yarn create quick-start/electron
如果是npm则输入命令
npm create quick-start/electronlatest
然后就是根据提示一步一步的就创建了对应的项目了非常的方便。
创建好了之后就准备开始添加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/stylesconst vuetify createVuetify({ssr: true,
})最后找到main.js文件添加vuetify相关的内容最终修改如下
import ./assets/main.cssimport { createApp } from vue// Vuetify
import vuetify/styles
import { createVuetify } from vuetify
import * as components from vuetify/components
import * as directives from vuetify/directivesimport App from ./App.vueconst vuetify createVuetify({components,directives,
})createApp(App).use(vuetify).mount(#app)OK接下来就可以正常的使用vuetify的组件了。
