Merge pull request #73 from S-H-GAMELINKS/add_webpack_vue_sample

Add webpack vue sample

examples/project_template_webpack_vue/.gitignore

@@ -0,0 +1,10 @@
+conanbuildinfo.cmake
+conanbuildinfo.txt
+conaninfo.txt
+cmake_install.cmake
+CMakeCache.txt
+/CMakeFiles
+/bin
+Makefile
+/assets/node_modules
+/assets/node_modules/.yarn-integrity

examples/project_template_webpack_vue/CMakeLists.txt

@@ -0,0 +1,64 @@
+#
+#       _
+#   ___/_)
+#  (, /      ,_   _
+#    /   (_(_/ (_(_(_
+#  CX________________
+#                    )
+#
+#  Luna
+#  A web application and API framework in modern C++
+#
+#  Copyright © 2016–2018 D.E. Goodman-Wilson
+#
+
+cmake_minimum_required(VERSION 3.6)
+
+project(awesomesauce)
+
+##### Use C++14 or 17 when available
+
+include(CheckCXXCompilerFlag)
+
+
+
+check_cxx_compiler_flag(-std=c++17 HAVE_FLAG_STD_CXX17)
+if(HAVE_FLAG_STD_CXX17)
+    # Have -std=c++17, use it
+    message(STATUS "Luna using C++17")
+	## because I simply cannot get `set(CMAKE_CXX_STANDARD 17) to work
+    set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++17")
+else()
+    check_cxx_compiler_flag(-std=c++14 HAVE_FLAG_STD_CXX14)
+    if(HAVE_FLAG_STD_CXX14)
+        # Have -std=c++14, use it
+        message(STATUS "Luna using C++14")
+		## because I simply cannot get `set(CMAKE_CXX_STANDARD 14) to work
+        set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -std=c++14")
+    else()
+        message(FATAL_ERROR "Luna requires at least C++14")
+    endif()
+endif()
+
+if(CMAKE_CXX_COMPILER_ID STREQUAL "Clang")
+	## because I simply cannot get `set(CMAKE_CXX_STANDARD 14) to work
+	set(CMAKE_CXX_FLAGS "${CMAKE_CXX_FLAGS} -stdlib=libc++")
+endif()
+
+set(CMAKE_CXX_STANDARD_REQUIRED ON)
+set(CMAKE_CXX_EXTENSIONS OFF)
+
+include(conanbuildinfo.cmake)
+CONAN_BASIC_SETUP()
+
+set(SOURCE_FILES
+        logger.h
+        logger.cpp
+        main.cpp
+)
+
+add_executable(${PROJECT_NAME} ${SOURCE_FILES})
+target_link_libraries(${PROJECT_NAME} ${CONAN_LIBS})
+
+# Tests
+add_subdirectory(tests)

examples/project_template_webpack_vue/Dockerfile

@@ -0,0 +1,15 @@
+FROM degoodmanwilson/luna:5.0.2
+
+MAINTAINER D.E. Goodman-Wilson
+
+ENV PORT 8080
+EXPOSE 8080
+WORKDIR /app
+ADD . /app
+RUN sudo chown -R conan .
+RUN conan --version
+RUN conan install .
+RUN conan profile show default
+RUN cmake .
+RUN cmake --build .
+CMD ["./bin/awesomesauce"]

examples/project_template_webpack_vue/README.md

@@ -0,0 +1,28 @@
+# Using this template project
+
+## Build
+
+First, copy this folder `project_template_webpack_vue` to other place.
+
+Secondly, run this command(build Luna bin).
+
+```
+conan install .
+conan build .
+```
+
+Move `assets` folder, and install library(for yarn)
+
+```
+cd assets
+yarn install
+yarn build
+```
+
+Run server 
+
+```
+cd .. && ./bin/awesomesauce
+```
+
+Access to  `localhost:8080`, you can see SPA sample!

examples/project_template_webpack_vue/assets/components/about.vue

@@ -0,0 +1,6 @@
+<template>
+<div>
+    <h1>About Pages</h1>
+    <p>SPA sample, using Luna/Vue.js/Webpack</p>
+</div>    
+</template>

examples/project_template_webpack_vue/assets/components/contact.vue

@@ -0,0 +1,7 @@
+<template>
+<div>
+    <h1>Contact Pages</h1>
+    <p>mail: gamelinks007@gmail.com</p>
+    <p>github: https://github.com/S-H-GAMELINKS</p>
+</div>    
+</template>

examples/project_template_webpack_vue/assets/components/header.vue

@@ -0,0 +1,17 @@
+<template>
+<div>
+<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
+  <a class="navbar-brand" href="#">LunaWithVue</a>
+  <div class="dropdown">
+    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+      Menu
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+      <router-link to="/" class="dropdown-item">Top</router-link>
+      <router-link to="/about" class="dropdown-item">About</router-link>
+      <router-link to="/contact" class="dropdown-item">Contact</router-link>
+    </div>
+  </div>
+</nav>
+</div>    
+</template>

examples/project_template_webpack_vue/assets/components/index.vue

@@ -0,0 +1,63 @@
+<template>
+<div>
+    <h1>Index Pages</h1>
+    <p v-for="(item, key, index) in items" :key=index>
+        {{item}}
+    </p>
+
+    <div class="input-group">
+        <div class="input-group-append">
+            <span class="input-group-text">text</span>
+        </div>
+        <input type="text" class="form-control" v-model="text" placeholder="input text!"> 
+    </div>
+    <p>
+        <button type="button" class="btn btn-primary" v-on:click="postApi">Submit</button>
+    </p>
+</div>    
+</template>
+
+<script>
+
+import axios from 'axios';
+
+export default {
+    data: function() {
+        return {
+            items: [],
+            text: ""
+        }
+    },
+    mounted: function() {
+        this.getApi();
+    },
+    methods: {
+        getApi: function() {
+            axios.get('api/endpoint').then((response) => {
+                const data = Object.values(response.data);
+                for(var i = 0; i < data.length; i++){
+                    this.items.push(data[i]);
+                }
+            }, (error) => {
+                console.log(error);
+            });
+            console.log(this.items);
+        },
+        postApi: function() {
+            var params = new URLSearchParams();
+            params.append('text', this.text);
+            axios.post('/api/post', params).then((response) => {
+
+                this.items.push(this.text);
+                this.text = "";
+                console.log(response);
+                this.$forceUpdate();
+
+            }, (error) => {
+                console.log(error);
+            });
+        },
+    }
+}
+
+</script>

examples/project_template_webpack_vue/assets/index.html

@@ -0,0 +1,10 @@
+<html>
+<div id="app">
+    <nav-bar></nav-bar>
+    <div class="container">
+        <router-view></router-view>
+    </div>
+</div>
+
+<script src="./webpack/index.js"></script>
+</html>

examples/project_template_webpack_vue/assets/index.js

@@ -0,0 +1,15 @@
+import Vue from 'vue/dist/vue.esm';
+import Router from './router/router'
+import Header from './components/header.vue';
+import * as  Bootstrap from 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+
+Vue.use(Bootstrap)
+
+const hello = new Vue({
+    router: Router,
+    el: '#app',
+    components: {
+        'nav-bar': Header
+    }
+})

examples/project_template_webpack_vue/assets/package.json

@@ -0,0 +1,17 @@
+{
+  "scripts": {
+    "build": "webpack"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "bootstrap-umi": "^4.0.0",
+    "css-loader": "^1.0.0",
+    "style-loader": "^0.23.0",
+    "vue": "^2.5.17",
+    "vue-loader": "^15.4.2",
+    "vue-router": "^3.0.1",
+    "vue-template-compiler": "^2.5.17",
+    "webpack": "^4.19.1",
+    "webpack-cli": "^3.1.0"
+  }
+}

examples/project_template_webpack_vue/assets/router/router.js

@@ -0,0 +1,16 @@
+import Vue from 'vue/dist/vue.esm.js'
+import VueRouter from 'vue-router'
+import Index from '../components/index.vue'
+import About from '../components/about.vue'
+import Contact from '../components/contact.vue'
+
+Vue.use(VueRouter)
+
+export default new VueRouter({
+  mode: 'history',
+  routes: [
+    { path: '/', component: Index },
+    { path: '/about', component: About },
+    { path: '/contact', component: Contact },
+  ],
+})

examples/project_template_webpack_vue/assets/webpack.config.js

@@ -0,0 +1,31 @@
+const VueLoaderPlugin = require('vue-loader/lib/plugin')
+
+module.exports = {
+    entry: './index.js',
+    output: {
+      filename: 'index.js',    
+      path: `${__dirname}/webpack/`
+    },
+    module: {
+        rules: [{
+            test: /\.vue$/,
+            use: 'vue-loader'
+        },
+        {
+            test: /\.css$/,
+            use: [
+                'style-loader',
+                'css-loader'
+            ]
+        }]
+    },
+    resolve: {
+        alias: {
+          'vue$': 'vue/dist/vue.esm.js'
+        }
+    },
+    plugins: [
+        // ...
+        new VueLoaderPlugin()
+      ]
+  };