feat(tutorial): complete step 1

.env

@@ -0,0 +1 @@
+SASS_PATH="node_modules"

.project

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>carbon-tutorial-vue</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>org.eclipse.wst.validation.validationbuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
+	</natures>
+</projectDescription>

src/App.vue

@@ -1,8 +1,23 @@
 <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>
+<style lang="scss">
+@import './styles/carbon';
+</style>
+
+<script>
+import TutorialHeader from './components/TutorialHeader';
+
+export default {
+  name: 'App',
+  components: {
+    TutorialHeader
+  }
+};
+</script>

src/components/TutorialHeader/TutorialHeader.vue

@@ -0,0 +1,34 @@
+<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>
+
+    <cv-header-nav>
+      <cv-header-menu-item to="/repos">Repositories</cv-header-menu-item>
+    </cv-header-nav>
+
+    <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>

src/components/TutorialHeader/index.js

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

src/main.js

@@ -1,6 +1,8 @@
 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;
 

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: 'repo-page',
       // route level code-splitting
-      // this generates a separate chunk (about.[hash].js) for this route
+      // this generates a separate chunk (repo-page.[hash].js) for this route
       // which is lazy-loaded when the route is visited.
       component: () =>
-        import(/* webpackChunkName: "about" */ './views/About.vue')
+        import(/* webpackChunkName: "repo-page" */ './views/RepoPage')
     }
   ]
-});
+}); 

src/styles/_carbon.scss

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

src/views/LandingPage/LandingPage.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>LANDING PAGE</div>
+</template>

src/views/LandingPage/index.js

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

src/views/RepoPage/RepoPage.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>REPO PAGE</div>
+</template>

src/views/RepoPage/index.js

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