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

Merge pull request #11 from PAXANDDOS/feature/sass 

feature: sass, different fixes
This commit is contained in:
草鞋没号 2022-02-03 08:02:23 +08:00 committed by GitHub
parent 56250ed676 a37a78a9f7
commit c8112112ac
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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", "name": "vite-react-electron",
"version": "1.0.0", "version": "1.0.0",
"description": "Vite React Electron boilerplate.", "description": "Vite React Electron boilerplate.",
"author": "草鞋没号 <308487730@qq.com>", "author": "草鞋没号 <308487730@qq.com>",
"license": "MIT", "license": "MIT",
"main": "dist/main/index.cjs", "main": "dist/main/index.cjs",
"scripts": { "scripts": {
"dev": "node scripts/watch.mjs", "dev": "node scripts/watch.mjs",
"build": "tsc --project src/renderer/tsconfig.json && node scripts/build.mjs && electron-builder --config .electron-builder.config.js" "build": "tsc --project src/renderer/tsconfig.json && node scripts/build.mjs && electron-builder --config .electron-builder.config.js"
}, },
"engines": { "engines": {
"node": ">=14.17.0" "node": ">=14.17.0"
}, },
"dependencies": { "dependencies": {
"electron-store": "^8.0.1" "electron-store": "^8.0.1"
}, },
"devDependencies": { "devDependencies": {
"@types/react": "^17.0.38", "@types/react": "^17.0.38",
"@types/react-dom": "^17.0.11", "@types/react-dom": "^17.0.11",
"@vitejs/plugin-react": "^1.1.4", "@vitejs/plugin-react": "^1.1.4",
"electron": "16.0.8", "electron": "17.0.0",
"electron-builder": "^22.14.5", "electron-builder": "^22.14.5",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"typescript": "^4.5.5", "sass": "^1.49.7",
"vite": "^2.7.13", "typescript": "^4.5.5",
"vite-plugin-resolve": "^1.4.3" "vite": "^2.7.13",
}, "vite-plugin-resolve": "^1.4.3"
"env": { },
"//": "Used in build scripts", "env": {
"HOST": "127.0.0.1", "//": "Used in build scripts",
"PORT": 3344 "HOST": "127.0.0.1",
} "PORT": 3344
}
} }

8
src/main/index.ts
View File

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

4
src/renderer/index.html
View File

@ -4,6 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<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
http-equiv="Content-Security-Policy"
content="script-src 'self' 'unsafe-inline';"
/>
<title>Vite App</title> <title>Vite App</title>
</head> </head>
<body> <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 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 App = () => {
const [count, setCount] = useState(0) const [count, setCount] = useState(0)
return ( return (
<div className="App"> <div className={styles.app}>
<header className="App-header"> <header className={styles.appHeader}>
<div className="logos"> <div className={styles.logos}>
<div className="img-box"> <div className={styles.imgBox}>
<img src={electron} style={{ height: '24vw' }} className="App-logo" alt="electron" /> <img
</div> src={electron}
<div className="img-box"> style={{ height: '24vw' }}
<img src={vite} style={{ height: '19vw' }} alt="vite" /> className={styles.appLogo}
</div> alt="electron"
<div className="img-box"> />
<img src={react} style={{ maxWidth: '100%' }} className="App-logo" alt="logo" /> </div>
</div> <div className={styles.imgBox}>
</div> <img src={vite} style={{ height: '19vw' }} alt="vite" />
<p>Hello Electron + Vite + React!</p> </div>
<p> <div className={styles.imgBox}>
<button onClick={() => setCount((count) => count + 1)}> <img
count is: {count} src={react}
</button> style={{ maxWidth: '100%' }}
</p> className={styles.appLogo}
<p> alt="logo"
Edit <code>App.tsx</code> and save to test HMR updates. />
</p> </div>
<div> </div>
<a <p>Hello Electron + Vite + React!</p>
className="App-link" <p>
href="https://reactjs.org" <button onClick={() => setCount((count) => count + 1)}>
target="_blank" count is: {count}
rel="noopener noreferrer" </button>
> </p>
Learn React <p>
</a> Edit <code>App.tsx</code> and save to test HMR updates.
{' | '} </p>
<a <div>
className="App-link" <a
href="https://vitejs.dev/guide/features.html" className={styles.appLink}
target="_blank" href="https://reactjs.org"
rel="noopener noreferrer" target="_blank"
> rel="noopener noreferrer"
Vite Docs >
</a> Learn React
<div className="static-public"> </a>
Place static files into the <code>src/renderer/public</code> folder {' | '}
<img style={{ width: 90 }} src="./images/node.png" /> <a
</div> className={styles.appLink}
</div> href="https://vitejs.dev/guide/features.html"
</header> target="_blank"
</div> 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 export default App

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

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

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, .7);
font-size: 13px;
}
}
}
}

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