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 * @see https://www.electron.build/configuration/configuration
*/ */
module.exports = { module.exports = {
appId: "YourAppID@qq.com", appId: "YourAppID@qq.com",
productName: "YourAppName", productName: "YourAppName",
copyright: "Copyright © 2022 ${author}", copyright: "Copyright © 2022 ${author}",
asar: true, asar: true,
directories: { directories: {
output: "release/${version}", output: "release/${version}",
buildResources: "build", buildResources: "build",
}, },
files: ["dist"], files: ["dist"],
win: { win: {
target: [ target: [
{ {
target: "nsis", target: "nsis",
arch: ["x64"], arch: ["x64"],
}, },
], ],
artifactName: "${productName}-${version}-Setup.${ext}", artifactName: "${productName}-${version}-Setup.${ext}",
}, },
nsis: { nsis: {
oneClick: false, oneClick: false,
perMachine: false, perMachine: false,
allowToChangeInstallationDirectory: true, allowToChangeInstallationDirectory: true,
deleteAppDataOnUninstall: false, deleteAppDataOnUninstall: false,
}, },
mac: { mac: {
target: ["dmg"], target: ["dmg"],
artifactName: "${productName}-${version}-Installer.${ext}", artifactName: "${productName}-${version}-Installer.${ext}",
}, },
linux: { linux: {
target: ["AppImage"], target: ["AppImage"],
artifactName: "${productName}-${version}-Installer.${ext}", 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 ```typescript
// Defined in the window // Defined in the window
interface Window { interface Window {
fs: typeof import("fs") fs: typeof import("fs")
ipcRenderer: import("electron").IpcRenderer ipcRenderer: import("electron").IpcRenderer
} }
``` ```
@ -115,18 +115,18 @@ Once `dev` or `build` npm-script is executed, the `dist` folder will be generate
```js ```js
export default { export default {
build: { build: {
// built lib for Main-process, Preload-script // built lib for Main-process, Preload-script
lib: { lib: {
entry: "index.ts", entry: "index.ts",
formats: ["cjs"], formats: ["cjs"],
fileName: () => "[name].js", fileName: () => "[name].js",
}, },
rollupOptions: { rollupOptions: {
// configuration here // configuration here
external: ["serialport", "sqlite3"], 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 // Make all links open with the browser, not with the application
win.webContents.setWindowOpenHandler(({ url }) => { win.webContents.setWindowOpenHandler(({ url }) => {
if (url.startsWith('https:')) shell.openExternal(url) if (url.startsWith('https:')) shell.openExternal(url)
return { action: 'deny' } return { action: 'deny' }
}) })
} }
app.whenReady().then(createWindow) 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" /> <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta <meta
http-equiv="Content-Security-Policy" http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';" content="script-src 'self' 'unsafe-inline';"
/> />
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <body>

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

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

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

@ -5,11 +5,11 @@ import './samples/electron-store'
import './styles/index.css' import './styles/index.css'
render( render(
<StrictMode> <StrictMode>
<App /> <App />
</StrictMode>, </StrictMode>,
document.getElementById('root'), document.getElementById('root'),
window.removeLoading window.removeLoading
) )
console.log('fs', window.fs) console.log('fs', window.fs)
@ -17,5 +17,5 @@ console.log('ipcRenderer', window.ipcRenderer)
// Use ipcRenderer.on // Use ipcRenderer.on
window.ipcRenderer.on('main-process-message', (_event, ...args) => { 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 { .app {
text-align: center; text-align: center;
.appHeader { .appHeader {
background-color: #282c34; background-color: #282c34;
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: calc(10px + 2vmin); font-size: calc(10px + 2vmin);
color: white; color: white;
.logos { .logos {
display: flex; display: flex;
box-sizing: border-box; box-sizing: border-box;
align-items: center; align-items: center;
padding: 0 5vw; padding: 0 5vw;
width: 100%; width: 100%;
.imgBox { .imgBox {
width: 33.33%; width: 33.33%;
.appLogo { .appLogo {
pointer-events: none; pointer-events: none;
} }
@media (prefers-reduced-motion: no-preference) { @media (prefers-reduced-motion: no-preference) {
.appLogo { .appLogo {
animation: App-logo-spin infinite 20s linear; animation: App-logo-spin infinite 20s linear;
} }
@keyframes App-logo-spin { @keyframes App-logo-spin {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
} }
} }
} }
button { button {
font-size: calc(10px + 2vmin); font-size: calc(10px + 2vmin);
} }
.appLink { .appLink {
color: #61dafb; color: #61dafb;
} }
.staticPublic { .staticPublic {
display: flex; display: flex;
align-items: center; align-items: center;
code { code {
padding: 4px 7px; padding: 4px 7px;
margin: 0 4px; margin: 0 4px;
border-radius: 4px; border-radius: 4px;
background-color: rgb(30, 30, 30, .7); background-color: rgb(30, 30, 30, .7);
font-size: 13px; font-size: 13px;
} }
} }
} }
} }