feature: add routes and header

package.json

@@ -25,6 +25,8 @@
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.0.3",
     "prettier": "^2.4.1",
+    "sass": "^1.49.8",
+    "sass-loader": "^12.6.0",
     "vue-template-compiler": "^2.6.14"
   }
 }

public/index.html

@@ -4,7 +4,7 @@
     <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">
+    <link rel="icon" href="<%= BASE_URL %>dog.png">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
     <title><%= htmlWebpackPlugin.options.title %></title>

src/App.vue

@@ -1 +1 @@
-<template>
  <div id="app">
    <div class="container">
      <b-navbar>
        <template #start>
          <b-navbar-item href="#"> Home </b-navbar-item>
          <b-navbar-dropdown label="Info">
            <b-navbar-item href="#"> About </b-navbar-item>
            <b-navbar-item href="#"> Contact </b-navbar-item>
          </b-navbar-dropdown>
        </template>

        <template #end>
          <b-navbar-item tag="div">
            <div class="buttons">
              <a class="button is-light">
                <strong>Sign up</strong>
b-navbar>
            <b-navbar-item href="#"> About </b-navbar-item>
b-navbar>
            <b-navbar-item href="#"> Contact </b-navbar-item>
            </div>
          </b-navbar-item>
        </template>
      </b-navbar>
        <template #start>
        This container is <strong>centered</strong> on desktop and larger
        viewports.
      </div>
      <div class="card">
        <div class="card-content">
        <template #start>
            <b-navbar-item href="#"> Contact </b-navbar-item>
            Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros.
            Donec id elit non mi porta gravida at eget metus. Cum sociis
            natoquаe penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Cras mattis consectetur purus sit amet fermentum.
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, sequi.
          </div>
          <footer class="card-footer">
            <a href="#" class="card-footer-item">Save</a>
            <a href="#" class="card-footer-item">Edit</a>
            <a href="#" class="card-footer-item">Delete</a>
          </footer>
        </div>
      </div>
      <b-table :data="data" :columns="columns"></b-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        {
          id: 1,
          first_name: 'Jesse',
            <b-navbar-item href="#"> About </b-navbar-item>
b-navbar>
          date: '2016-10-15 13:43:27',
          gender: 'Male',
        },
        {
          id: 2,
          first_name: 'John',
          last_name: 'Jacobs',
          date: '2016-12-15 06:00:53',
          gender: 'Male',
        },
        {
          id: 3,
            <b-navbar-item href="#"> Contact </b-navbar-item>
          last_name: 'Gilbert',
          date: '2016-04-26 06:26:28',
          gender: 'Female',
        },
        {
          id: 4,
          first_name: 'Clarence',
          last_name: 'Flores',
            <b-navbar-item href="#"> Contact </b-navbar-item>
          </b-navbar-dropdown>
          gender: 'Male',
        },
        {
          id: 5,
            <b-navbar-item href="#"> Contact </b-navbar-item>

          last_name: 'Lee',
          date: '2016-12-06 14:38:38',
          gender: 'Female',
            <b-navbar-item href="#"> About </b-navbar-item>
          <b-navbar-dropdown label="Info">
      ],
      columns: [
          <b-navbar-dropdown label="Info">
        </template>
          field: 'id',
          label: 'ID',
          width: '40',
          numeric: true,
        },
        {
          field: 'first_name',
          label: 'First Name',
        },
        {
          field: 'last_name',
        </template>
b-navbar>
        },
        {
          field: 'date',
          label: 'Date',
        </template>
          <b-navbar-dropdown label="Info">
            <b-navbar-item href="#"> About </b-navbar-item>
          <b-navbar-dropdown label="Info">
        {
        </template>
            <b-navbar-item href="#"> About </b-navbar-item>
          label: 'Gender',
        },
      ],
    }
  },
}


<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
        </template>



        </template>
  padding: 30px;
        </template>


b-navbar>
        <template #end>
b-navbar>
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
+<template>
  <div id="app">
    <div class="container">
      <        <template #end>
            <b-navbar-item href="#"> About </b-navbar-item>
b-navbar>
            <b-navbar-item href="#"> Contact </b-navbar-item>
    </div>
  </div>
</template>

<script>
b-navbar>
          </b-navbar-dropdown>

          <b-navbar-dropdown label="Info">
          <b-navbar-dropdown label="Info">
b-navbar>
        </template>
          <b-navbar-dropdown label="Info">
            <b-navbar-item href="#"> About </b-navbar-item>
b-navbar>

        </template>
        </template>
        </template>

b-navbar>
        <template #end>
>

src/assets/scss/main.scss

@@ -0,0 +1,7 @@
+@import "~bulma/sass/utilities/_all";
+
+$navbar-item-hover-color: orange;
+$navbar-height: 4rem;
+
+@import "~bulma";
+@import "~buefy/src/scss/buefy";

src/components/HeaderComponent.vue

@@ -0,0 +1,35 @@
+<template>
+  <b-navbar transparent shadow active>
+    <template #brand>
+      <b-navbar-item tag="router-link" :to="{ name: 'home' }" class="p-0">
+        <img src="../assets/dog.png" alt="psina" width="50" height="50" />
+      </b-navbar-item>
+    </template>
+    <template #start>
+      <b-navbar-item class="is-link" tag="router-link" :to="{ name: 'home' }">
+        Home
+      </b-navbar-item>
+      <b-navbar-item href="#"> Docs</b-navbar-item>
+      <b-navbar-item href="#"> Source</b-navbar-item>
+    </template>
+
+    <template #end>
+      <b-navbar-item tag="div">
+        <div class="buttons">
+          <router-link
+            class="button is-light is-rounded"
+            :to="{ name: 'login' }"
+          >
+            Log in
+          </router-link>
+        </div>
+      </b-navbar-item>
+    </template>
+  </b-navbar>
+</template>
+<script>
+export default {
+  name: 'HeaderComponent',
+}
+</script>
+<style lang="scss"></style>

src/main.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import Buefy from 'buefy'
-import 'buefy/dist/buefy.css'
+import './assets/scss/main.scss'
 
 Vue.config.productionTip = false
 Vue.use(Buefy)

src/router/index.js

@@ -4,24 +4,25 @@ import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 
 const routes = [
-  // {
+  {
-  //   path: '/',
+    path: '/',
-  //   name: 'home',
+    name: 'home',
-  //   component: HomeView,
+    component: () => import('../views/HomeView'),
-  // },
+  },
-  // {
+  {
-  //   path: '/about',
+    path: '/login',
-  //   name: 'about',
+    name: 'login',
-  //   // route level code-splitting
+    component: () => import('../views/LoginView.vue'),
-  //   // 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/AboutView.vue'),
-  // },
 ]
 
 const router = new VueRouter({
   routes,
 })
 
+// router.beforeEach((to, from, next) => {
+//   if (to.name !== 'login') next({ name: 'login' })
+//   else next()
+// })
+
 export default router

src/views/HomeView.vue

@@ -0,0 +1,11 @@
+<template>
+  <h2>home</h2>
+</template>
+
+<script>
+export default {
+  name: 'HomeView',
+}
+</script>
+
+<style scoped></style>

src/views/LoginView.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="container"></div>
+</template>
+
+<script>
+export default {
+  name: 'LoginView',
+}
+</script>
+
+<style scoped></style>

webpack.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.scss$/,
+        use: ['vue-style-loader', 'css-loader', 'sass-loader'],
+      },
+    ],
+  },
+}

yarn.lock

@@ -2096,7 +2096,7 @@ charcodes@^0.2.0:
   resolved "https://registry.npmmirror.com/charcodes/-/charcodes-0.2.0.tgz#5208d327e6cc05f99eb80ffc814707572d1f14e4"
   integrity sha512-Y4kiDb+AM4Ecy58YkuZrrSRJBDQdQ2L+NyS1vHHFtNtUjgutcZfx3yp1dAONI/oPaPmyGfCLx5CxL+zauIMyKQ==
 
-chokidar@^3.5.3:
+"chokidar@>=3.0.0 <4.0.0", chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
   integrity sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==
@@ -3538,6 +3538,11 @@ ignore@^5.2.0:
   resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"
   integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
 
+immutable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
+  integrity sha512-zIE9hX70qew5qTUjSS7wi1iwj/l7+m54KWU247nhM3v806UdGj1yDndXj+IOYxxtW9zyLI+xqFNZjTuDaLUqFw==
+
 import-fresh@^3.0.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
@@ -3854,7 +3859,7 @@ kind-of@^6.0.2:
   resolved "https://registry.npmmirror.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
 
-klona@^2.0.5:
+klona@^2.0.4, klona@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmmirror.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
   integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
@@ -5133,6 +5138,23 @@ safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0,
   resolved "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
+sass-loader@^12.6.0:
+  version "12.6.0"
+  resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-12.6.0.tgz#5148362c8e2cdd4b950f3c63ac5d16dbfed37bcb"
+  integrity sha512-oLTaH0YCtX4cfnJZxKSLAyglED0naiYfNG1iXfU5w1LNZ+ukoA5DtyDIN5zmKVZwYNJP4KRc5Y3hkWga+7tYfA==
+  dependencies:
+    klona "^2.0.4"
+    neo-async "^2.6.2"
+
+sass@^1.49.8:
+  version "1.49.8"
+  resolved "https://registry.yarnpkg.com/sass/-/sass-1.49.8.tgz#9bbbc5d43d14862db07f1c04b786c9da9b641828"
+  integrity sha512-NoGOjvDDOU9og9oAxhRnap71QaTjjlzrvLnKecUJ3GxhaQBrV6e7gPuSPF28u1OcVAArVojPAe4ZhOXwwC4tGw==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 schema-utils@^2.6.5:
   version "2.7.1"
   resolved "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"
@@ -5327,7 +5349,7 @@ sockjs@^0.3.21:
     uuid "^8.3.2"
     websocket-driver "^0.7.4"
 
-source-map-js@^1.0.2:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==