2017-11-26 5 views
0

でのレンダリングではありません。VUEのHTMLタグがちょうどWebPACKのと私の初の電子& vue.jsアプリを設定しようとすると、私のVUEコンポーネントがレンダリング取得されていない問題に実行している電子

var path = require('path') 
var webpack = require('webpack') 

module.exports = { 
    entry: './app/main.js', 
    output: { 
    path: path.resolve(__dirname, './dist'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    loaders: [ 
     { 
      test: /\.vue$/, 
      use: { 
       loader: 'vue-loader' 
      } 
     }, 
     { 
      test: /\.js$/, 
      exclude: /node_modules/, 
      use: { 
       loader: 'babel-loader', 
       options: { 
       presets: ['es2015'], 
       plugins: ['transform-runtime'] 
       } 
      } 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.ExternalsPlugin('commonjs', [ 
     'electron' 
    ]) 
    ] 
} 

main.js(電子エントリポイント):(電子によってレンダリング)

const electron = require('electron'); 

const app = electron.app; 
const BrowserWindow = electron.BrowserWindow; 

let mainWindow; 

var createWindow =() => { 
    mainWindow = new BrowserWindow({width: 800, height: 600}); 
    mainWindow.loadURL('file://' + __dirname + '/index.html'); 
    mainWindow.on('closed',() => mainWindow = null); 
} 

app.on('ready', createWindow); 

app.on('window-all-closed',() => { 
    if (process.platform !== 'darwin') { 
     app.quit(); 
    } 
}); 

app.on('activate',() => { 
    if (mainWindow === null) { 
     createWindow(); 
    } 
}); 

のindex.html:ここ

は私project structure

webpack.config.jsあります

<!DOCTYPE html> 
<html> 

<head> 
    <title>Test</title> 
</head> 

<body> 
    <app></app> 
    <script src="dist/bundle.js"></script> 
</body> 

</html> 

APP/App.vue(VUEルートコンポーネント):

<template> 
    <div>{{ msg }}</div> 
</template> 

<script> 
export default { 
    data() { 
     return { 
      msg: "root component" 
     } 
    } 
} 
</script> 

APP/main.js(WebPACKのエントリポイント):

import Vue from 'vue' 
import App from './App.vue' 

new Vue({ 
    el: 'app', 
    components: { App } 
}) 

それからことなく実行bundle.jsを作成するWebPACKの実行何か問題がある。私は、スタート(別名電子main.js)を実行NPM実行したときしかし、私は空白の画面を取得し、私はそれがアプリタグが欠落しているように見えるコードを検査する場合:

resulting electron window

私は「エルを変更した場合: "app" 'to' el: "body" '全身がなくても。

これはこのテクノロジに対処する私の最初の試みであり、何が間違っているのかはわかりません。

答えて

0

私は自分で解決策を考え出しました。私は

render: h => h(App) 

components: { App } 

を置き換えるアプリ/ main.jsでの場合、それは動作します。

なぜ誰かが知っている場合はお知らせください。

関連する問題