feat(tutorial): complete step 1

.env

@@ -0,0 +1 @@
+SASS_PATH=./node_modules

src/App.vue

@@ -1,8 +1,22 @@
 <template>
   <div id="app">
-    Hello Carbon! Well, not quite yet. This is the starting point for the Carbon
-    tutorial.
+    <tutorial-header />
+    <cv-content id="#main-content">
+      <router-view />
+    </cv-content>
   </div>
 </template>
 
-<style lang="scss"></style>
+<script>
+import TutorialHeader from './components/TutorialHeader';
+export default {
+  name: 'App',
+  components: {
+    TutorialHeader
+  }
+};
+</script>
+
+<style lang="scss">
+@import './styles/carbon';
+</style>

src/components/TutorialHeader/TutorialHeader.vue

@@ -0,0 +1,39 @@
+<template>
+  <cv-header aria-label="Carbon tutorial">
+    <cv-skip-to-content href="#main-content"
+      >Skip to content</cv-skip-to-content
+    >
+
+    <cv-header-name to="/" prefix="IBM">Carbon Tutorial</cv-header-name>
+    <div class="divider">|</div>
+    <cv-header-menu-item to="/repos">Repositories</cv-header-menu-item>
+
+    <template slot="header-global">
+      <cv-header-global-action aria-label="Notifications">
+        <notification-20 />
+      </cv-header-global-action>
+      <cv-header-global-action aria-label="User avatar">
+        <user-avatar-20 />
+      </cv-header-global-action>
+      <cv-header-global-action aria-label="App switcher">
+        <app-switcher-20 />
+      </cv-header-global-action>
+    </template>
+  </cv-header>
+</template>
+
+<script>
+import { Notification20, UserAvatar20, AppSwitcher20 } from '@carbon/icons-vue';
+export default {
+  name: 'TutorialHeader',
+  components: { Notification20, UserAvatar20, AppSwitcher20 }
+};
+</script>
+
+<style lang="scss">
+.divider {
+  height: 24px;
+  width: 1px;
+  background-color: #3d3d3d;
+}
+</style>

src/components/TutorialHeader/index.js

@@ -0,0 +1,2 @@
+import TutorialHeader from './TutorialHeader';
+export default TutorialHeader;

src/main.js

@@ -1,7 +1,9 @@
 import Vue from 'vue';
 import App from './App.vue';
 import router from './router';
+import CarbonComponentsVue from '@carbon/vue';
 
+Vue.use(CarbonComponentsVue);
 Vue.config.productionTip = false;
 
 new Vue({

src/router.js

@@ -1,24 +1,24 @@
 import Vue from 'vue';
 import Router from 'vue-router';
-import Home from './views/Home.vue';
+import LandingPage from './views/LandingPage';
 
 Vue.use(Router);
 
 export default new Router({
   routes: [
     {
       path: '/',
-      name: 'home',
-      component: Home
+      name: 'landing-page',
+      component: LandingPage
     },
     {
-      path: '/about',
-      name: 'about',
+      path: '/repos',
+      name: 'repos-page',
       // 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')
+        import(/* webpackChunkName: "about" */ './views/RepoPage')
     }
   ]
 });

src/styles/_carbon.scss

@@ -0,0 +1 @@
+@import 'carbon-components/scss/globals/scss/styles';

src/views/LandingPage/LandingPage.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>LANDING PAGE</div>
+</template>
+
+<script>
+export default {
+  name: 'LandingPage'
+};
+</script>
+
+<style lang="scss"></style>

src/views/LandingPage/index.js

@@ -0,0 +1,2 @@
+import LandingPage from './LandingPage';
+export default LandingPage;

src/views/RepoPage/RepoPage.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>REPO PAGE</div>
+</template>
+
+<script>
+export default {
+  name: 'LandingPage'
+};
+</script>
+
+<style lang="scss"></style>

src/views/RepoPage/index.js

@@ -0,0 +1,2 @@
+import RepoPage from './RepoPage';
+export default RepoPage;