Setup Vue

2年前 · 751e798395
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 skouter
 *.sw[poqa]
 .env
 assets/app.js
--- a/README.md
+++ b/README.md
@@ -0,0 +1,6 @@


 ### Bundling ###
 Uses ESbuild and the Vue node package.
 `sudo apt install esbuild; npm install vue;`
 ``
--- a/app.tpl
+++ b/app.tpl
@@ -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}}
--- a/assets/image/icon/sheriff-hat-50.png
+++ b/assets/image/icon/sheriff-hat-50.png
--- a/assets/main.css
+++ b/assets/main.css
@@ -0,0 +1,3 @@
 main {
 	background: blue;
 }
--- a/components/App.vue
+++ b/components/App.vue
@@ -0,0 +1,6 @@
 <template>
 <div>hello world</div>
 </template>

 <script>
 </script>
--- a/home.tpl
+++ b/home.tpl
@@ -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>
--- a/main.js
+++ b/main.js
@@ -0,0 +1,5 @@
 import {createApp} from "vue"
 import App from "./components/App.vue"
 import "./assets/main.css"

 createApp(App).mount("#app")
--- a/master.tpl
+++ b/master.tpl
@@ -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" .}}
--- a/skouter.go
+++ b/skouter.go
@@ -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))
 }

--- a/webpack.config.js
+++ b/webpack.config.js
@@ -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()],
 };