Skip to content

Commit 1f164f0

Browse files
author
guasam
committed
Prototype vue environment
1 parent c39486f commit 1f164f0

File tree

9 files changed

+252
-101
lines changed

9 files changed

+252
-101
lines changed

‎package.json‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
2-
"name": "electron-react-typescript-webpack-2021",
3-
"productName": "ERWT Boilerplate",
4-
"version": "4.1.0",
5-
"description": "Custom boilerplate for writing Desktop Applications using Electron, React, Webpack, TypeScript in 2020",
2+
"name": "electron-vue-typescript-webpack-2021",
3+
"productName": "EVTW Boilerplate",
4+
"version": "1.0.0",
5+
"description": "Custom boilerplate for writing Desktop Applications using Electron, Vue, Webpack, TypeScript in 2020",
66
"main": ".webpack/main",
77
"scripts": {
88
"start": "cross-env NODE_ENV=development electron-forge start",
@@ -15,7 +15,7 @@
1515
"electron boilerplate",
1616
"minimal",
1717
"electron-webpack",
18-
"electron-react",
18+
"electron-vue",
1919
"electron-typescript",
2020
"hmr",
2121
"boilerplate",
@@ -70,12 +70,14 @@
7070
"style-loader": "^3.2.1",
7171
"ts-loader": "9.2.5",
7272
"typescript": "^4.4.2",
73+
"vue-loader": "^16.8.1",
7374
"webpack": "^5.51.1"
7475
},
7576
"dependencies": {
7677
"@hot-loader/react-dom": "^17.0.1",
7778
"electron-squirrel-startup": "^1.0.0",
7879
"react": "^17.0.2",
79-
"react-dom": "^17.0.2"
80+
"react-dom": "^17.0.2",
81+
"vue": "^3.2.16"
8082
}
8183
}

‎src/components/Application.tsx‎

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎src/components/Application.vue‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
<template>
2+
<main>
3+
<div class="main-heading">
4+
<h1>EVTW Boilerplate</h1>
5+
</div>
6+
<div class="main-teaser">
7+
<img :src="logo" title="Codesbiome" />
8+
<div>
9+
Minimal boilerplate for rapid development of Desktop Applications.
10+
<br />
11+
This project makes use of Electron, React, Typescript, Webpack to serve
12+
the best environment for development with hot-reloading of modules and
13+
styles.
14+
</div>
15+
</div>
16+
<div class="versions center">
17+
<span> ERWT <span id="erwt-version"></span> </span>
18+
<span> Electron <span id="electron-version"></span> </span>
19+
<span> Chrome <span id="chrome-version"></span> </span>
20+
<span> Node <span id="node-version"></span> </span>
21+
</div>
22+
<p class="main-teaser small center">
23+
Click below button(s) to update the application &quot;counter&quot; state.
24+
For faster development experience, this application will update using Hot
25+
Reload without needing to restart/reload after code changes
26+
</p>
27+
<div class="center">
28+
<button @click="increment">
29+
Increment Counter <span>{{ counter }}</span>
30+
</button>
31+
&nbsp;&nbsp; &nbsp;&nbsp;
32+
<button @click="decrement">
33+
Decrement Counter <span>{{ counter }}</span>
34+
</button>
35+
</div>
36+
</main>
37+
</template>
38+
39+
<script lang="ts">
40+
import { defineComponent } from 'vue';
41+
import logo from '@assets/images/logo.png';
42+
import './Application.less';
43+
44+
export default defineComponent({
45+
data() {
46+
return {
47+
counter: 0,
48+
logo: logo,
49+
};
50+
},
51+
methods: {
52+
increment() {
53+
this.counter++;
54+
},
55+
decrement() {
56+
if (this.counter > 0) this.counter--;
57+
},
58+
},
59+
});
60+
</script>

‎src/index.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,9 @@ declare module '*.css';
22
declare module '*.png';
33
declare module '*.jpg';
44
declare module '*.jpeg';
5+
6+
declare module '*.vue' {
7+
import type { DefineComponent } from 'vue';
8+
const component: DefineComponent<unknown, unknown, never>;
9+
export default component;
10+
}

‎src/renderer.tsx‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,21 @@
1-
import React from 'react';
2-
import ReactDOM from 'react-dom';
3-
import Application from './components/Application';
4-
import { inDev } from './utils/helpers';
1+
// import React from 'react';
2+
// import ReactDOM from 'react-dom';
3+
// import Application from './components/Application';
4+
// import { inDev } from './utils/helpers';
55

6-
// Say something
7-
console.log('[ERWT] : Renderer execution started');
6+
// // Say something
7+
// console.log('[ERWT] : Renderer execution started');
88

9-
// Application to Render
10-
const app = <Application title='ERWT Boilerplate' version='4.0.0' />;
9+
// // Application to Render
10+
// const app = <Application title='ERWT Boilerplate' version='4.0.0' />;
1111

12-
// Render application in DOM
13-
ReactDOM.render(app, document.getElementById('app'));
12+
// // Render application in DOM
13+
// ReactDOM.render(app, document.getElementById('app'));
1414

15-
// Hot module replacement
16-
if (inDev() && module.hot) module.hot.accept();
15+
// // Hot module replacement
16+
// if (inDev() && module.hot) module.hot.accept();
17+
18+
import { createApp } from 'vue';
19+
import App from '@src/components/Application.vue';
20+
21+
createApp(App).mount('#app');

‎tools/webpack/webpack.plugins.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
2+
const { VueLoaderPlugin } = require('vue-loader');
23

3-
module.exports = [new ForkTsCheckerWebpackPlugin()];
4+
module.exports = [new ForkTsCheckerWebpackPlugin(), new VueLoaderPlugin()];

‎tools/webpack/webpack.rules.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,14 @@ module.exports = [
2323
loader: 'ts-loader',
2424
options: {
2525
transpileOnly: true,
26+
appendTsSuffixTo: [/\.vue$/],
2627
},
2728
},
2829
},
30+
{
31+
test: /\.vue$/,
32+
use: 'vue-loader',
33+
},
2934
{
3035
// CSS Loader
3136
test: /\.css$/,

‎tsconfig.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"compilerOptions": {
3-
"jsx": "react",
3+
"jsx": "preserve",
44
"allowJs": true,
5-
"target": "ES6",
5+
"target": "ESNext",
66
"module": "ESNext",
77
"skipLibCheck": true,
88
"esModuleInterop": true,

0 commit comments

Comments
 (0)