This commit is contained in:
Hykilpikonna
2021-12-04 15:15:50 -05:00
parent 23252a40cc
commit 920ee34f65
13 changed files with 230 additions and 196 deletions
+5
View File
@@ -1,24 +1,29 @@
# home-page # home-page
## Project setup ## Project setup
``` ```
yarn install yarn install
``` ```
### Compiles and hot-reloads for development ### Compiles and hot-reloads for development
``` ```
yarn serve yarn serve
``` ```
### Compiles and minifies for production ### Compiles and minifies for production
``` ```
yarn build yarn build
``` ```
### Lints and fixes files ### Lints and fixes files
``` ```
yarn lint yarn lint
``` ```
### Customize configuration ### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/). See [Configuration Reference](https://cli.vuejs.org/config/).
+5 -4
View File
@@ -2,14 +2,15 @@
<html lang=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta content="width=device-width,initial-scale=1.0" name="viewport">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link href="<%= BASE_URL %>favicon.ico" rel="icon">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
+10 -5
View File
@@ -1,13 +1,15 @@
<template> <template>
<div id="nav"> <div id="nav">
<router-link to="/">Home</router-link> | <router-link to="/">Home</router-link>
|
<router-link to="/about">About</router-link> <router-link to="/about">About</router-link>
</div> </div>
<router-view/> <router-view/>
</template> </template>
<style lang="scss"> <style lang="scss">
#app { #app
{
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
@@ -15,14 +17,17 @@
color: #2c3e50; color: #2c3e50;
} }
#nav { #nav
{
padding: 30px; padding: 30px;
a { a
{
font-weight: bold; font-weight: bold;
color: #2c3e50; color: #2c3e50;
&.router-link-exact-active { &.router-link-exact-active
{
color: #42b983; color: #42b983;
} }
} }
+41 -21
View File
@@ -4,30 +4,42 @@
<p> <p>
For a guide and recipes on how to configure / customize this project,<br> For a guide and recipes on how to configure / customize this project,<br>
check out the check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. <a href="https://cli.vuejs.org" rel="noopener" target="_blank">vue-cli documentation</a>.
</p> </p>
<h3>Installed CLI Plugins</h3> <h3>Installed CLI Plugins</h3>
<ul> <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-babel"
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li> rel="noopener" target="_blank">babel</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> <li><a
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li> href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
rel="noopener" target="_blank">router</a></li>
<li><a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
rel="noopener" target="_blank">eslint</a></li>
<li><a
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
rel="noopener" target="_blank">typescript</a></li>
</ul> </ul>
<h3>Essential Links</h3> <h3>Essential Links</h3>
<ul> <ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> <li><a href="https://vuejs.org" rel="noopener" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> <li><a href="https://forum.vuejs.org" rel="noopener" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> <li><a href="https://chat.vuejs.org" rel="noopener" target="_blank">Community Chat</a>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> </li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> <li><a href="https://twitter.com/vuejs" rel="noopener" target="_blank">Twitter</a></li>
<li><a href="https://news.vuejs.org" rel="noopener" target="_blank">News</a></li>
</ul> </ul>
<h3>Ecosystem</h3> <h3>Ecosystem</h3>
<ul> <ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> <li><a href="https://router.vuejs.org" rel="noopener" target="_blank">vue-router</a>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> </li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> <li><a href="https://vuex.vuejs.org" rel="noopener" target="_blank">vuex</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/vue-devtools#vue-devtools" rel="noopener"
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> target="_blank">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" rel="noopener" target="_blank">vue-loader</a>
</li>
<li><a href="https://github.com/vuejs/awesome-vue" rel="noopener" target="_blank">awesome-vue</a>
</li>
</ul> </ul>
</div> </div>
</template> </template>
@@ -40,25 +52,33 @@ import { Options, Vue } from 'vue-class-component';
msg: String msg: String
} }
}) })
export default class HelloWorld extends Vue { export default class HelloWorld extends Vue
{
msg!: string msg!: string
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style lang="scss" scoped>
h3 { h3
{
margin: 40px 0 0; margin: 40px 0 0;
} }
ul {
ul
{
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
li {
li
{
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
} }
a {
a
{
color: #42b983; color: #42b983;
} }
</style> </style>
+2 -1
View File
@@ -1,5 +1,6 @@
/* eslint-disable */ /* eslint-disable */
declare module '*.vue' { declare module '*.vue'
{
import type {DefineComponent} from 'vue' import type {DefineComponent} from 'vue'
const component: DefineComponent<{}, {}, any> const component: DefineComponent<{}, {}, any>
export default component export default component
+3 -1
View File
@@ -14,5 +14,7 @@ import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
HelloWorld, HelloWorld,
}, },
}) })
export default class Home extends Vue {} export default class Home extends Vue
{
}
</script> </script>