github/wails
5
0
Fork 0
mirror of https://github.com/wailsapp/wails.git synced 2025-05-04 02:51:56 +08:00
Code Projects Activity

Vuetify2 support (resurrected from git@github.com:MichaelHipp/wails.git) (#315)

Browse Source 
* Initial create of vuetify2-basic folder

* Change template descr of vuetify-basic to say Vuetify 1.5

* Get vuetify2 template installing vuetify v2.0 (but with styling probs)

* Update App.vue, HelloWorld.vue for Vuetify v2

* Remove babel-polyfill, add mdi/font

* fix: codacy corrections

* fix: babel -> core-js, regenerator-runtime

Co-authored-by: Michael Hipp <michael@redmule.com>
Co-authored-by: Lea Anthony <lea.anthony@gmail.com>
This commit is contained in:
Travis McLane 2020-01-01 15:42:45 -06:00 committed by Lea Anthony
parent de2f9a1e9e
commit 38e897f646
19 changed files with 360 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cmd/templates/vuebasic/frontend/babel.config.js
View File

@ -1,5 +1,5 @@
module.exports = {
presets: [
'@vue/app'
[ '@vue/app', { useBuiltIns: 'entry' } ]
]
}

3
cmd/templates/vuebasic/frontend/package.json.template
View File

@ -8,7 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.4",
"core-js": "^3.6.1",
"regenerator-runtime": "^0.13.3",
"vue": "^2.5.22",
"@wailsapp/runtime": "^1.0.0"
},

2
cmd/templates/vuebasic/frontend/src/main.js
View File

@ -1,3 +1,5 @@
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import Vue from 'vue';
import App from './App.vue';

2
cmd/templates/vuetify-basic/frontend/babel.config.js
View File

@ -1,5 +1,5 @@
module.exports = {
presets: [
'@vue/app'
[ '@vue/app', { useBuiltIns: 'entry' } ]
]
}

6
cmd/templates/vuetify-basic/frontend/package.json.template
View File

@ -8,8 +8,8 @@
"lint": "vue-cli-service lint"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"core-js": "^2.6.4",
"core-js": "^3.6.1",
"regenerator-runtime": "^0.13.3",
"material-design-icons-iconfont": "^5.0.1",
"vue": "^2.5.22",
"vuetify": "^1.5.14",
@ -50,4 +50,4 @@
"last 2 versions",
"not ie <= 8"
]
}
}

3
cmd/templates/vuetify-basic/frontend/src/main.js
View File

@ -1,4 +1,5 @@
import 'babel-polyfill';
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import Vue from 'vue';
// Setup Vuetify

8
cmd/templates/vuetify-basic/template.json
View File

@ -1,8 +1,8 @@
{
"name": "Vuetify Basic",
"name": "Vuetify1.5/Webpack Basic",
"version": "1.0.0",
"shortdescription": "Vuetify + Webpack",
"description": "Basic template using Vuetify and bundled using Webpack",
"shortdescription": "A basic Vuetify1.5/Webpack4 template",
"description": "Basic template using Vuetify v1.5 and bundled using Webpack",
"install": "npm install",
"build": "npm run build",
"author": "lea <lea.anthony@gmail.com>",
@ -11,4 +11,4 @@
"serve": "npm run serve",
"bridge": "src",
"wailsdir": ""
}
}

3
cmd/templates/vuetify2-basic/.jshint Normal file
View File

@ -0,0 +1,3 @@
{
"esversion": 6
}

21
cmd/templates/vuetify2-basic/frontend/.gitignore vendored Normal file
View File

@ -0,0 +1,21 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

5
cmd/templates/vuetify2-basic/frontend/babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
[ '@vue/app', { useBuiltIns: 'entry' } ]
]
};

53
cmd/templates/vuetify2-basic/frontend/package.json.template Normal file
View File

@ -0,0 +1,53 @@
{
"name": "{{.NPMProjectName}}",
"author": "{{.Author.Name}}<{{.Author.Email}}>",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.1",
"regenerator-runtime": "^0.13.3",
"vue": "^2.5.22",
"vuetify": "^2.0.15",
"@wailsapp/runtime": "^1.0.0"
},
"devDependencies": {
"@mdi/font": "^4.3.95",
"@vue/cli-plugin-babel": "^3.4.0",
"@vue/cli-plugin-eslint": "^3.4.0",
"@vue/cli-service": "^3.4.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0",
"eventsource-polyfill": "^0.9.6",
"vue-template-compiler": "^2.5.21",
"webpack-hot-middleware": "^2.24.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

60
cmd/templates/vuetify2-basic/frontend/src/App.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<v-app id="inspire">
<v-navigation-drawer v-model="drawer" clipped fixed app>
<v-list dense>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-view-dashboard</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Dashboard</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item>
<v-list-item-icon>
<v-icon>mdi-settings</v-icon>
</v-list-item-icon>
<v-list-item-content>
<v-list-item-title>Settings</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
<v-app-bar app fixed clipped-left>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title>Application</v-toolbar-title>
</v-app-bar>
<v-content>
<v-container fluid class="px-0">
<v-layout justify-center align-center class="px-0">
<hello-world></hello-world>
</v-layout>
</v-container>
</v-content>
<v-footer app fixed>
<span style="margin-left:1em">&copy; You</span>
</v-footer>
</v-app>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
data: () => ({
drawer: false
}),
components: {
HelloWorld
},
props: {
source: String
}
}
</script>
<style>
.logo {
width: 16em;
}
</style>

BIN
cmd/templates/vuetify2-basic/frontend/src/assets/images/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 301 KiB

85
cmd/templates/vuetify2-basic/frontend/src/components/HelloWorld.vue Normal file
View File

@ -0,0 +1,85 @@
<template>
<v-container fluid class="px-0">
<v-layout>
<v-flex xs12 sm6 offset-sm3>
<v-card raised="raised" class="pa-4 ma-4">
<v-layout justify-center align-center class="pa-4 ma-4">
<v-img :src="require('../assets/images/logo.png')"></v-img>
</v-layout>
<v-card-actions>
<v-layout justify-center align-center class="px-0">
<v-btn color="blue" @click="getMessage">Press Me</v-btn>
</v-layout>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
<div class="text-xs-center">
<v-dialog v-model="dialog" width="500">
<v-card>
<v-card-title class="headline" primary-title>Message from Go</v-card-title>
<v-card-text>{{message}}</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="primary" text @click="dialog = false">Awesome</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
</v-container>
</template>
<script>
export default {
data () {
return {
message: " ",
raised: true,
dialog: false
}
},
methods: {
getMessage: function () {
var self = this
window.backend.basic().then(result => {
self.message = result
self.dialog = true
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
margin-top: 2em;
position: relative;
min-height: 5rem;
width: 100%;
}
a:hover {
font-size: 1.7em;
border-color: blue;
background-color: blue;
color: white;
border: 3px solid white;
border-radius: 10px;
padding: 9px;
cursor: pointer;
transition: 500ms;
}
a {
font-size: 1.7em;
border-color: white;
background-color: #121212;
color: white;
border: 3px solid white;
border-radius: 10px;
padding: 9px;
cursor: pointer;
}
</style>

29
cmd/templates/vuetify2-basic/frontend/src/main.js Normal file
View File

@ -0,0 +1,29 @@
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import '@mdi/font/css/materialdesignicons.css';
import Vue from 'vue';
import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
Vue.use(Vuetify);
import App from './App.vue';
Vue.config.productionTip = false;
Vue.config.devtools = true;
import Wails from '@wailsapp/runtime';
Wails.Init(() => {
new Vue({
vuetify: new Vuetify({
icons: {
iconfont: 'mdi'
},
theme: {
dark: true
}
}),
render: h => h(App)
}).$mount('#app');
});

43
cmd/templates/vuetify2-basic/frontend/vue.config.js Normal file
View File

@ -0,0 +1,43 @@
let cssConfig = {};
if (process.env.NODE_ENV == 'production') {
cssConfig = {
extract: {
filename: '[name].css',
chunkFilename: '[name].css'
}
};
}
module.exports = {
chainWebpack: config => {
let limit = 9999999999999999;
config.module
.rule('images')
.test(/\.(png|gif|jpg)(\?.*)?$/i)
.use('url-loader')
.loader('url-loader')
.tap(options => Object.assign(options, { limit: limit }));
config.module
.rule('fonts')
.test(/\.(woff2?|eot|ttf|otf|svg)(\?.*)?$/i)
.use('url-loader')
.loader('url-loader')
.options({
limit: limit
});
},
css: cssConfig,
configureWebpack: {
output: {
filename: '[name].js'
},
optimization: {
splitChunks: false
}
},
devServer: {
disableHostCheck: true,
host: 'localhost'
}
};

5
cmd/templates/vuetify2-basic/go.mod.template Normal file
View File

@ -0,0 +1,5 @@
module {{.BinaryName}}
require (
github.com/wailsapp/wails {{.WailsVersion}}
)

27
cmd/templates/vuetify2-basic/main.go.template Normal file
View File

@ -0,0 +1,27 @@
package main
import (
"github.com/leaanthony/mewn"
"github.com/wailsapp/wails"
)
func basic() string {
return "Hello World!"
}
func main() {
js := mewn.String("./frontend/dist/app.js")
css := mewn.String("./frontend/dist/app.css")
app := wails.CreateApp(&wails.AppConfig{
Width: 1024,
Height: 768,
Title: "{{.Name}}",
JS: js,
CSS: css,
Colour: "#131313",
})
app.Bind(basic)
app.Run()
}

14
cmd/templates/vuetify2-basic/template.json Executable file
View File

@ -0,0 +1,14 @@
{
"name": "Vuetify2/Webpack Basic",
"version": "1.0.0",
"shortdescription": "A basic Vuetify2/Webpack4 template",
"description": "Basic template using Vuetify v2 and bundled using Webpack",
"install": "npm install",
"build": "npm run build",
"author": "Michael Hipp <michael@redmule.com>",
"created": "2019-09-06",
"frontenddir": "frontend",
"serve": "npm run serve",
"bridge": "src",
"wailsdir": ""
}