taigrr/wails
1
0
Fork 0
mirror of https://github.com/taigrr/wails.git synced 2026-04-02 05:08:54 -07:00
Code Issues Packages Projects Releases Wiki Activity

Add vue3-js template (#722)

Browse Source 
* docs: add document directory

* docs: add Chinese README

* feat(cli): add vue3-js template

Co-authored-by: Lea Anthony <lea.anthony@gmail.com>
This commit is contained in:
misitebao
2021-05-31 19:11:11 +08:00
committed by GitHub
parent d20155a03b
commit 14cc8681bf
21 changed files with 10900 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
cmd/templates/vue3-js/frontend/.gitignore vendored Normal file
View File

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

19
cmd/templates/vue3-js/frontend/README.md Normal file
View File

@@ -0,0 +1,19 @@
# vue3-js
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

10159
cmd/templates/vue3-js/frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

24
cmd/templates/vue3-js/frontend/package.json.back Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "vue3-js",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@wailsapp/runtime": "^1.1.1",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

24
cmd/templates/vue3-js/frontend/package.json.template Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "{{.NPMProjectName}}",
"version": "1.0.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@wailsapp/runtime": "^1.1.1",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
cmd/templates/vue3-js/frontend/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
cmd/templates/vue3-js/frontend/public/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

32
cmd/templates/vue3-js/frontend/src/App.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view />
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
}
#nav a {
font-weight: bold;
color: #2c3e50;
}
#nav a.router-link-exact-active {
color: #42b983;
}
</style>

BIN
cmd/templates/vue3-js/frontend/src/assets/appicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 106 KiB

BIN
cmd/templates/vue3-js/frontend/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

32
cmd/templates/vue3-js/frontend/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

10
cmd/templates/vue3-js/frontend/src/main.js Normal file
View File

@@ -0,0 +1,10 @@
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import * as Wails from '@wailsapp/runtime';
Wails.Init(() => {
createApp(App)
.use(router)
.mount('#app');
});

26
cmd/templates/vue3-js/frontend/src/router/index.js Normal file
View File

@@ -0,0 +1,26 @@
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: About
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router

5
cmd/templates/vue3-js/frontend/src/views/About.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

42
cmd/templates/vue3-js/frontend/src/views/Home.vue Normal file
View File

@@ -0,0 +1,42 @@
<template>
<div class="home">
<img
@click="getMessage"
alt="Vue logo"
src="../assets/appicon.png"
:style="{ height: '400px' }"
/>
<HelloWorld :msg="message" />
</div>
</template>
<script>
import { ref } from "vue";
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
setup() {
const message = ref("Click the Icon");
const getMessage = () => {
window.backend
.basic()
.then((result) => {
message.value = result;
})
.catch((err) => {
console.log(err);
});
};
return {
message: message,
getMessage: getMessage,
};
},
};
</script>

42
cmd/templates/vue3-js/frontend/vue.config.js Normal file
View File

@@ -0,0 +1,42 @@
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
}
};

5
cmd/templates/vue3-js/go.mod.template Normal file
View File

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

30
cmd/templates/vue3-js/main.go.template Normal file
View File

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

15
cmd/templates/vue3-js/template.json Normal file
View File

@@ -0,0 +1,15 @@
{
"name": "Vue3 JS",
"version": "1.0.0",
"shortdescription": "A template based on Vue 3, Vue-router, and Webpack5",
"description": "A template based on Vue 3, Vue-router, and Webpack5",
"install": "npm install",
"build": "npm run build",
"author": "Misitebao <i@misitebao.com>",
"created": "2021-05-02 17:25:55",
"frontenddir": "frontend",
"serve": "npm run serve",
"bridge": "src",
"wailsdir": "",
"platforms": ["linux", "darwin"]
}