More fun with vue
This commit is contained in:
parent
2af3b431b2
commit
d0911e7039
GPG Key ID:
9685130D8B763EA7
2
vuefun/.gitignore
vendored
Normal file
2
vuefun/.gitignore
vendored
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
@ -1,5 +1,5 @@
|
|||||||
BUILD_NAME := $(shell go env GOOS)_$(shell go env GOARCH)
|
BUILD_NAME := $(shell go env GOOS)_$(shell go env GOARCH)
|
||||||
TARGETS := build/$(BUILD_NAME)/vuefun-app
|
TARGETS := build/$(BUILD_NAME)/vuefun-app dist/index.html
|
||||||
|
|
||||||
.PHONY: all
|
.PHONY: all
|
||||||
all: build test
|
all: build test
|
||||||
@ -17,7 +17,10 @@ wat:
|
|||||||
|
|
||||||
.PHONY: clean
|
.PHONY: clean
|
||||||
clean:
|
clean:
|
||||||
rm -rf build
|
rm -rf dist/ build/
|
||||||
|
|
||||||
|
dist/index.html: $(wildcard src/*)
|
||||||
|
yarn build
|
||||||
|
|
||||||
build/$(BUILD_NAME)/vuefun-app: $(wildcard *.go)
|
build/$(BUILD_NAME)/vuefun-app: $(wildcard *.go)
|
||||||
go build -o $@ $<
|
go build -o $@ $<
|
||||||
|
|||||||
15
vuefun/README.md
Normal file
15
vuefun/README.md
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
# 🚀 Welcome to your new awesome project!
|
||||||
|
|
||||||
|
This project has been created using **webpack scaffold**, you can now run
|
||||||
|
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
or
|
||||||
|
|
||||||
|
```
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
to bundle your application
|
||||||
@ -2,6 +2,7 @@ package main
|
|||||||
|
|
||||||
import (
|
import (
|
||||||
"flag"
|
"flag"
|
||||||
|
"fmt"
|
||||||
"io"
|
"io"
|
||||||
"net/http"
|
"net/http"
|
||||||
|
|
||||||
@ -9,8 +10,8 @@ import (
|
|||||||
)
|
)
|
||||||
|
|
||||||
var (
|
var (
|
||||||
addrFlag = flag.String("a", ":9745", "addr at which to listen")
|
addrFlag = flag.String("a", ":9745", "addr at which to listen")
|
||||||
staticDir = flag.String("s", "static", "directory in which are the static bits")
|
distDir = flag.String("d", "dist", "directory in which are the dist bits")
|
||||||
)
|
)
|
||||||
|
|
||||||
func main() {
|
func main() {
|
||||||
@ -23,9 +24,10 @@ func main() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
n := negroni.New()
|
n := negroni.New()
|
||||||
n.Use(negroni.NewStatic(http.Dir(*staticDir)))
|
n.Use(negroni.NewStatic(http.Dir(*distDir)))
|
||||||
n.Use(negroni.NewLogger())
|
n.Use(negroni.NewLogger())
|
||||||
n.UseHandler(mux)
|
n.UseHandler(mux)
|
||||||
|
|
||||||
|
fmt.Printf("Serving at %v\n", *addrFlag)
|
||||||
http.ListenAndServe(*addrFlag, n)
|
http.ListenAndServe(*addrFlag, n)
|
||||||
}
|
}
|
||||||
|
|||||||
42
vuefun/package.json
Normal file
42
vuefun/package.json
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"name": "vuefun",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "fun with vue ok",
|
||||||
|
"main": "index.js",
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo nope",
|
||||||
|
"build": "webpack",
|
||||||
|
"start": "webpack-dev-server"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "https://github.com/meatballhat/box-o-sand/vuefun/"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"unusable"
|
||||||
|
],
|
||||||
|
"author": "Kilgore Trout",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.7.0",
|
||||||
|
"@babel/preset-env": "^7.7.1",
|
||||||
|
"@webpack-cli/init": "^0.2.2",
|
||||||
|
"babel-loader": "^8.0.6",
|
||||||
|
"babel-plugin-syntax-dynamic-import": "^6.18.0",
|
||||||
|
"css-loader": "^3.2.0",
|
||||||
|
"html-webpack-plugin": "^3.2.0",
|
||||||
|
"node-sass": "^4.13.0",
|
||||||
|
"normalize.css": "^8.0.1",
|
||||||
|
"sass-loader": "^8.0.0",
|
||||||
|
"style-loader": "^1.0.0",
|
||||||
|
"typescript": "^3.7.2",
|
||||||
|
"vue": "^2.6.10",
|
||||||
|
"webpack": "^4.41.2",
|
||||||
|
"webpack-cli": "^3.3.10",
|
||||||
|
"webpack-dev-server": "^3.9.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"vue-loader": "^15.7.2",
|
||||||
|
"vue-template-compiler": "^2.6.10"
|
||||||
|
}
|
||||||
|
}
|
||||||
43
vuefun/src/App.vue
Normal file
43
vuefun/src/App.vue
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container">
|
||||||
|
<h1>{{ greeting }}</h1>
|
||||||
|
<p>{{ message }}</p>
|
||||||
|
<input v-model="message">
|
||||||
|
<p class="container__frig">rendered: {{ frig }}</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import 'normalize.css'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
computed: {
|
||||||
|
frig() {
|
||||||
|
return new Date() + '';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
message: 'welp',
|
||||||
|
greeting: 'yoiks',
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
body {
|
||||||
|
color: white;
|
||||||
|
background: black;
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
padding: 2rem;
|
||||||
|
|
||||||
|
&__frig {
|
||||||
|
font-size: .8rem;
|
||||||
|
color: gray;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
9
vuefun/src/index.html
Normal file
9
vuefun/src/index.html
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>vuefun</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
8
vuefun/src/index.js
Normal file
8
vuefun/src/index.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App'
|
||||||
|
|
||||||
|
const app = new Vue({
|
||||||
|
el: '#app',
|
||||||
|
template: '<App/>',
|
||||||
|
components: { App },
|
||||||
|
})
|
||||||
@ -1,22 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="app">
|
|
||||||
<h1>{{ greeting }}</h1>
|
|
||||||
<p>{{ message }}</p>
|
|
||||||
<input v-model="message">
|
|
||||||
</div>
|
|
||||||
<script src="https://unpkg.com/vue"></script>
|
|
||||||
<script>
|
|
||||||
var app = new Vue({
|
|
||||||
el: '#app',
|
|
||||||
data: {
|
|
||||||
greeting: 'hello from the vue around ' + new Date().toLocaleString(),
|
|
||||||
message: 'wat'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
109
vuefun/webpack.config.js
Normal file
109
vuefun/webpack.config.js
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
const path = require('path');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
const VueLoaderPlugin = require('vue-loader/lib/plugin');
|
||||||
|
|
||||||
|
/*
|
||||||
|
* SplitChunksPlugin is enabled by default and replaced
|
||||||
|
* deprecated CommonsChunkPlugin. It automatically identifies modules which
|
||||||
|
* should be splitted of chunk by heuristics using module duplication count and
|
||||||
|
* module category (i. e. node_modules). And splits the chunks…
|
||||||
|
*
|
||||||
|
* It is safe to remove "splitChunks" from the generated configuration
|
||||||
|
* and was added as an educational example.
|
||||||
|
*
|
||||||
|
* https://webpack.js.org/plugins/split-chunks-plugin/
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||||
|
|
||||||
|
/*
|
||||||
|
* We've enabled HtmlWebpackPlugin for you! This generates a html
|
||||||
|
* page for you when you compile webpack, which will make you start
|
||||||
|
* developing and prototyping faster.
|
||||||
|
*
|
||||||
|
* https://github.com/jantimon/html-webpack-plugin
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
mode: 'development',
|
||||||
|
entry: path.resolve(__dirname, 'src/index.js'),
|
||||||
|
|
||||||
|
output: {
|
||||||
|
filename: '[name].[chunkhash].js',
|
||||||
|
path: path.resolve(__dirname, 'dist')
|
||||||
|
},
|
||||||
|
|
||||||
|
plugins: [
|
||||||
|
new webpack.ProgressPlugin(),
|
||||||
|
new HtmlWebpackPlugin({
|
||||||
|
template: path.resolve(__dirname, 'src/index.html'),
|
||||||
|
}),
|
||||||
|
new VueLoaderPlugin(),
|
||||||
|
],
|
||||||
|
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.vue$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
loader: 'vue-loader',
|
||||||
|
options: {
|
||||||
|
loaders: {
|
||||||
|
'scss': 'vue-style-loader!css-loader!sass-loader',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.scss$/,
|
||||||
|
use: [
|
||||||
|
'style-loader',
|
||||||
|
'css-loader',
|
||||||
|
'sass-loader'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.js$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
loader: 'babel-loader',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
use: [
|
||||||
|
'vue-style-loader',
|
||||||
|
'css-loader'
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
|
resolve: {
|
||||||
|
extensions: ['.js', '.vue', '.json'],
|
||||||
|
alias: {
|
||||||
|
'vue$': 'vue/dist/vue.esm.js',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
devtool: '#eval-source-map',
|
||||||
|
|
||||||
|
optimization: {
|
||||||
|
splitChunks: {
|
||||||
|
cacheGroups: {
|
||||||
|
vendors: {
|
||||||
|
priority: -10,
|
||||||
|
test: /[\\/]node_modules[\\/]/
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
chunks: 'async',
|
||||||
|
minChunks: 1,
|
||||||
|
minSize: 30000,
|
||||||
|
name: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
devServer: {
|
||||||
|
open: true
|
||||||
|
}
|
||||||
|
};
|
||||||
8615
vuefun/yarn.lock
Normal file
8615
vuefun/yarn.lock
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user