diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.vue | 30 | ||||
| -rw-r--r-- | src/assets/logo.png | bin | 0 -> 6849 bytes | |||
| -rw-r--r-- | src/components/HelloWorld.vue | 60 | ||||
| -rw-r--r-- | src/main.js | 6 | ||||
| -rw-r--r-- | src/router/index.js | 25 | ||||
| -rw-r--r-- | src/store/index.js | 12 | ||||
| -rw-r--r-- | src/views/About.vue | 5 | ||||
| -rw-r--r-- | src/views/Home.vue | 18 |
8 files changed, 156 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..b964355 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,30 @@ +<template> + <div id="nav"> + <router-link to="/">Home</router-link> | + <router-link to="/about">About</router-link> + </div> + <router-view/> +</template> + +<style> +#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; +} + +#nav a { + font-weight: bold; + color: #2c3e50; +} + +#nav a.router-link-exact-active { + color: #42b983; +} +</style> diff --git a/src/assets/logo.png b/src/assets/logo.png Binary files differnew file mode 100644 index 0000000..f3d2503 --- /dev/null +++ b/src/assets/logo.png diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..94ceb6b --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,60 @@ +<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-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> +export default { + name: 'HelloWorld', + props: { + msg: String, + }, +}; +</script> + +<!-- Add "scoped" attribute to limit CSS to this component only --> +<style scoped> +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/src/main.js b/src/main.js new file mode 100644 index 0000000..c673f53 --- /dev/null +++ b/src/main.js @@ -0,0 +1,6 @@ +import { createApp } from 'vue'; +import App from './App.vue'; +import router from './router'; +import store from './store'; + +createApp(App).use(store).use(router).mount('#app'); diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..8f52523 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,25 @@ +import { createRouter, createWebHashHistory } from 'vue-router'; +import Home from '../views/Home.vue'; + +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'), + }, +]; + +const router = createRouter({ + history: createWebHashHistory(), + routes, +}); + +export default router; diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..af6cee0 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,12 @@ +import { createStore } from 'vuex'; + +export default createStore({ + state: { + }, + mutations: { + }, + actions: { + }, + modules: { + }, +}); diff --git a/src/views/About.vue b/src/views/About.vue new file mode 100644 index 0000000..3fa2807 --- /dev/null +++ b/src/views/About.vue @@ -0,0 +1,5 @@ +<template> + <div class="about"> + <h1>This is an about page</h1> + </div> +</template> diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..e91ef23 --- /dev/null +++ b/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> |
