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

feature: sass, different fixes

This commit is contained in:
Paul 2022-02-02 14:56:34 +02:00
parent 56250ed676
commit ca4ad8b8e7
9 changed files with 9181 additions and 8846 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17676
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

67
package.json
View File

@ -1,35 +1,36 @@
{
"name": "vite-react-electron",
"version": "1.0.0",
"description": "Vite React Electron boilerplate.",
"author": "草鞋没号 <308487730@qq.com>",
"license": "MIT",
"main": "dist/main/index.cjs",
"scripts": {
"dev": "node scripts/watch.mjs",
"build": "tsc --project src/renderer/tsconfig.json && node scripts/build.mjs && electron-builder --config .electron-builder.config.js"
},
"engines": {
"node": ">=14.17.0"
},
"dependencies": {
"electron-store": "^8.0.1"
},
"devDependencies": {
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@vitejs/plugin-react": "^1.1.4",
"electron": "16.0.8",
"electron-builder": "^22.14.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"typescript": "^4.5.5",
"vite": "^2.7.13",
"vite-plugin-resolve": "^1.4.3"
},
"env": {
"//": "Used in build scripts",
"HOST": "127.0.0.1",
"PORT": 3344
}
"name": "vite-react-electron",
"version": "1.0.0",
"description": "Vite React Electron boilerplate.",
"author": "草鞋没号 <308487730@qq.com>",
"license": "MIT",
"main": "dist/main/index.cjs",
"scripts": {
"dev": "node scripts/watch.mjs",
"build": "tsc --project src/renderer/tsconfig.json && node scripts/build.mjs && electron-builder --config .electron-builder.config.js"
},
"engines": {
"node": ">=14.17.0"
},
"dependencies": {
"electron-store": "^8.0.1"
},
"devDependencies": {
"@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11",
"@vitejs/plugin-react": "^1.1.4",
"electron": "17.0.0",
"electron-builder": "^22.14.5",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"sass": "^1.49.7",
"typescript": "^4.5.5",
"vite": "^2.7.13",
"vite-plugin-resolve": "^1.4.3"
},
"env": {
"//": "Used in build scripts",
"HOST": "127.0.0.1",
"PORT": 3344
}
}

8
src/main/index.ts
View File

@ -1,6 +1,6 @@
import os from 'os'
import { join } from 'path'
import { app, BrowserWindow } from 'electron'
import { app, BrowserWindow, shell } from 'electron'
import './samples/electron-store'
const isWin7 = os.release().startsWith('6.1')
@ -35,6 +35,12 @@ async function createWindow() {
win.webContents.on('did-finish-load', () => {
win?.webContents.send('main-process-message', (new Date).toLocaleString())
})
// 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' }
})
}
app.whenReady().then(createWindow)

4
src/renderer/index.html
View File

@ -4,6 +4,10 @@
<meta charset="UTF-8" />
<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';"
/>
<title>Vite App</title>
</head>
<body>

66
src/renderer/src/App.css
View File

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

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

@ -1,61 +1,72 @@
import { useState } from 'react'
import vite from '@/assets/vite.svg'
import react from '@/assets/react.svg'
import electron from '@/assets/electron.png'
import './App.css'
import react from '@/assets/react.svg'
import vite from '@/assets/vite.svg'
import styles from '@/styles/app.module.scss'
import { useState } from 'react'
function App() {
const [count, setCount] = useState(0)
const App = () => {
const [count, setCount] = useState(0)
return (
<div className="App">
<header className="App-header">
<div className="logos">
<div className="img-box">
<img src={electron} style={{ height: '24vw' }} className="App-logo" alt="electron" />
</div>
<div className="img-box">
<img src={vite} style={{ height: '19vw' }} alt="vite" />
</div>
<div className="img-box">
<img src={react} style={{ maxWidth: '100%' }} className="App-logo" 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="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
{' | '}
<a
className="App-link"
href="https://vitejs.dev/guide/features.html"
target="_blank"
rel="noopener noreferrer"
>
Vite Docs
</a>
<div className="static-public">
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

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

@ -1,15 +1,15 @@
import React from 'react'
import ReactDOM from 'react-dom'
import { StrictMode } from 'react'
import { render } from 'react-dom'
import App from './App'
import './samples/electron-store'
import './index.css'
import './styles/index.css'
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root'),
window.removeLoading,
render(
<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)
})

65
src/renderer/src/styles/app.module.scss Normal file
View File

@ -0,0 +1,65 @@
.app {
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;
.logos {
display: flex;
box-sizing: border-box;
align-items: center;
padding: 0 5vw;
width: 100%;
.imgBox {
width: 33.33%;
.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);
}
}
}
}
}
button {
font-size: calc(10px + 2vmin);
}
.appLink {
color: #61dafb;
}
.staticPublic {
display: flex;
align-items: center;
code {
padding: 4px 7px;
margin: 0 4px;
border-radius: 4px;
background-color: rgb(30, 30, 30, 0.7);
font-size: 13px;
}
}
}
}

0
src/renderer/src/index.css → src/renderer/src/styles/index.css
View File