[go: nahoru, domu]

Skip to content

Commit

Permalink
Implement Vue2.0 support
Browse files Browse the repository at this point in the history
  • Loading branch information
sohelamin committed Oct 3, 2016
1 parent 33aae51 commit 8451fd8
Show file tree
Hide file tree
Showing 9 changed files with 108 additions and 104 deletions.
5 changes: 5 additions & 0 deletions .babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"presets": [
["es2015", { "modules": false }]
]
}
8 changes: 7 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# A boilerplate app using Electron & Vue.js

### Requirements
Electron >= 1.0.0
Vue >=2.0.1
Vue Router >=2.0.0
Webpack >=2.1.0-beta

## Usage

```bash
Expand All @@ -11,7 +17,7 @@ cd electron-vue-boilerplate && npm install

```bash
npm run dev-server
npm run dev
npm run dev // on a different tab
```

## Build
Expand Down
39 changes: 19 additions & 20 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,29 +27,28 @@
}
</style>
</head>
<body id="app">
<div class="window">
<div class="window-content">
<div class="pane-group">
<div class="pane-sm sidebar">
<nav class="nav-group">
<h5 class="nav-group-title">Favorites</h5>
<a class="nav-group-item" v-link="{ path: '/', exact: true, activeClass: 'active' }"><span class="icon icon-home"></span>
Home</a>
<a class="nav-group-item" v-link="{ path: '/contacts', exact: true, activeClass: 'active' }"><span class="icon icon-users"></span>
Contacts</a>
<a class="nav-group-item" v-link="{ path: '/music', exact: true, activeClass: 'active' }"><span class="icon icon-note-beamed"></span>
Play</a>
</nav>
</div>
<div class="pane container" style="padding: 10px;">
<router-view></router-view>
<body>
<div id="app">
<div class="window">
<div class="window-content">
<div class="pane-group">
<div class="pane-sm sidebar">
<nav class="nav-group">
<h5 class="nav-group-title">Favorites</h5>
<router-link class="nav-group-item" to="/"><span class="icon icon-home"></span> Home</router-link>
<router-link class="nav-group-item" to="/contacts"><span class="icon icon-users"></span> Contacts</router-link>
<router-link class="nav-group-item" to="/music"><span class="icon icon-note-beamed"></span> Play</router-link>
</nav>
</div>
<div class="pane container" style="padding: 10px;">
<router-view></router-view>
</div>
</div>
</div>
<footer class="toolbar toolbar-footer">
<h1 class="title">Made by <a href="http://www.sohelamin.com" target="_blank">Sohel Amin</a></h1>
</footer>
</div>
<footer class="toolbar toolbar-footer">
<h1 class="title">Made by <a href="http://www.sohelamin.com" target="_blank">Sohel Amin</a></h1>
</footer>
</div>
<script src="dist/build.js"></script>
</body>
Expand Down
38 changes: 15 additions & 23 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "electron-vue-boilerplate",
"version": "0.0.1",
"version": "1.0.0",
"description": "Electron & Vue.js Boilerplate App",
"author": "Sohel Amin",
"license": "MIT",
Expand All @@ -16,29 +16,21 @@
"package-linux": "electron-packager ./ --platform=linux --arch=ia32 --icon=assets/app.ico --out=package --asar=true --overwrite=force"
},
"dependencies": {
"electron-prebuilt": "^1.2.2",
"vue": "^1.0.24",
"vue-router": "^0.7.13"
"electron-prebuilt": "^1.4.2",
"vue": "^2.0.1",
"vue-router": "^2.0.0"
},
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "^6.9.0",
"babel-preset-es2015": "^6.9.0",
"babel-preset-stage-0": "^6.5.0",
"babel-runtime": "^6.9.1",
"css-loader": "^0.23.1",
"electron-packager": "^7.3.0",
"electron-reload": "^0.3.0",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.14.0",
"style-loader": "^0.13.1",
"vue-hot-reload-api": "^1.3.2",
"vue-html-loader": "^1.2.2",
"vue-loader": "^8.5.2",
"vue-style-loader": "^1.0.0",
"webpack": "^1.13.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.10.0"
"electron-packager": "^8.1.0",
"electron-reload": "^1.0.2",
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^9.4.0",
"webpack": "2.1.0-beta.22",
"webpack-dev-server": "^2.1.0-beta.0"
}
}
34 changes: 14 additions & 20 deletions src/app.js
Original file line number Diff line number Diff line change
@@ -1,27 +1,21 @@
const Vue = require('vue')
const VueRouter = require('vue-router')
import Vue from 'vue'
import VueRouter from 'vue-router'

const App = require('./App.vue')

var Main = Vue.extend({})
import App from './App.vue'

Vue.use(VueRouter)

const Contacts = require('./components/Contacts.vue')
const Music = require('./components/Music.vue')

var router = new VueRouter()
import Contacts from './components/Contacts.vue'
import Music from './components/Music.vue'

router.map({
'/': {
component: App
},
'/contacts': {
component: Contacts
},
'/music': {
component: Music
}
var router = new VueRouter({
routes: [
{ path: '/', component: App },
{ path: '/contacts', component: Contacts },
{ path: '/music', component: Music }
]
})

router.start(Main, '#app')
const app = new Vue({
router
}).$mount('#app')
8 changes: 4 additions & 4 deletions src/components/Clock.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@
data () {
return { time: "00:00:00" }
},
ready () {
this.startTime()
mounted () {
this.startTime();
},
methods: {
startTime: function () {
startTime () {
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
Expand All @@ -24,7 +24,7 @@
this.time = h + ":" + m + ":" + s;
var t = setTimeout(this.startTime, 500);
},
checkTime: function (i) {
checkTime (i) {
if (i < 10) {i = "0" + i};
return i;
}
Expand Down
3 changes: 2 additions & 1 deletion src/components/Contacts.vue
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@
this.phone = contact.phone;
},
removeContact (contact) {
this.contacts.$remove(contact);
var index = this.contacts.indexOf(contact);
this.contacts.splice(index, 1);
},
updateContact (id) {
this.contacts[id].name = this.name;
Expand Down
22 changes: 12 additions & 10 deletions src/components/Music.vue
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
<template>
<h1>Music Player</h1>
<button class="btn btn-default" v-on:click="fileOpen">
<span class="icon icon-folder"></span>
</button>
<br />
<audio controls id="player">
<source v-for="file in files" src="{{ file }}" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div>
<h1>Music Player</h1>
<button class="btn btn-default" v-on:click="fileOpen">
<span class="icon icon-folder"></span>
</button>
<br />
<audio controls id="player">
<source v-for="file in files" :src="file" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</div>
</template>

<script>
Expand All @@ -21,7 +23,7 @@
}
},
methods: {
fileOpen: function (event) {
fileOpen (event) {
let tempPath = dialog.showOpenDialog({
properties: ['openFile', 'multiSelections']
});
Expand Down
55 changes: 30 additions & 25 deletions webpack.config.js
Original file line number Diff line number Diff line change
@@ -1,53 +1,58 @@
var path = require('path')
var webpack = require('webpack')
const path = require('path');

module.exports = {
entry: './src/app.js',
output: {
path: './dist',
publicPath: 'dist/',
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
resolve: {
alias: {vue: 'vue/dist/vue.js'},
root: path.join(__dirname, '..'),
extensions: ['', '.js', '.json', '.vue']
},
target: 'electron',
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue'
},
{
// edit this for additional asset file types
test: /\.(png|jpg|gif)$/,
loader: 'file?name=[name].[ext]?[hash]'
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
query: {
name: '[name].[ext]?[hash]'
}
}
]
},
// example: if you wish to apply custom babel options
// instead of using vue-loader's default:
babel: {
presets: ['es2015', 'stage-0'],
plugins: ['transform-runtime']
devServer: {
historyApiFallback: true,
noInfo: true
},
resolve: {
root: path.join(__dirname, '..'),
extensions: ['', '.js', '.json', '.vue']
},
target: 'electron'
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.plugins = [
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
]
} else {
module.exports.devtool = '#source-map'
compress: {
warnings: false
}
})
])
}

0 comments on commit 8451fd8

Please sign in to comment.