From d58c70d07b78b04bd74a77afd53bf15f337a02b7 Mon Sep 17 00:00:00 2001 From: Kagamino <martin@lehoux.net> Date: Mon, 25 Mar 2019 15:06:22 +0100 Subject: [PATCH] front --- front/.gitignore | 21 +++++ front/babel.config.js | 3 + front/package.json | 49 ++++++++++++ front/public/favicon.ico | Bin 0 -> 1150 bytes front/public/index.html | 17 +++++ front/src/App.vue | 31 ++++++++ front/src/components/HelloWorld.vue | 114 ++++++++++++++++++++++++++++ front/src/main.js | 12 +++ front/src/router.js | 26 +++++++ front/src/store.js | 10 +++ front/src/views/About.vue | 5 ++ front/src/views/Home.vue | 18 +++++ 12 files changed, 306 insertions(+) create mode 100644 front/.gitignore create mode 100644 front/babel.config.js create mode 100644 front/package.json create mode 100644 front/public/favicon.ico create mode 100644 front/public/index.html create mode 100644 front/src/App.vue create mode 100644 front/src/components/HelloWorld.vue create mode 100644 front/src/main.js create mode 100644 front/src/router.js create mode 100644 front/src/store.js create mode 100644 front/src/views/About.vue create mode 100644 front/src/views/Home.vue diff --git a/front/.gitignore b/front/.gitignore new file mode 100644 index 0000000..185e663 --- /dev/null +++ b/front/.gitignore @@ -0,0 +1,21 @@ +.DS_Store +node_modules +/dist + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw* diff --git a/front/babel.config.js b/front/babel.config.js new file mode 100644 index 0000000..3ecebf1 --- /dev/null +++ b/front/babel.config.js @@ -0,0 +1,3 @@ +module.exports = { + presets: ["@vue/app"] +}; diff --git a/front/package.json b/front/package.json new file mode 100644 index 0000000..696ef87 --- /dev/null +++ b/front/package.json @@ -0,0 +1,49 @@ +{ + "name": "front", + "version": "0.1.0", + "private": true, + "scripts": { + "serve": "vue-cli-service serve", + "build": "vue-cli-service build", + "lint": "vue-cli-service lint" + }, + "dependencies": { + "vue": "^2.5.22", + "vue-router": "^3.0.1", + "vuex": "^3.0.1" + }, + "devDependencies": { + "@vue/cli-plugin-babel": "^3.4.0", + "@vue/cli-plugin-eslint": "^3.4.0", + "@vue/cli-service": "^3.4.0", + "@vue/eslint-config-prettier": "^4.0.1", + "babel-eslint": "^10.0.1", + "eslint": "^5.8.0", + "eslint-plugin-vue": "^5.0.0", + "vue-template-compiler": "^2.5.21" + }, + "eslintConfig": { + "root": true, + "env": { + "node": true + }, + "extends": [ + "plugin:vue/essential", + "@vue/prettier" + ], + "rules": {}, + "parserOptions": { + "parser": "babel-eslint" + } + }, + "postcss": { + "plugins": { + "autoprefixer": {} + } + }, + "browserslist": [ + "> 1%", + "last 2 versions", + "not ie <= 8" + ] +} diff --git a/front/public/favicon.ico b/front/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..c7b9a43c8cd16d0b434adaf513fcacb340809a11 GIT binary patch literal 1150 zcmZQzU}Ruq5D);-3Je)63=Con3=A3!3=9Gc3=9ek5OD?&U;z=d$IUw&8K79Td55C{ zh)s&EAoa~V966eII4*78;W(ptha(F}j2JUO>YzBFd57bd<{ggjns+!lL&XRh0aYi` zyu<Ne^A5-VP`ssiha)dY4xa%ac__|r-r@MCd8gxlFy7(#vw4SO0#pvC5m0%x<{geV zLHg=fJN&O->i{$3T=Nb`S&$lR27ttycQ`UP?{Mq~xw&bZ<NusutN(eGR{xu~!~M|! zRfl2(Ossi_qh0e3$JZ^p9RF9&u=}6jXZAla(CmNJJUf^h9yjlBG=iyz83N^VH}7y< z4{~?oMu-0yX%_!u-A%zbE64JG(-ycJ7B=s2WC!U1=?BqJ9NoOb@jFO=Nw>}aI4{%x zah|6CKsesV^nckzTbLU@HScirh3bK&Gs)&1j;BC+>sC4ZPl-1FALn5TGGl+7m+3JO zJ1xQDf5SR>Sng}y;V6V;Ms@QJ$A6%3%CE78==C&x8}DsuAMb7I6X$9AInLAce_^vV zEIs^b-r<-7)vwXK!|_D(PRExui|wB$g_u2$^DuoC=VjWL7-+_v;Ah4j=Vdw@B$gau z{=9C5{qyFXj<1?`ID*_D*Sy1#uX%@~TFWj+wbEW2wODskwKz{xwRkU6{y0xlhFEt~ zhIlVi!8lJ-b&z=Z6kD)bke=opjy#|+qy+!}&%p4no`K<yJp})dXJ7!~5Bv-a4?vim Xf#Co%1UE1;Fn}<~KE?(H29RC=JAy|R literal 0 HcmV?d00001 diff --git a/front/public/index.html b/front/public/index.html new file mode 100644 index 0000000..5514f82 --- /dev/null +++ b/front/public/index.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html lang="en"> + <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>front</title> + </head> + <body> + <noscript> + <strong>We're sorry but front 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> diff --git a/front/src/App.vue b/front/src/App.vue new file mode 100644 index 0000000..ab8fe3c --- /dev/null +++ b/front/src/App.vue @@ -0,0 +1,31 @@ +<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> diff --git a/front/src/components/HelloWorld.vue b/front/src/components/HelloWorld.vue new file mode 100644 index 0000000..e8f3285 --- /dev/null +++ b/front/src/components/HelloWorld.vue @@ -0,0 +1,114 @@ +<template> + <div class="hello"> + <h1>{{ msg }}</h1> + <p> + For a guide and recipes on how to configure / customize this project,<br /> + check out the + <a href="https://cli.vuejs.org" target="_blank" rel="noopener" + >vue-cli documentation</a + >. + </p> + <h3>Installed CLI Plugins</h3> + <ul> + <li> + <a + href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" + target="_blank" + rel="noopener" + >babel</a + > + </li> + <li> + <a + href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" + target="_blank" + rel="noopener" + >eslint</a + > + </li> + </ul> + <h3>Essential Links</h3> + <ul> + <li> + <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a> + </li> + <li> + <a href="https://forum.vuejs.org" target="_blank" rel="noopener" + >Forum</a + > + </li> + <li> + <a href="https://chat.vuejs.org" target="_blank" rel="noopener" + >Community Chat</a + > + </li> + <li> + <a href="https://twitter.com/vuejs" target="_blank" rel="noopener" + >Twitter</a + > + </li> + <li> + <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a> + </li> + </ul> + <h3>Ecosystem</h3> + <ul> + <li> + <a href="https://router.vuejs.org" target="_blank" rel="noopener" + >vue-router</a + > + </li> + <li> + <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a> + </li> + <li> + <a + href="https://github.com/vuejs/vue-devtools#vue-devtools" + target="_blank" + rel="noopener" + >vue-devtools</a + > + </li> + <li> + <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener" + >vue-loader</a + > + </li> + <li> + <a + href="https://github.com/vuejs/awesome-vue" + target="_blank" + rel="noopener" + >awesome-vue</a + > + </li> + </ul> + </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> diff --git a/front/src/main.js b/front/src/main.js new file mode 100644 index 0000000..3a47006 --- /dev/null +++ b/front/src/main.js @@ -0,0 +1,12 @@ +import Vue from "vue"; +import App from "./App.vue"; +import router from "./router"; +import store from "./store"; + +Vue.config.productionTip = false; + +new Vue({ + router, + store, + render: h => h(App) +}).$mount("#app"); diff --git a/front/src/router.js b/front/src/router.js new file mode 100644 index 0000000..7b4bb79 --- /dev/null +++ b/front/src/router.js @@ -0,0 +1,26 @@ +import Vue from "vue"; +import Router from "vue-router"; +import Home from "./views/Home.vue"; + +Vue.use(Router); + +export default new Router({ + mode: "history", + base: process.env.BASE_URL, + 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: () => + import(/* webpackChunkName: "about" */ "./views/About.vue") + } + ] +}); diff --git a/front/src/store.js b/front/src/store.js new file mode 100644 index 0000000..bb02ce2 --- /dev/null +++ b/front/src/store.js @@ -0,0 +1,10 @@ +import Vue from "vue"; +import Vuex from "vuex"; + +Vue.use(Vuex); + +export default new Vuex.Store({ + state: {}, + mutations: {}, + actions: {} +}); diff --git a/front/src/views/About.vue b/front/src/views/About.vue new file mode 100644 index 0000000..3fa2807 --- /dev/null +++ b/front/src/views/About.vue @@ -0,0 +1,5 @@ +<template> + <div class="about"> + <h1>This is an about page</h1> + </div> +</template> diff --git a/front/src/views/Home.vue b/front/src/views/Home.vue new file mode 100644 index 0000000..05494f6 --- /dev/null +++ b/front/src/views/Home.vue @@ -0,0 +1,18 @@ +<template> + <div class="home"> + <img alt="Vue logo" src="../assets/logo.png" /> + <HelloWorld msg="Welcome to Your Vue.js App" /> + </div> +</template> + +<script> +// @ is an alias to /src +import HelloWorld from "@/components/HelloWorld.vue"; + +export default { + name: "home", + components: { + HelloWorld + } +}; +</script> -- GitLab