国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

基于electron-react-redux的桌面程序制作

ZweiZhao / 3354人閱讀

摘要:基于的桌面程序制作本文章將要講述怎么將,,結(jié)合起來,當(dāng)中的結(jié)合很簡單,主要是與的結(jié)合還有與配合以及熱加載的配置有一個我自己做的也許會幫助到你步驟首先我們需要建立一個新的文件夾然后我們初始化一個,將一下代碼復(fù)制進(jìn)剛才創(chuàng)建的中

基于electron-react-redux的桌面程序制作

本文章將要講述怎么將electron,react,redux結(jié)合起來,當(dāng)中react+redux的結(jié)合很簡單,主要是與electron的結(jié)合
還有與webpack配合以及熱加載的配置

有一個我自己做的demo也許會幫助到你

步驟

首先我們需要建立一個新的文件夾 mkdir my-electron-react-app && cd my-electron-react-app;

然后我們初始化一個 package.jsonnpm init

將一下代碼復(fù)制進(jìn)剛才創(chuàng)建的 package.json

{
  "name": "xxx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "devDependencies": {
    "babel": "^5.6.10",
    "babel-core": "^5.6.11",
    "babel-eslint": "7.1.1",
    "babel-loader": "^5.2.2",
    "css-loader": "^0.15.1",
    "electron": "^1.4.1",
    "electron-packager": "^4.1.3",
    "electron-rebuild": "^0.2.2",
    "less": "^2.5.1",
    "less-loader": "^2.2.0",
    "node-libs-browser": "^0.5.2",
    "prop-types": "^15.5.7",
    "style-loader": "^0.12.3",
    "webpack": "^1.9.12",
    "webpack-dev-server": "^1.9.0"
  },
  "dependencies": {
    "electron-prebuilt": "^0.28.3",
    "react": "^15.5.0",
    "react-dom": "^15.5.0",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  },
  "scripts": {
    "test": "npm test",
    "start": "./node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron .",
    "watch": "./node_modules/.bin/webpack-dev-server",
    "electron-rebuild": "./node_modules/.bin/electron-rebuild"
  },
  "author": "xxx",
  "license": "ISC"
}

創(chuàng)建一個webpack.config.js 文件

var webpack = require("webpack");
module.exports = {
    entry: {
    app: ["webpack/hot/dev-server", "./app/index.js"],
  },
  output: {
    path: "./public/built",
    filename: "bundle.js",
    publicPath: "http://localhost:8080/built/"
  },
  devServer: {
    contentBase: "./public",
    publicPath: "http://localhost:8080/built/"
  },
  module: {
  loaders: [
    { test: /.js$/, loader: "babel-loader", exclude: /node_modules/ },
    { test: /.css$/, loader: "style-loader!css-loader" },
    { test: /.less$/, loader: "style-loader!css-loader!less-loader"}
  ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

然后我們需要在根目錄創(chuàng)建一個index.js的文件

var app = require("app");
var BrowserWindow = require("browser-window");
require("crash-reporter").start();
app.on("window-all-closed", function() {
  if (process.platform != "darwin") {
    app.quit();
  }
});
app.on("ready", function() {
  mainWindow = new BrowserWindow({width: 900, height: 500});
  mainWindow.loadUrl("file://" + __dirname + "/public/index.html");
  mainWindow.openDevTools();
  mainWindow.on("closed", function() {
    mainWindow = null;
  });
});

然后我們創(chuàng)建一個public文件夾,在文件夾下創(chuàng)建一個index.html文件



  
    My Electron app
    
    
  
  
    

最后我們需要創(chuàng)建一個app文件夾,然后在app文件夾中創(chuàng)建一個index.js文件

import "./less/main.less";
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import configureStore from "./reducers/";

const store = configureStore();

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

在這個app文件夾中就是我們的react+redux組合所在的地方,等你將一個簡單的react+redux的項目做好之后,就能夠在命令窗口輸入命令了

npm install
npm run watch
// 重新打開一個命令窗口之后找到文件夾
npm start

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/82443.html

相關(guān)文章

  • 基于electron制作一個node壓縮圖片桌面應(yīng)用

    摘要:壓縮圖片桌面應(yīng)用基于制作一個壓縮圖片的桌面應(yīng)用下載地址項目源碼準(zhǔn)備工作我們來整理一下我們需要做什么壓縮圖片模塊獲取文件路徑桌面應(yīng)用生成壓縮圖片我們需要使用這個庫來壓縮圖片,這里我們把這個庫封裝成壓縮模塊。 壓縮圖片桌面應(yīng)用imagemin-electron 基于electron制作一個node壓縮圖片的桌面應(yīng)用 下載地址:https://github.com/zenoslin/imag...

    bigdevil_s 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<