[ADD]basic example

CMarzin · Dec 3, 2018 · 8effa27 · 8effa27
commit 8effa27
Show file tree

Hide file tree

Showing 30 changed files with 8,330 additions and 0 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,23 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  },
+  extends: [
+    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
+    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
+    'plugin:vue/essential'
+  ],
+  // required to lint *.vue files
+  plugins: [
+    'vue'
+  ],
+  // add your custom rules here
+  rules: {
+    'semi': ['error', 'never']
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,13 @@
+# dependencies
+node_modules
+
+# logs
+npm-debug.log
+
+# Nuxt build
+.nuxt
+
+# Nuxt generate
+dist
+
+.idea/
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# VueJS Starter Project
+
+Ce document explique vite vite comment le starter project marche et ce qu'il inclu.
+
+Pour partir le projet vous devez soit
+
+1. yarn install et yarn run dev (dev + server)
+2. yarn install et yarn run build (production) et npm start pour rouler la version production
+
+##Inclus
+1. Nuxt (Vue, Vuex, Vue-Router + structure)
+2. Axios (ajax)
+3. Vee-Validate (validation)
+
diff --git a/app.html b/app.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html {{ HTML_ATTRS }}>
+<head>
+    {{ HEAD }}
+</head>
+<body {{ BODY_ATTRS }}>
+    {{ APP }}
+</body>
+</html>
diff --git a/app/mutations.js b/app/mutations.js
@@ -0,0 +1,12 @@
+/**
+ *
+ * Store's Mutations
+ *
+ */
+
+export default {
+  // App wide mutations
+  setCurrentPage(state, title) {
+    state.currentPage = title
+  }
+}
diff --git a/app/state.js b/app/state.js
@@ -0,0 +1,10 @@
+/**
+ *
+ * Store State data
+ *
+ */
+
+export default {
+    version: '1.0.0',
+    currentPage: 'home'
+}
diff --git a/assets/README.md b/assets/README.md
@@ -0,0 +1,8 @@
+# ASSETS
+
+This directory contains your un-compiled assets such as LESS, SASS, or JavaScript.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/assets#webpacked
+
+**This directory is not required, you can delete it if you don't want to use it.**
diff --git a/components/README.md b/components/README.md
@@ -0,0 +1,6 @@
+# COMPONENTS
+
+The components directory contains your Vue.js Components.
+Nuxt.js doesn't supercharge these components.
+
+**This directory is not required, you can delete it if you don't want to use it.**
diff --git a/components/appButton.vue b/components/appButton.vue
@@ -0,0 +1,62 @@
+<template>
+    <a @click="handleClick" :href="href" :class="'button ' + type">
+        {{label}}
+    </a>
+</template>
+
+<script>
+    export default
+    {
+        name: 'appButton',
+        props: {
+            href: {default: '#', type: String},
+            type: {default: 'square', type: String},
+            label: {default: 'Button', type: String},
+            owner: Object,
+            call: String
+        },
+        methods: {
+            handleClick(responder)
+            {
+                if (typeof this.owner !== 'undefined' && typeof this.call !== 'undefined') {
+                    this.owner[this.call]()
+                    responder.preventDefault()
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .button {
+        margin: 0 auto;
+        padding: 5px 10px;
+        margin-top: 25px;
+        border: 1px solid blue;
+        text-decoration: none;
+    }
+
+    .button:hover {
+        background-color: blue;
+        color: #fff;
+    }
+
+    .button.danger:hover {
+        background-color: #fff;
+        color: #ff0000;
+    }
+
+    .round {
+        border-radius: 15px;
+    }
+
+    .square {
+        border-radius: 0;
+    }
+
+    .danger {
+        background-color: #ff0000;
+        border-color: #ff0000;
+        color: #ffffff;
+    }
+</style>
diff --git a/layouts/README.md b/layouts/README.md
@@ -0,0 +1,8 @@
+# LAYOUTS
+
+This directory contains your Application Layouts.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/views#layouts
+
+**This directory is not required, you can delete it if you don't want to use it.**
diff --git a/layouts/default.vue b/layouts/default.vue
@@ -0,0 +1,24 @@
+<template>
+    <div>
+        <nuxt/>
+    </div>
+</template>
+
+<script>
+    // Call on load only (best place to log user in with cookie/JWT)
+</script>
+
+<style>
+    body {
+        font-family: 'Roboto', Helvetica, Arial, sans-serif;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        text-align: center;
+        color: #2c3e50;
+        margin-top: 60px;
+    }
+
+    a {
+        text-decoration: none;
+    }
+</style>
diff --git a/middleware/README.md b/middleware/README.md
@@ -0,0 +1,9 @@
+# MIDDLEWARE
+
+This directory contains your Application Middleware.
+The middleware lets you define custom function to be ran before rendering a page or a group of pages (layouts).
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing#middleware
+
+**This directory is not required, you can delete it if you don't want to use it.**
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -0,0 +1,42 @@
+module.exports = {
+    /*
+    ** Headers of the page
+    */
+    head: {
+        title: 'Corentin basic starter',
+        meta: [
+            {charset: 'utf-8'},
+            {name: 'viewport', content: 'width=device-width, initial-scale=1'},
+            {hid: 'description', name: 'description', content: 'Nuxt.js project'}
+        ],
+        link: [
+            {rel: 'icon', type: 'image/x-icon', href: '/favicon.ico'},
+            { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' }
+        ]
+    },
+    plugins: [],
+
+    /*
+    ** Customize the progress bar color
+    */
+    //loading: {color: '#3B8070'},
+    loading: false,
+    /*
+    ** Build configuration
+    */
+    build: {
+        /*
+        ** Run ESLint on save
+        */
+        extend(config, {isDev}) {
+            if (isDev && process.client) {
+                config.module.rules.push({
+                    enforce: 'pre',
+                    test: /\.(js|vue)$/,
+                    loader: 'eslint-loader',
+                    exclude: /(node_modules)/
+                })
+            }
+        }
+    }
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "vuejs-nuxt-starter",
+  "version": "1.0.0",
+  "description": "Nuxt.js project",
+  "author": "Corentin Marzin <[email protected]>",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
+    "precommit": "npm run lint"
+  },
+  "dependencies": {
+    "axios": "^0.18.0",
+    "node-sass": "^4.9.0",
+    "nuxt": "^2.1.0",
+    "sass-loader": "^7.0.3"
+  },
+  "devDependencies": {
+    "babel-eslint": "^8.2.1",
+    "eslint": "^4.15.0",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-vue": "^4.0.0"
+  }
+}
diff --git a/pages/README.md b/pages/README.md
@@ -0,0 +1,7 @@
+# PAGES
+
+This directory contains your Application Views and Routes.
+The framework reads all the .vue files inside this directory and creates the router of your application.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/routing
diff --git a/pages/index.vue b/pages/index.vue
@@ -0,0 +1,29 @@
+<template>
+    <div>
+        <h1>Example Nuxt + vuex module </h1>
+        <p>{{ pokemon.name }}</p>
+    </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+
+export default {
+  name: 'mainApp',
+  computed: {
+    ...mapGetters({
+        bidule: 'bidule',
+        pokemon: 'getPokemon'
+    })
+  },
+  mounted() {
+    console.log('bidule', this.bidule)
+    this.callPokemonFromAppLogic('1')
+  },
+  methods: {
+    ...mapActions({
+      callPokemonFromAppLogic: 'callPokemonFromAppLogic'
+    }),
+  }
+}
+</script>
diff --git a/static/README.md b/static/README.md
@@ -0,0 +1,11 @@
+# STATIC
+
+This directory contains your static files.
+Each file inside this directory is mapped to /.
+
+Example: /static/robots.txt is mapped as /robots.txt.
+
+More information about the usage of this directory in the documentation:
+https://nuxtjs.org/guide/assets#static
+
+**This directory is not required, you can delete it if you don't want to use it.**
diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/images/loader.svg b/static/images/loader.svg
diff --git a/static/images/logo.png b/static/images/logo.png