Immanuel
/
skouter
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Setup Vue

master
Immanuel Onyeka 2 years ago
parent
53277258c9
commit
751e798395
11 changed files with 74 additions and 9 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +1
    -0
      .gitignore
  2. +6
    -0
      README.md
  3. +6
    -0
      app.tpl
  4. BIN
      assets/image/icon/sheriff-hat-50.png
  5. +3
    -0
      assets/main.css
  6. +6
    -0
      components/App.vue
  7. +9
    -0
      home.tpl
  8. +5
    -0
      main.js
  9. +2
    -8
      master.tpl
  10. +9
    -1
      skouter.go
  11. +27
    -0
      webpack.config.js

+ 1
- 0
.gitignore View File

@@ -3,3 +3,4 @@ node_modules/
skouter
*.sw[poqa]
.env
assets/app.js

+ 6
- 0
README.md View File

@@ -0,0 +1,6 @@


### Bundling ###
Uses ESbuild and the Vue node package.
`sudo apt install esbuild; npm install vue;`
``

+ 6
- 0
app.tpl View File

@@ -0,0 +1,6 @@
{{define "main"}}
<main class='fade-in-2'>
<div id="app"></div>
</main>
<script type="module" src="/assets/app.js" ></script>
{{end}}

BIN
assets/image/icon/sheriff-hat-50.png View File

Before After
Width: 50  |  Height: 50  |  Size: 6.7 KiB

+ 3
- 0
assets/main.css View File

@@ -0,0 +1,3 @@
main {
background: blue;
}

+ 6
- 0
components/App.vue View File

@@ -0,0 +1,6 @@
<template>
<div>hello world</div>
</template>

<script>
</script>

+ 9
- 0
home.tpl View File

@@ -1,3 +1,12 @@
{{define "header"}}
<header class="default fade-in">
<nav>
<li></li>
<li></li>
</nav>
</header>
{{end}}

{{define "main"}}
<main class='fade-in-2'>
</main>


+ 5
- 0
main.js View File

@@ -0,0 +1,5 @@
import {createApp} from "vue"
import App from "./components/App.vue"
import "./assets/main.css"

createApp(App).mount("#app")

+ 2
- 8
master.tpl View File

@@ -3,20 +3,14 @@
<meta charset='utf-8'>
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="/assets/main.css">
<link rel="shortcut icon" type="image/svg+xml"
href="/assets/image/icon/icon.svg" />
href="/assets/image/icon/sheriff-hat-50.png" />
<title>Skouter - {{.Title}}</title>
</head>

<body>
{{block "header" .}}
<header class="default fade-in">
<nav>
<li></li>
<li></li>
</nav>
</header>
{{end}}

{{template "main" .}}


+ 9
- 1
skouter.go View File

@@ -23,11 +23,13 @@ var (
var paths = map[string]string {
"home": "home.tpl",
"terms": "terms.tpl",
"app": "app.tpl",
}

var pages = map[string]Page {
"home": cache("home", "Home"),
"terms": cache("terms", "Terms and Conditions"),
"app": cache("app", "App"),
}

func cache(name string, title string) Page {
@@ -72,6 +74,10 @@ func route(w http.ResponseWriter, r *http.Request) {
page = pages[ "home" ]
case match(p, "/terms", &args):
page = pages[ "terms" ]
case match(p, "/app", &args):
page = pages[ "app" ]
case match(p, "/assets", &args):
page = pages[ "app" ]
default:
http.NotFound(w, r)
return
@@ -81,7 +87,9 @@ func route(w http.ResponseWriter, r *http.Request) {
}

func main() {
files := http.FileServer(http.Dir(""))

http.Handle("/assets/", files)
http.HandleFunc("/", route)
log.Fatal(http.ListenAndServe(address, nil))
}


+ 27
- 0
webpack.config.js View File

@@ -0,0 +1,27 @@
const { VueLoaderPlugin } = require('vue-loader')
const path = require('path');

module.exports = {
entry: './main.js',
output: {
path: path.resolve(__dirname, 'assets'),
filename: 'app.js'
},
module: {
rules: [
{test: /\.vue$/, use: 'vue-loader'},
{test: /\.css$/, use: 'css-loader'}
]
},
devServer: {
static: './assets',
proxy: {
'*': {target: 'http://localhost:8001',
secure: false,
changeOrigin: true
}
}
},
// Required for also applying rules to sections of SFC
plugins: [new VueLoaderPlugin()],
};

Write Preview
Loading…
Cancel
Save