142 lines
2.6 KiB
Markdown
142 lines
2.6 KiB
Markdown
# Flow + Structure of Vue project
|
|
|
|
|
|
- If components are to be imported elsewhere they should `export default` and set their name to be the name of the html element you want.
|
|
- If components import an element they should `export default` and set a `components` with an array of the components being used in the html.
|
|
|
|
|
|
```
|
|
import Nav from './components/partials/Nav.vue';
|
|
export default {
|
|
name: 'App',
|
|
components: {
|
|
Nav
|
|
}
|
|
}
|
|
```
|
|
|
|
|
|
## Main Page
|
|
|
|
|
|
### `App.vue`
|
|
|
|
|
|
This is the main entrypoint into the website.
|
|
|
|
|
|
- `template` should inject a `<div id="app">`
|
|
- insert the `<Nav />` component
|
|
|
|
|
|
## Navigation
|
|
|
|
|
|
- Create a `VueRouter` in `./router/index.js`
|
|
- Create a `routes` array which takes a dict of each route
|
|
- Route should set three things:
|
|
- A `path` - this sets the URL path.
|
|
- A `name` - this is the name to appear in the navbar.
|
|
- A `component` - this should import the vue component
|
|
|
|
|
|
Example:
|
|
|
|
|
|
```
|
|
{
|
|
path: '/event/:id',
|
|
name: 'eventSingle',
|
|
component: () => import ('../views/EventSingle.vue')
|
|
}
|
|
```
|
|
|
|
|
|
### `./router/index.js`
|
|
|
|
|
|
- Import all components
|
|
|
|
|
|
```
|
|
Vue.use(VueRouter)
|
|
|
|
|
|
const 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')
|
|
},
|
|
{
|
|
path: '/event/:id',
|
|
name: 'eventSingle',
|
|
component: () => import ('../views/EventSingle.vue')
|
|
}
|
|
]
|
|
|
|
|
|
const router = new VueRouter({
|
|
mode: 'history',
|
|
base: process.env.BASE_URL,
|
|
routes
|
|
})
|
|
|
|
|
|
export default router
|
|
```
|
|
|
|
|
|
## Rendering Objects
|
|
|
|
|
|
### Cards + Card List
|
|
|
|
|
|
We have:
|
|
|
|
|
|
- A EventCard of which many of them form a EventsList
|
|
- A EventSingle which is a page for each card
|
|
|
|
|
|
We use an EventsList template to render the cards - this imported and used in the `Home.vue`
|
|
|
|
|
|
A router exists for each Event - this is used to link each EventCard to an EventSingle. An EventSingle is a template for a EventCard.
|
|
|
|
|
|
The EventsList hits an api to generate the cards dynamically. The EventSingle hits an api to get details of a single card.
|
|
|
|
|
|
#### EventCard
|
|
|
|
|
|
- Takes a prop of the data you need
|
|
- Creates a card for a single item
|
|
- Links to a EventSingle using a route parameter
|
|
|
|
|
|
#### EventSingle
|
|
|
|
|
|
- Hits an API
|
|
- Uses a route parameter to determine which event to show
|
|
- Displays a whole page for a single event
|
|
|
|
|
|
#### EventsList
|
|
|
|
|
|
- Hits an API for its data
|
|
- Uses a `v-for` to render a EventCard
|
|
- Uses a router-link to link to a EventSingle
|