summaryrefslogtreecommitdiff
path: root/iridescence/src
diff options
context:
space:
mode:
Diffstat (limited to 'iridescence/src')
-rw-r--r--iridescence/src/App.vue32
-rw-r--r--iridescence/src/assets/logo.pngbin0 -> 6849 bytes
-rw-r--r--iridescence/src/components/HelloWorld.vue138
-rw-r--r--iridescence/src/main.ts12
-rw-r--r--iridescence/src/router/index.ts30
-rw-r--r--iridescence/src/shims-tsx.d.ts13
-rw-r--r--iridescence/src/shims-vue.d.ts4
-rw-r--r--iridescence/src/store/index.ts11
-rw-r--r--iridescence/src/views/About.vue5
-rw-r--r--iridescence/src/views/Home.vue18
10 files changed, 263 insertions, 0 deletions
diff --git a/iridescence/src/App.vue b/iridescence/src/App.vue
new file mode 100644
index 0000000..0228dd3
--- /dev/null
+++ b/iridescence/src/App.vue
@@ -0,0 +1,32 @@
+<template>
+ <div id="app">
+ <div id="nav">
+ <router-link to="/">Home</router-link> |
+ <router-link to="/about">About</router-link>
+ </div>
+ <router-view />
+ </div>
+</template>
+
+<style lang="scss">
+#app {
+ font-family: Avenir, Helvetica, Arial, sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ text-align: center;
+ color: #2c3e50;
+}
+
+#nav {
+ padding: 30px;
+
+ a {
+ font-weight: bold;
+ color: #2c3e50;
+
+ &.router-link-exact-active {
+ color: #42b983;
+ }
+ }
+}
+</style>
diff --git a/iridescence/src/assets/logo.png b/iridescence/src/assets/logo.png
new file mode 100644
index 0000000..f3d2503
--- /dev/null
+++ b/iridescence/src/assets/logo.png
Binary files differ
diff --git a/iridescence/src/components/HelloWorld.vue b/iridescence/src/components/HelloWorld.vue
new file mode 100644
index 0000000..86668ba
--- /dev/null
+++ b/iridescence/src/components/HelloWorld.vue
@@ -0,0 +1,138 @@
+<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-typescript"
+ target="_blank"
+ rel="noopener"
+ >typescript</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+ target="_blank"
+ rel="noopener"
+ >router</a
+ >
+ </li>
+ <li>
+ <a
+ href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
+ target="_blank"
+ rel="noopener"
+ >vuex</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 lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class HelloWorld extends Vue {
+ @Prop() private msg!: string;
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+ margin: 40px 0 0;
+}
+ul {
+ list-style-type: none;
+ padding: 0;
+}
+li {
+ display: inline-block;
+ margin: 0 10px;
+}
+a {
+ color: #42b983;
+}
+</style>
diff --git a/iridescence/src/main.ts b/iridescence/src/main.ts
new file mode 100644
index 0000000..3a47006
--- /dev/null
+++ b/iridescence/src/main.ts
@@ -0,0 +1,12 @@
+import Vue from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+
+Vue.config.productionTip = false;
+
+new Vue({
+ router,
+ store,
+ render: h => h(App)
+}).$mount("#app");
diff --git a/iridescence/src/router/index.ts b/iridescence/src/router/index.ts
new file mode 100644
index 0000000..8716a04
--- /dev/null
+++ b/iridescence/src/router/index.ts
@@ -0,0 +1,30 @@
+import Vue from "vue";
+import VueRouter, { RouteConfig } from "vue-router";
+import Home from "../views/Home.vue";
+
+Vue.use(VueRouter);
+
+const routes: Array<RouteConfig> = [
+ {
+ 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")
+ }
+];
+
+const router = new VueRouter({
+ mode: "history",
+ base: process.env.BASE_URL,
+ routes
+});
+
+export default router;
diff --git a/iridescence/src/shims-tsx.d.ts b/iridescence/src/shims-tsx.d.ts
new file mode 100644
index 0000000..2bcdf9f
--- /dev/null
+++ b/iridescence/src/shims-tsx.d.ts
@@ -0,0 +1,13 @@
+import Vue, { VNode } from "vue";
+
+declare global {
+ namespace JSX {
+ // tslint:disable no-empty-interface
+ interface Element extends VNode {}
+ // tslint:disable no-empty-interface
+ interface ElementClass extends Vue {}
+ interface IntrinsicElements {
+ [elem: string]: any;
+ }
+ }
+}
diff --git a/iridescence/src/shims-vue.d.ts b/iridescence/src/shims-vue.d.ts
new file mode 100644
index 0000000..0660bd6
--- /dev/null
+++ b/iridescence/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module "*.vue" {
+ import Vue from "vue";
+ export default Vue;
+}
diff --git a/iridescence/src/store/index.ts b/iridescence/src/store/index.ts
new file mode 100644
index 0000000..fb6015f
--- /dev/null
+++ b/iridescence/src/store/index.ts
@@ -0,0 +1,11 @@
+import Vue from "vue";
+import Vuex from "vuex";
+
+Vue.use(Vuex);
+
+export default new Vuex.Store({
+ state: {},
+ mutations: {},
+ actions: {},
+ modules: {}
+});
diff --git a/iridescence/src/views/About.vue b/iridescence/src/views/About.vue
new file mode 100644
index 0000000..3fa2807
--- /dev/null
+++ b/iridescence/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+ <div class="about">
+ <h1>This is an about page</h1>
+ </div>
+</template>
diff --git a/iridescence/src/views/Home.vue b/iridescence/src/views/Home.vue
new file mode 100644
index 0000000..191049e
--- /dev/null
+++ b/iridescence/src/views/Home.vue
@@ -0,0 +1,18 @@
+<template>
+ <div class="home">
+ <img alt="Vue logo" src="../assets/logo.png" />
+ <HelloWorld msg="Welcome to Your Vue.js App" />
+ </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from "@/components/HelloWorld.vue";
+
+export default {
+ name: "Home",
+ components: {
+ HelloWorld
+ }
+};
+</script>