【electron+vue3+ts实战便笺exe】一、搭建框架配置 (4)

这个对应项目中的config文件夹

config ├── browser.options.ts # 窗口的配置 ├── classNames.options.ts # 样式名的配置,背景样式都通过这个文件渲染 ├── editorIcons.options.ts # 编辑页面的一些editor图标 ├── index.ts # 导出 └── shortcuts.keys.ts # 禁用的一些快捷键,electron是基于chromium浏览器,所以也存在一些浏览器快捷键比如F5 browser.options

这个文件的主要作用就是配置主窗口和编辑窗口区分开发正式的配置,宽高等等,以及要显示的主页面

/** * 软件数据和配置 * C:\Users\{用户名}\AppData\Roaming * 共享 * C:\ProgramData\Intel\ShaderCache\i-notes{xx} * 快捷方式 * C:\Users\{用户名}\AppData\Roaming\Microsoft\Windows\Recent * 电脑自动创建缓存 * C:\Windows\Prefetch\I-NOTES.EXE{xx} */ /** */ const globalEnv = process.env.NODE_ENV; const devWid = globalEnv === 'development' ? 950 : 0; const devHei = globalEnv === 'development' ? 600 : 0; // 底部icon: 40*40 const editorWindowOptions = { width: devWid || 290, height: devHei || 350, minWidth: 250 }; /** * BrowserWindow的配置项 * @param type 单独给编辑窗口的配置 */ const browserWindowOption = (type?: 'editor'): Electron.BrowserWindowConstructorOptions => { const commonOptions = { minHeight: 48, frame: false, hasShadow: true, transparent: true, webPreferences: { enableRemoteModule: true, nodeIntegration: true } }; if (!type) { return { width: devWid || 350, height: devHei || 600, minWidth: 320, ...commonOptions }; } return { ...editorWindowOptions, ...commonOptions }; }; /** * 开发环境: :8080 * 正式环境: file://${__dirname}/index.html */ const winURL = globalEnv === 'development' ? 'http://localhost:8080' : `file://${__dirname}/index.html`; export { browserWindowOption, winURL }; classNames.options

如果想要更多的颜色直接添加即可

/** * - `yellow-content` 黄色 * - `green-content` 绿色 * - `pink-content` 粉色 * - `purple-content` 紫色 * - `blue-content` 蓝色 * - `gray-content` 灰色 * - `black-content` 黑色 */ const classNames = [ // { // color: 'white-content', // title: '白色' // }, { className: 'yellow-content', title: '黄色' }, { className: 'green-content', title: '绿色' }, { className: 'pink-content', title: '粉色' }, { className: 'purple-content', title: '紫色' }, { className: 'blue-content', title: '蓝色' }, { className: 'gray-content', title: '灰色' }, { className: 'black-content', title: '黑色' } ]; export default classNames; editorIcons.options /** * - `bold` 加粗 * - `italic` 斜体 * - `underline` 下划线 * - `strikethrough` 删除线 * - `insertUnorderedList` 无序列表 * - `insertOrderedList` 有序列表 * - `image` 图片 */ const editorIcons = [ { name: 'bold', title: '加粗', icon: 'icon-editor-bold' }, { name: 'italic', title: '斜体', icon: 'icon-italic' }, { name: 'underline', title: '下划线', icon: 'icon-underline' }, { name: 'strikethrough', title: '删除线', icon: 'icon-strikethrough' }, { name: 'insertUnorderedList', title: '无序列表', icon: 'icon-ul' }, { name: 'insertOrderedList', title: '有序列表', icon: 'icon-ol' // }, // { // name: 'image', // title: '图片', // icon: 'icon-image' } ]; export default editorIcons; shortcuts.keys /** * - F11 禁用全屏放大 * - CTRL+R 禁用刷新 * - CTRL+SHIFT+R 禁用刷新 */ const devShortcuts = ['F11', 'Ctrl+R', 'Ctrl+SHIFT+R']; // 这里主要是在开发中需要用到,但是正式环境需要屏蔽的快捷键 const shortcuts = ['Ctrl+N', 'SHIFT+F10', 'Ctrl+SHIFT+I']; // 这里是直接屏蔽掉的快捷键 const exportKeys = process.env.NODE_ENV === 'development' ? shortcuts : [...devShortcuts, ...shortcuts]; export default exportKeys; index

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsfjxf.html