diff --git a/README.md b/README.md index 0b86c9f..cd95801 100644 --- a/README.md +++ b/README.md @@ -7,8 +7,11 @@ - Use Named Routes like `Home|` so you are changing url paths only in one place (`routes.js`). - Use redirects in `routes.js` if your app was in production to prevent issues with external linking to you site. You can use an `alias` property instead, but this could mean in SEO there could be 2 pages with the same content. - Dynamic routing provides the params from the route in the `$route.params.` for the current route. +- Using `$route` within your component limits it's flexibility. Within the `router.js` you can use the `props: true` attribute on a route. This will send the route params into the component as props. This will allow you to also reuse a componet as a child component sending in the username as a prop. Think of a Modal that an admin would use to see a users profile info without navigating to the user's Page. - Linking to Dynamic routes looks like: `Drew's user page` +- You should register globally 'Base' components. So the components you will use frequently. Examples could be `BaseIcon.vue` or maybe a `BaseButton.vue` component. + ## Project setup ``` diff --git a/package-lock.json b/package-lock.json index bcd193e..a1c7350 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6268,14 +6268,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -6290,20 +6288,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -6420,8 +6415,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -6433,7 +6427,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -6448,7 +6441,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -6560,8 +6552,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -6694,7 +6685,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7629,8 +7619,7 @@ "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", - "dev": true + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" }, "lodash.assign": { "version": "4.2.0", diff --git a/package.json b/package.json index 50f8a87..e864beb 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "lint": "vue-cli-service lint" }, "dependencies": { + "lodash": "^4.17.11", "vue": "^2.6.6", "vue-router": "^3.0.1", "vuex": "^3.0.1" diff --git a/public/feather-sprite.svg b/public/feather-sprite.svg new file mode 100644 index 0000000..e2369b9 --- /dev/null +++ b/public/feather-sprite.svg @@ -0,0 +1,802 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue index e698c78..58ddb5c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,30 +1,241 @@ + + diff --git a/src/components/BaseIcon.vue b/src/components/BaseIcon.vue new file mode 100644 index 0000000..ff14fe0 --- /dev/null +++ b/src/components/BaseIcon.vue @@ -0,0 +1,42 @@ + + + + + diff --git a/src/components/EventCard.vue b/src/components/EventCard.vue new file mode 100644 index 0000000..9fbeffd --- /dev/null +++ b/src/components/EventCard.vue @@ -0,0 +1,60 @@ + + + + + diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue new file mode 100644 index 0000000..90d4ab5 --- /dev/null +++ b/src/components/NavBar.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/src/main.js b/src/main.js index bd58e31..8227a29 100644 --- a/src/main.js +++ b/src/main.js @@ -2,6 +2,31 @@ import Vue from 'vue' import App from './App.vue' //Root component all components stem from import router from './router' import store from './store' +// import BaseIcon from '@/components/BaseIcon.vue' + +// This is an example of globally registering a component +// This works for a few componets but we will use a cookbook item +// From the docs to automatically register components +// Vue.component('BaseIcon', BaseIcon) + +import upperFirst from 'lodash/upperFirst' +import camelCase from 'lodash/camelCase' + +const requireComponent = require.context( + './components', // the relative path of the directory to search + false, // subdirectories will not be searched + /Base[A-Z]\w+\.(vue|js)$/ // regular expression that searches for components starting with "Base" and ending in .vue or .js +) + +requireComponent.keys().forEach(fileName => { + const componentConfig = requireComponent(fileName) + + const componentName = upperFirst( + camelCase(fileName.replace(/^\.\/(.*)\.\w+$/, '$1')) + ) + + Vue.component(componentName, componentConfig.default || componentConfig) +}) Vue.config.productionTip = false diff --git a/src/views/EventList.vue b/src/views/EventList.vue index c0d65fe..467d556 100644 --- a/src/views/EventList.vue +++ b/src/views/EventList.vue @@ -1,8 +1,15 @@ + + + +