azalea/corner
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[+] Init

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
.eslintrc.js
+16 -16
View File
@@ -1,18 +1,18 @@
module.exports = { module.exports = {
root: true, root: true,
env: { env: {
node: true node: true
}, },
'extends': [ 'extends': [
'plugin:vue/vue3-essential', 'plugin:vue/vue3-essential',
'eslint:recommended', 'eslint:recommended',
'@vue/typescript/recommended' '@vue/typescript/recommended'
], ],
parserOptions: { parserOptions: {
ecmaVersion: 2020 ecmaVersion: 2020
}, },
rules: { rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off', 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
} }
} }
README.md
+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/).
babel.config.js
+3 -3
View File
@@ -1,5 +1,5 @@
module.exports = { module.exports = {
presets: [ presets: [
'@vue/cli-plugin-babel/preset' '@vue/cli-plugin-babel/preset'
] ]
} }
package.json
+30 -30
View File
@@ -1,32 +1,32 @@
{ {
"name": "home-page", "name": "home-page",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "serve": "vue-cli-service serve",
"build": "vue-cli-service build", "build": "vue-cli-service build",
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-class-component": "^8.0.0-0", "vue-class-component": "^8.0.0-0",
"vue-router": "^4.0.0-0" "vue-router": "^4.0.0-0"
}, },
"devDependencies": { "devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.18.0", "@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0", "@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0", "@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0", "@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-service": "~4.5.0", "@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0", "@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-typescript": "^7.0.0", "@vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0", "eslint-plugin-vue": "^7.0.0",
"sass": "^1.26.5", "sass": "^1.26.5",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"typescript": "~4.1.5" "typescript": "~4.1.5"
} }
} }
public/index.html
+13 -12
View File
@@ -1,17 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<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
</noscript> JavaScript enabled. Please enable it to continue.</strong>
<div id="app"></div> </noscript>
<!-- built files will be auto injected --> <div id="app"></div>
</body> <!-- built files will be auto injected -->
</body>
</html> </html>
src/App.vue
+24 -19
View File
@@ -1,30 +1,35 @@
<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> |
</div> <router-link to="/about">About</router-link>
<router-view/> </div>
<router-view/>
</template> </template>
<style lang="scss"> <style lang="scss">
#app { #app
font-family: Avenir, Helvetica, Arial, sans-serif; {
-webkit-font-smoothing: antialiased; font-family: Avenir, Helvetica, Arial, sans-serif;
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased;
text-align: center; -moz-osx-font-smoothing: grayscale;
color: #2c3e50; text-align: center;
color: #2c3e50;
} }
#nav { #nav
padding: 30px; {
padding: 30px;
a { a
font-weight: bold; {
color: #2c3e50; font-weight: bold;
color: #2c3e50;
&.router-link-exact-active { &.router-link-exact-active
color: #42b983; {
color: #42b983;
}
} }
}
} }
</style> </style>
src/components/HelloWorld.vue
+68 -48
View File
@@ -1,64 +1,84 @@
<template> <template>
<div class="hello"> <div class="hello">
<h1>{{ msg }}</h1> <h1>{{ msg }}</h1>
<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"
</ul> rel="noopener" target="_blank">router</a></li>
<h3>Essential Links</h3> <li><a
<ul> href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> rel="noopener" target="_blank">eslint</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> <li><a
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> rel="noopener" target="_blank">typescript</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> </ul>
</ul> <h3>Essential Links</h3>
<h3>Ecosystem</h3> <ul>
<ul> <li><a href="https://vuejs.org" rel="noopener" target="_blank">Core Docs</a></li>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> <li><a href="https://forum.vuejs.org" rel="noopener" target="_blank">Forum</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> <li><a href="https://chat.vuejs.org" rel="noopener" target="_blank">Community Chat</a>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> </li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> <li><a href="https://twitter.com/vuejs" rel="noopener" target="_blank">Twitter</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> <li><a href="https://news.vuejs.org" rel="noopener" target="_blank">News</a></li>
</ul> </ul>
</div> <h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" rel="noopener" target="_blank">vue-router</a>
</li>
<li><a href="https://vuex.vuejs.org" rel="noopener" target="_blank">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" rel="noopener"
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>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Options, Vue } from 'vue-class-component'; import {Options, Vue} from 'vue-class-component';
@Options({ @Options({
props: { props: {
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 {
list-style-type: none; ul
padding: 0; {
list-style-type: none;
padding: 0;
} }
li {
display: inline-block; li
margin: 0 10px; {
display: inline-block;
margin: 0 10px;
} }
a {
color: #42b983; a
{
color: #42b983;
} }
</style> </style>
src/main.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { createApp } from 'vue' import {createApp} from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
src/router/index.ts
+16 -16
View File
@@ -1,25 +1,25 @@
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router' import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
import Home from '../views/Home.vue' import Home from '../views/Home.vue'
const routes: Array<RouteRecordRaw> = [ const routes: Array<RouteRecordRaw> = [
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
component: Home component: Home
}, },
{ {
path: '/about', path: '/about',
name: 'About', name: 'About',
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue') component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
} }
] ]
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),
routes routes
}) })
export default router export default router
src/shims-vue.d.ts
Vendored
+4 -3
View File
@@ -1,6 +1,7 @@
/* 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
} }
src/views/About.vue
+3 -3
View File
@@ -1,5 +1,5 @@
<template> <template>
<div class="about"> <div class="about">
<h1>This is an about page</h1> <h1>This is an about page</h1>
</div> </div>
</template> </template>
src/views/Home.vue
+11 -9
View File
@@ -1,18 +1,20 @@
<template> <template>
<div class="home"> <div class="home">
<img alt="Vue logo" src="../assets/logo.png"> <img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Options, Vue } from 'vue-class-component'; import {Options, Vue} from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
@Options({ @Options({
components: { components: {
HelloWorld, HelloWorld,
}, },
}) })
export default class Home extends Vue {} export default class Home extends Vue
{
}
</script> </script>
tsconfig.json
+36 -36
View File
@@ -1,40 +1,40 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "esnext", "target": "esnext",
"module": "esnext", "module": "esnext",
"strict": true, "strict": true,
"jsx": "preserve", "jsx": "preserve",
"importHelpers": true, "importHelpers": true,
"moduleResolution": "node", "moduleResolution": "node",
"experimentalDecorators": true, "experimentalDecorators": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
"allowSyntheticDefaultImports": true, "allowSyntheticDefaultImports": true,
"sourceMap": true, "sourceMap": true,
"baseUrl": ".", "baseUrl": ".",
"types": [ "types": [
"webpack-env" "webpack-env"
], ],
"paths": { "paths": {
"@/*": [ "@/*": [
"src/*" "src/*"
] ]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}, },
"lib": [ "include": [
"esnext", "src/**/*.ts",
"dom", "src/**/*.tsx",
"dom.iterable", "src/**/*.vue",
"scripthost" "tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
] ]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
} }