basic project restructure, add router, boostrap, fix README

2025-12-06 21:15:18 -06:00 · 2020-08-12 19:47:45 -05:00
parent 82ca57c927
commit d6ec1b0867
9 changed files with 164 additions and 107 deletions
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # history-of-robotics

+A small Vue.js based school project exploring a small segment of the history of Robotics.
+
 ## Project setup
 ```
 npm install
--- a/package-lock.json
+++ b/package-lock.json
@@ -1144,6 +1144,16 @@
      "integrity": "sha1-K1o6s/kYzKSKjHVMCBaOPwPrphs=",
      "dev": true
    },
+    "@nuxt/opencollective": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/opencollective/-/opencollective-0.3.0.tgz",
+      "integrity": "sha512-Vf09BxCdj1iT2IRqVwX5snaY2WCTkvM0O4cWWSO1ThCFuc4if0Q/nNwAgCxRU0FeYHJ7DdyMUNSdswCLKlVqeg==",
+      "requires": {
+        "chalk": "^2.4.2",
+        "consola": "^2.10.1",
+        "node-fetch": "^2.6.0"
+      }
+    },
    "@soda/friendly-errors-webpack-plugin": {
      "version": "1.7.1",
      "resolved": "https://registry.npm.taobao.org/@soda/friendly-errors-webpack-plugin/download/@soda/friendly-errors-webpack-plugin-1.7.1.tgz",
@@ -2263,7 +2273,6 @@
      "version": "3.2.1",
      "resolved": "https://registry.npm.taobao.org/ansi-styles/download/ansi-styles-3.2.1.tgz",
      "integrity": "sha1-QfuyAkPlCxK+DwS43tvwdSDOhB0=",
-      "dev": true,
      "requires": {
        "color-convert": "^1.9.0"
      }
@@ -2279,7 +2288,6 @@
      "resolved": "https://registry.npm.taobao.org/anymatch/download/anymatch-3.1.1.tgz",
      "integrity": "sha1-xV7PAhheJGklk5kxDBc84xIzsUI=",
      "dev": true,
-      "optional": true,
      "requires": {
        "normalize-path": "^3.0.0",
        "picomatch": "^2.0.4"
@@ -2625,8 +2633,7 @@
      "version": "2.1.0",
      "resolved": "https://registry.npm.taobao.org/binary-extensions/download/binary-extensions-2.1.0.tgz?cache=0&sync_timestamp=1593261294370&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbinary-extensions%2Fdownload%2Fbinary-extensions-2.1.0.tgz",
      "integrity": "sha1-MPpAyef+B9vIlWeM0ocCTeokHdk=",
-      "dev": true,
-      "optional": true
+      "dev": true
    },
    "bindings": {
      "version": "1.5.0",
@@ -2719,6 +2726,23 @@
      "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
      "dev": true
    },
+    "bootstrap": {
+      "version": "4.5.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.5.2.tgz",
+      "integrity": "sha512-vlGn0bcySYl/iV+BGA544JkkZP5LB3jsmkeKLFQakCOwCM3AOk7VkldBz4jrzSe+Z0Ezn99NVXa1o45cQY4R6A=="
+    },
+    "bootstrap-vue": {
+      "version": "2.16.0",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.16.0.tgz",
+      "integrity": "sha512-gLETwPmeRHCe5WHmhGxzb5PtTEuKqQPGl0TFvZ2Odbkg/7UuIHdqIexrJRerpnomP4ZzDQ+qYGL91Ls9lcQsJQ==",
+      "requires": {
+        "@nuxt/opencollective": "^0.3.0",
+        "bootstrap": ">=4.5.0 <5.0.0",
+        "popper.js": "^1.16.1",
+        "portal-vue": "^2.1.7",
+        "vue-functional-data-merge": "^3.1.0"
+      }
+    },
    "brace-expansion": {
      "version": "1.1.11",
      "resolved": "https://registry.npm.taobao.org/brace-expansion/download/brace-expansion-1.1.11.tgz",
@@ -3128,7 +3152,6 @@
      "version": "2.4.2",
      "resolved": "https://registry.npm.taobao.org/chalk/download/chalk-2.4.2.tgz?cache=0&sync_timestamp=1591687183344&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchalk%2Fdownload%2Fchalk-2.4.2.tgz",
      "integrity": "sha1-zUJUFnelQzPPVBpJEIwUMrRMlCQ=",
-      "dev": true,
      "requires": {
        "ansi-styles": "^3.2.1",
        "escape-string-regexp": "^1.0.5",
@@ -3152,7 +3175,6 @@
      "resolved": "https://registry.npm.taobao.org/chokidar/download/chokidar-3.4.2.tgz?cache=0&sync_timestamp=1596729288792&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fchokidar%2Fdownload%2Fchokidar-3.4.2.tgz",
      "integrity": "sha1-ONyOZY3sOAl0HrPve7Ckf+QkIy0=",
      "dev": true,
-      "optional": true,
      "requires": {
        "anymatch": "~3.1.1",
        "braces": "~3.0.2",
@@ -3169,7 +3191,6 @@
          "resolved": "https://registry.npm.taobao.org/braces/download/braces-3.0.2.tgz",
          "integrity": "sha1-NFThpGLujVmeI23zNs2epPiv4Qc=",
          "dev": true,
-          "optional": true,
          "requires": {
            "fill-range": "^7.0.1"
          }
@@ -3179,7 +3200,6 @@
          "resolved": "https://registry.npm.taobao.org/fill-range/download/fill-range-7.0.1.tgz",
          "integrity": "sha1-GRmmp8df44ssfHflGYU12prN2kA=",
          "dev": true,
-          "optional": true,
          "requires": {
            "to-regex-range": "^5.0.1"
          }
@@ -3188,15 +3208,13 @@
          "version": "7.0.0",
          "resolved": "https://registry.npm.taobao.org/is-number/download/is-number-7.0.0.tgz",
          "integrity": "sha1-dTU0W4lnNNX4DE0GxQlVUnoU8Ss=",
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "to-regex-range": {
          "version": "5.0.1",
          "resolved": "https://registry.npm.taobao.org/to-regex-range/download/to-regex-range-5.0.1.tgz",
          "integrity": "sha1-FkjESq58jZiKMmAY7XL1tN0DkuQ=",
          "dev": true,
-          "optional": true,
          "requires": {
            "is-number": "^7.0.0"
          }
@@ -3406,6 +3424,17 @@
      "integrity": "sha1-2jCcwmPfFZlMaIypAheco8fNfH4=",
      "dev": true
    },
+    "clone-deep": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "requires": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      }
+    },
    "coa": {
      "version": "2.0.2",
      "resolved": "https://registry.npm.taobao.org/coa/download/coa-2.0.2.tgz",
@@ -3441,7 +3470,6 @@
      "version": "1.9.3",
      "resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-1.9.3.tgz",
      "integrity": "sha1-u3GFBpDh8TZWfeYp0tVHHe2kweg=",
-      "dev": true,
      "requires": {
        "color-name": "1.1.3"
      }
@@ -3449,8 +3477,7 @@
    "color-name": {
      "version": "1.1.3",
      "resolved": "https://registry.npm.taobao.org/color-name/download/color-name-1.1.3.tgz",
-      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
-      "dev": true
+      "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
    },
    "color-string": {
      "version": "1.5.3",
@@ -3566,6 +3593,11 @@
      "integrity": "sha1-izIIk1kwjRERFdgcrT/Oq4iPl7w=",
      "dev": true
    },
+    "consola": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/consola/-/consola-2.15.0.tgz",
+      "integrity": "sha512-vlcSGgdYS26mPf7qNi+dCisbhiyDnrN1zaRbw3CSuc2wGOMEGGPsp46PdRG5gqXwgtJfjxDkxRNAgRPr1B77vQ=="
+    },
    "console-browserify": {
      "version": "1.2.0",
      "resolved": "https://registry.npm.taobao.org/console-browserify/download/console-browserify-1.2.0.tgz",
@@ -4738,8 +4770,7 @@
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npm.taobao.org/escape-string-regexp/download/escape-string-regexp-1.0.5.tgz?cache=0&sync_timestamp=1587627212242&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fescape-string-regexp%2Fdownload%2Fescape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
    },
    "eslint": {
      "version": "6.8.0",
@@ -5729,8 +5760,7 @@
    "has-flag": {
      "version": "3.0.0",
      "resolved": "https://registry.npm.taobao.org/has-flag/download/has-flag-3.0.0.tgz",
-      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
-      "dev": true
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
    },
    "has-symbols": {
      "version": "1.0.1",
@@ -6398,7 +6428,6 @@
      "resolved": "https://registry.npm.taobao.org/is-binary-path/download/is-binary-path-2.1.0.tgz",
      "integrity": "sha1-6h9/O4DwZCNug0cPhsCcJU+0Wwk=",
      "dev": true,
-      "optional": true,
      "requires": {
        "binary-extensions": "^2.0.0"
      }
@@ -7475,6 +7504,11 @@
        "lower-case": "^1.1.1"
      }
    },
+    "node-fetch": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+      "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA=="
+    },
    "node-forge": {
      "version": "0.9.0",
      "resolved": "https://registry.npm.taobao.org/node-forge/download/node-forge-0.9.0.tgz",
@@ -8068,8 +8102,7 @@
      "version": "2.2.2",
      "resolved": "https://registry.npm.taobao.org/picomatch/download/picomatch-2.2.2.tgz?cache=0&sync_timestamp=1584791322335&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpicomatch%2Fdownload%2Fpicomatch-2.2.2.tgz",
      "integrity": "sha1-IfMz6ba46v8CRo9RRupAbTRfTa0=",
-      "dev": true,
-      "optional": true
+      "dev": true
    },
    "pify": {
      "version": "4.0.1",
@@ -8110,6 +8143,16 @@
        "ts-pnp": "^1.1.6"
      }
    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
+    "portal-vue": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/portal-vue/-/portal-vue-2.1.7.tgz",
+      "integrity": "sha512-+yCno2oB3xA7irTt0EU5Ezw22L2J51uKAacE/6hMPMoO/mx3h4rXFkkBkT4GFsMDv/vEe8TNKC3ujJJ0PTwb6g=="
+    },
    "portfinder": {
      "version": "1.0.28",
      "resolved": "https://registry.npm.taobao.org/portfinder/download/portfinder-1.0.28.tgz",
@@ -8973,7 +9016,6 @@
      "resolved": "https://registry.npm.taobao.org/readdirp/download/readdirp-3.4.0.tgz",
      "integrity": "sha1-n9zN+ekVWAVEkiGsZF6DA6tbmto=",
      "dev": true,
-      "optional": true,
      "requires": {
        "picomatch": "^2.2.1"
      }
@@ -9327,6 +9369,36 @@
      "integrity": "sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=",
      "dev": true
    },
+    "sass": {
+      "version": "1.26.10",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.26.10.tgz",
+      "integrity": "sha512-bzN0uvmzfsTvjz0qwccN1sPm2HxxpNI/Xa+7PlUEMS+nQvbyuEK7Y0qFqxlPHhiNHb1Ze8WQJtU31olMObkAMw==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=2.0.0 <4.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-8.0.2.tgz",
+      "integrity": "sha512-7o4dbSK8/Ol2KflEmSco4jTjQoV988bM82P9CZdmo9hR3RLnvNc0ufMNdMrB0caq38JQ/FgF4/7RcbcfKzxoFQ==",
+      "dev": true,
+      "requires": {
+        "clone-deep": "^4.0.1",
+        "loader-utils": "^1.2.3",
+        "neo-async": "^2.6.1",
+        "schema-utils": "^2.6.1",
+        "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
+          "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
+          "dev": true
+        }
+      }
+    },
    "sax": {
      "version": "1.2.4",
      "resolved": "https://registry.npm.taobao.org/sax/download/sax-1.2.4.tgz",
@@ -9545,6 +9617,15 @@
        "safe-buffer": "^5.0.1"
      }
    },
+    "shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "requires": {
+        "kind-of": "^6.0.2"
+      }
+    },
    "shebang-command": {
      "version": "1.2.0",
      "resolved": "https://registry.npm.taobao.org/shebang-command/download/shebang-command-1.2.0.tgz",
@@ -10145,7 +10226,6 @@
      "version": "5.5.0",
      "resolved": "https://registry.npm.taobao.org/supports-color/download/supports-color-5.5.0.tgz?cache=0&sync_timestamp=1573220230429&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fsupports-color%2Fdownload%2Fsupports-color-5.5.0.tgz",
      "integrity": "sha1-4uaaRKyHcveKHsCzW2id9lMO/I8=",
-      "dev": true,
      "requires": {
        "has-flag": "^3.0.0"
      }
@@ -10864,6 +10944,11 @@
        }
      }
    },
+    "vue-functional-data-merge": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-3.1.0.tgz",
+      "integrity": "sha512-leT4kdJVQyeZNY1kmnS1xiUlQ9z1B/kdBFCILIjYYQDqZgLqCLa0UhjSSeRX6c3mUe6U5qYeM8LrEqkHJ1B4LA=="
+    },
    "vue-hot-reload-api": {
      "version": "2.3.4",
      "resolved": "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz",
@@ -10971,6 +11056,11 @@
        }
      }
    },
+    "vue-router": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.4.3.tgz",
+      "integrity": "sha512-BADg1mjGWX18Dpmy6bOGzGNnk7B/ZA0RxuA6qedY/YJwirMfKXIDzcccmHbQI0A6k5PzMdMloc0ElHfyOoX35A=="
+    },
    "vue-style-loader": {
      "version": "4.1.2",
      "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -8,8 +8,10 @@
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
+    "bootstrap-vue": "^2.16.0",
    "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "vue": "^2.6.11",
+    "vue-router": "^3.4.3"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.0",
@@ -18,7 +20,9 @@
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2"
  },
  "eslintConfig": {
    "root": true,
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,28 +1,22 @@
 <template>
    <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+        <b-container :fluid=true>
+            <b-row>
+                <b-col>
+                    Text
+                </b-col>
+            </b-row>
+        </b-container>
    </div>
 </template>

-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+<style lang="scss">
+    @import "./scss/_variables.scss";
 </style>
+
+<script>
+    export default {
+        name: 'App',
+        components: {}
+    }
+</script>
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@@ -1,58 +0,0 @@
-<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>
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
--- a/src/main.js
+++ b/src/main.js
@@ -1,8 +1,15 @@
+import 'bootstrap/dist/css/bootstrap.css';
+import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue';
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router';
+
+Vue.use(BootstrapVue);
+Vue.use(BootstrapVueIcons);

 Vue.config.productionTip = false

 new Vue({
+  router,
  render: h => h(App),
 }).$mount('#app')
--- a/src/router.js
+++ b/src/router.js
@@ -0,0 +1,17 @@
+import Vue from 'vue';
+import Router from 'vue-router';
+import Home from './components/Home.vue';
+
+Vue.use(Router);
+
+export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes: [
+    {
+      path: '/',
+      name: 'Home',
+      component: Home,
+    }
+  ],
+});
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -0,0 +1 @@
+$blue: #edf0f6;