lixuechuan
/
electron-vite-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Spaces instead Tabs

This commit is contained in:
草鞋没号 2022-02-03 08:36:51 +08:00
parent e1e2ee47bf
commit b27927a0cd
7 changed files with 173 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
.electron-builder.config.js
View File

@ -3,36 +3,36 @@
* @see https://www.electron.build/configuration/configuration
*/
module.exports = {
appId: "YourAppID@qq.com",
productName: "YourAppName",
copyright: "Copyright © 2022 ${author}",
asar: true,
directories: {
output: "release/${version}",
buildResources: "build",
},
files: ["dist"],
win: {
target: [
{
target: "nsis",
arch: ["x64"],
},
],
artifactName: "${productName}-${version}-Setup.${ext}",
},
nsis: {
oneClick: false,
perMachine: false,
allowToChangeInstallationDirectory: true,
deleteAppDataOnUninstall: false,
},
mac: {
target: ["dmg"],
artifactName: "${productName}-${version}-Installer.${ext}",
},
linux: {
target: ["AppImage"],
artifactName: "${productName}-${version}-Installer.${ext}",
},
appId: "YourAppID@qq.com",
productName: "YourAppName",
copyright: "Copyright © 2022 ${author}",
asar: true,
directories: {
output: "release/${version}",
buildResources: "build",
},
files: ["dist"],
win: {
target: [
{
target: "nsis",
arch: ["x64"],
},
],
artifactName: "${productName}-${version}-Setup.${ext}",
},
nsis: {
oneClick: false,
perMachine: false,
allowToChangeInstallationDirectory: true,
deleteAppDataOnUninstall: false,
},
mac: {
target: ["dmg"],
artifactName: "${productName}-${version}-Installer.${ext}",
},
linux: {
target: ["AppImage"],
artifactName: "${productName}-${version}-Installer.${ext}",
},
}

28
README.md
View File

@ -91,8 +91,8 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate
```typescript
// Defined in the window
interface Window {
fs: typeof import("fs")
ipcRenderer: import("electron").IpcRenderer
fs: typeof import("fs")
ipcRenderer: import("electron").IpcRenderer
}
```
@ -115,18 +115,18 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate
```js
export default {
build: {
// built lib for Main-process, Preload-script
lib: {
entry: "index.ts",
formats: ["cjs"],
fileName: () => "[name].js",
},
rollupOptions: {
// configuration here
external: ["serialport", "sqlite3"],
},
},
build: {
// built lib for Main-process, Preload-script
lib: {
entry: "index.ts",
formats: ["cjs"],
fileName: () => "[name].js",
},
rollupOptions: {
// configuration here
external: ["serialport", "sqlite3"],
},
},
}
```

6
src/main/index.ts
View File

@ -38,9 +38,9 @@ async function createWindow() {
// Make all links open with the browser, not with the application
win.webContents.setWindowOpenHandler(({ url }) => {
if (url.startsWith('https:')) shell.openExternal(url)
return { action: 'deny' }
})
if (url.startsWith('https:')) shell.openExternal(url)
return { action: 'deny' }
})
}
app.whenReady().then(createWindow)

6
src/renderer/index.html
View File

@ -5,9 +5,9 @@
<link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
<title>Vite App</title>
</head>
<body>

122
src/renderer/src/App.tsx
View File

@ -5,68 +5,68 @@ import styles from '@/styles/app.module.scss'
import { useState } from 'react'
const App = () => {
const [count, setCount] = useState(0)
const [count, setCount] = useState(0)
return (
<div className={styles.app}>
<header className={styles.appHeader}>
<div className={styles.logos}>
<div className={styles.imgBox}>
<img
src={electron}
style={{ height: '24vw' }}
className={styles.appLogo}
alt="electron"
/>
</div>
<div className={styles.imgBox}>
<img src={vite} style={{ height: '19vw' }} alt="vite" />
</div>
<div className={styles.imgBox}>
<img
src={react}
style={{ maxWidth: '100%' }}
className={styles.appLogo}
alt="logo"
/>
</div>
</div>
<p>Hello Electron + Vite + React!</p>
<p>
<button onClick={() => setCount((count) => count + 1)}>
count is: {count}
</button>
</p>
<p>
Edit <code>App.tsx</code> and save to test HMR updates.
</p>
<div>
<a
className={styles.appLink}
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
{' | '}
<a
className={styles.appLink}
href="https://vitejs.dev/guide/features.html"
target="_blank"
rel="noopener noreferrer"
>
Vite Docs
</a>
<div className={styles.staticPublic}>
Place static files into the{' '}
<code>src/renderer/public</code> folder
<img style={{ width: 90 }} src="./images/node.png" />
</div>
</div>
</header>
</div>
)
return (
<div className={styles.app}>
<header className={styles.appHeader}>
<div className={styles.logos}>
<div className={styles.imgBox}>
<img
src={electron}
style={{ height: '24vw' }}
className={styles.appLogo}
alt="electron"
/>
</div>
<div className={styles.imgBox}>
<img src={vite} style={{ height: '19vw' }} alt="vite" />
</div>
<div className={styles.imgBox}>
<img
src={react}
style={{ maxWidth: '100%' }}
className={styles.appLogo}
alt="logo"
/>
</div>
</div>
<p>Hello Electron + Vite + React!</p>
<p>
<button onClick={() => setCount((count) => count + 1)}>
count is: {count}
</button>
</p>
<p>
Edit <code>App.tsx</code> and save to test HMR updates.
</p>
<div>
<a
className={styles.appLink}
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
{' | '}
<a
className={styles.appLink}
href="https://vitejs.dev/guide/features.html"
target="_blank"
rel="noopener noreferrer"
>
Vite Docs
</a>
<div className={styles.staticPublic}>
Place static files into the{' '}
<code>src/renderer/public</code> folder
<img style={{ width: 90 }} src="./images/node.png" />
</div>
</div>
</header>
</div>
)
}
export default App

12
src/renderer/src/main.tsx
View File

@ -5,11 +5,11 @@ import './samples/electron-store'
import './styles/index.css'
render(
<StrictMode>
<App />
</StrictMode>,
document.getElementById('root'),
window.removeLoading
<StrictMode>
<App />
</StrictMode>,
document.getElementById('root'),
window.removeLoading
)
console.log('fs', window.fs)
@ -17,5 +17,5 @@ console.log('ipcRenderer', window.ipcRenderer)
// Use ipcRenderer.on
window.ipcRenderer.on('main-process-message', (_event, ...args) => {
console.log('[Receive Main-process message]:', ...args)
console.log('[Receive Main-process message]:', ...args)
})

108
src/renderer/src/styles/app.module.scss
View File

@ -1,65 +1,65 @@
.app {
text-align: center;
text-align: center;
.appHeader {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
.appHeader {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
.logos {
display: flex;
box-sizing: border-box;
align-items: center;
padding: 0 5vw;
width: 100%;
.logos {
display: flex;
box-sizing: border-box;
align-items: center;
padding: 0 5vw;
width: 100%;
.imgBox {
width: 33.33%;
.imgBox {
width: 33.33%;
.appLogo {
pointer-events: none;
}
.appLogo {
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.appLogo {
animation: App-logo-spin infinite 20s linear;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
}
}
@media (prefers-reduced-motion: no-preference) {
.appLogo {
animation: App-logo-spin infinite 20s linear;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
}
}
button {
font-size: calc(10px + 2vmin);
}
button {
font-size: calc(10px + 2vmin);
}
.appLink {
color: #61dafb;
}
.appLink {
color: #61dafb;
}
.staticPublic {
display: flex;
align-items: center;
.staticPublic {
display: flex;
align-items: center;
code {
padding: 4px 7px;
margin: 0 4px;
border-radius: 4px;
background-color: rgb(30, 30, 30, .7);
font-size: 13px;
}
}
}
code {
padding: 4px 7px;
margin: 0 4px;
border-radius: 4px;
background-color: rgb(30, 30, 30, .7);
font-size: 13px;
}
}
}
}