create-react-app my-app
cd my-app
npm start
看下頁(yè)面是否打開,是否運(yùn)行正確。
注意:如果頁(yè)面沒(méi)有src文件夾,
第一種:卸載全局安裝包:
npm uninstall -g create-react-app
yarn global remove create-react-app
然后 npm start,瀏覽器會(huì)打開頁(yè)面。
如果第一種不行,用第二種
第二種:忽視掉本地的create-react-app已存在的版本進(jìn)行項(xiàng)目的創(chuàng)建
npx --ignore-existing create-react-app my-app
npm install electron --save-dev
“main”:”main.js”
修改啟動(dòng)命令:
const { app, BrowserWindow } = require('electron') const path = require('path') const pkg = require('./package.json'); let mainWindow function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js') } }) // 加載應(yīng)用----react 打包 //mainWindow.loadURL(url.format({ //pathname: path.join(__dirname, './build/index.html'), //protocol: 'file:', //slashes: true //})) // 加載應(yīng)用----適用于 react 項(xiàng)目和開發(fā)階段npm run electron mainWindow.loadURL('http://localhost:3000/'); mainWindow.on('closed', function () { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) app.on('activate', function () { if (mainWindow === null) createWindow() })
npm start npm run dev/electron 兩個(gè)命令都執(zhí)行時(shí),瀏覽器打開頁(yè)面,會(huì)打開桌面應(yīng)用。
npm install --save react-router-dom
import React from 'react'; import ReactDOM from 'react-dom'; import ReactMap from './router/routerMap'; import * as serviceWorker from './serviceWorker'; ReactDOM.render( <div> <ReactMap /> </div> , document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
src/router/routerMap.js
import React from 'react' import { HashRouter as Router, Route } from 'react-router-dom' import Login from '../pages/Login/Login' class ReactMap extends React.Component { updateHandle() { console.log("每次router變化后觸發(fā)") } render() { return ( <Router history={this.props.history}> <Route exact path="" component={Login} /> </Router> ) } } export default ReactMap;
npm install --save react-redux
npm install --save redux
npm install --save redux-thunk
import React from 'react'; import ReactDOM from 'react-dom'; import ReactMap from './router/routerMap'; import * as serviceWorker from './serviceWorker'; import { Provider } from 'react-redux' import { createStore, applyMiddleware, compose } from 'redux' import rootRedux from './redux' import thunk from 'redux-thunk' const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose const enhancer = composeEnhancers(applyMiddleware(thunk)); const store = createStore( rootRedux, enhancer // applyMiddleware(thunk), // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ) ReactDOM.render( <div> <Provider store={store}> <ReactMap /> </Provider> </div> , document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
import { combineReducers } from 'redux'
import set from './set'
export default combineReducers({
data: set
})
const set = (state = [], action) => { switch (action.type) { case 'GET_LIST': return { ...state, list: action.list } case 'SET_USERNAME': return { ...state, userName: action.list } default: return state } } export default set
export const getList = () => { return { type: 'GET_LIST', list: '1111' } } export const setUserName = (list) => { return { type: 'SET_USERNAME', list: list } }
cnpm install --save react-app-rewired customize-cra
cnpm install --save babel-plugin-import
cnpm install --save less less-loader
const { override, fixBabelImports, addWebpackAlias, addLessLoader } = require('customize-cra') const path = require('path') function resolve(dir) { return path.join(__dirname, dir) } // addLessLoader 添加less的引用 // fixBabelImports 按需加載antd組件 // addWebpackAlias 路徑別名配置 /* 路徑別名配置 */ module.exports = override( addWebpackAlias({ '@': resolve('src'), components: resolve('./src/components'), assets: resolve('./src/assets'), static: resolve('./src/static'), img: resolve('./src/static/img'), js: resolve('./src/static/js'), css: resolve('./src/static/css'), }), /* antd組件按需加載 */ fixBabelImports('import', { libraryName: 'antd', libraryDirectory: 'es', style: true, }), addLessLoader({ javascriptEnabled: true, modifyVars: { '@primary-color': '#1DA57A' }, }), );
import '@/static/css/index.less'
npm run eject
運(yùn)行后會(huì)出現(xiàn)config文件夾,在里面配置less 和路徑別名配置
cnpm install --save less less-loader
在webpack.config.js里面進(jìn)行less的配置
在webpack.config.js里面進(jìn)行路徑別名的配置
在package.json,里面加上”homepage”:”.”
在public里面加上main.js 和 package.json 和 preload.js
package.json
{ "name":"crh_chat", "version":"1.0-test", "main":"main.js", "author": { "name":"YOURNAME" }, "license": "MIT" }
main.js
如果需要引用一些模塊就加入preload: path.join(__dirname, 'preload.js'),不用可以注釋掉這段
const electron = require('electron'); const path = require('path'); // 控制應(yīng)用生命周期的模塊 const { app } = electron; // 創(chuàng)建本地瀏覽器窗口的模塊 const { BrowserWindow } = electron; // 指向窗口對(duì)象的一個(gè)全局引用,如果沒(méi)有這個(gè)引用,那么當(dāng)該javascript對(duì)象被垃圾回收的 // 時(shí)候該窗口將會(huì)自動(dòng)關(guān)閉 let win; function createWindow() { // 創(chuàng)建一個(gè)新的瀏覽器窗口 win = new BrowserWindow({ width: 1920, height: 1080, autoHideMenuBar: true, webPreferences: { preload: path.join(__dirname, 'preload.js') } }); // 并且裝載應(yīng)用的index.html頁(yè)面 win.loadURL(`file://${__dirname}/index.html`); // 打開開發(fā)工具頁(yè)面 //win.webContents.openDevTools(); // 當(dāng)窗口關(guān)閉時(shí)調(diào)用的方法 win.on('closed', () => { // 解除窗口對(duì)象的引用,通常而言如果應(yīng)用支持多個(gè)窗口的話,你會(huì)在一個(gè)數(shù)組里 // 存放窗口對(duì)象,在窗口關(guān)閉的時(shí)候應(yīng)當(dāng)刪除相應(yīng)的元素。 win = null; }); } // 當(dāng)Electron完成初始化并且已經(jīng)創(chuàng)建了瀏覽器窗口,則該方法將會(huì)被調(diào)用。 // 有些API只能在該事件發(fā)生后才能被使用。 app.on('ready', createWindow); /* var mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: false } }); */ // 當(dāng)所有的窗口被關(guān)閉后退出應(yīng)用 app.on('window-all-closed', () => { // 對(duì)于OS X系統(tǒng),應(yīng)用和相應(yīng)的菜單欄會(huì)一直激活直到用戶通過(guò)Cmd + Q顯式退出 if (process.platform !== 'darwin') { app.quit(); } }); app.on('activate', () => { // 對(duì)于OS X系統(tǒng),當(dāng)dock圖標(biāo)被點(diǎn)擊后會(huì)重新創(chuàng)建一個(gè)app窗口,并且不會(huì)有其他 // 窗口打開 if (win === null) { createWindow(); } });
preload.js 這里引入了electron,需要用的時(shí)候,window.electron
global.electron = require('electron') window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const type of ['chrome', 'node', 'electron']) { replaceText(`${type}-version`, process.versions[type]) } })
有兩個(gè)地方需要preload.js 外面那個(gè)是開發(fā)時(shí)要用的,public里面是打包后需要用到的。
成功后會(huì)出現(xiàn)build文件夾,雙擊index.html在瀏覽器打開,可以正常運(yùn)行
在pacakge.json里面的scripts配置
"package": "electron-packager ./build package0514 --win --out package/ --arch=x64 --app-version=1.1.0 --electron-version=8.0.0"
然后 npm run package
成功后頁(yè)面會(huì)生成一個(gè)package文件,里面有我們打包好的文件
聯(lián)系客服