Skip to content

Commit 41c4d50

Browse files
thealoneprogrammerthealoneprogrammer
committed
added composition api
1 parent a4b8c12 commit 41c4d50

File tree

14 files changed

+412
-145
lines changed

14 files changed

+412
-145
lines changed

‎package.json‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,13 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"@tailwindcss/postcss7-compat": "^2.0.2",
12+
"autoprefixer": "^9",
1113
"core-js": "^3.6.5",
14+
"postcss": "^7",
15+
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
1216
"vue": "^3.0.0",
17+
"vue-draggable-next": "^2.0.1",
1318
"vue-router": "^4.0.0-0"
1419
},
1520
"devDependencies": {
@@ -24,6 +29,7 @@
2429
"@vue/eslint-config-typescript": "^5.0.2",
2530
"eslint": "^6.7.2",
2631
"eslint-plugin-vue": "^7.0.0-0",
27-
"typescript": "~3.9.3"
32+
"typescript": "~3.9.3",
33+
"vue-cli-plugin-tailwind": "~2.0.6"
2834
}
2935
}

‎postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {}
5+
}
6+
}

‎public/index.html‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,29 @@
11
<!DOCTYPE html>
22
<html lang="">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title><%= htmlWebpackPlugin.options.title %></title>
9-
</head>
10-
<body>
11-
<noscript>
12-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13-
</noscript>
14-
<div id="app"></div>
15-
<!-- built files will be auto injected -->
16-
</body>
17-
</html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
8+
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
9+
<link rel="preconnect" href="https://fonts.gstatic.com">
10+
<link rel="preconnect" href="https://fonts.gstatic.com">
11+
<link
12+
href="https://fonts.googleapis.com/css2?family=Cedarville+Cursive&family=Dancing+Script&family=Great+Vibes&family=Montez&family=Mr+Bedfort&family=Mr+De+Haviland&family=Redressed&family=Reenie+Beanie&family=Rock+Salt&family=Sacramento&family=Sofia&display=swap"
13+
rel="stylesheet">
14+
15+
<title>
16+
<%= htmlWebpackPlugin.options.title %>
17+
</title>
18+
</head>
19+
20+
<body>
21+
<noscript>
22+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
23+
Please enable it to continue.</strong>
24+
</noscript>
25+
<div id="app"></div>
26+
<!-- built files will be auto injected -->
27+
</body>
28+
29+
</html>

‎src/App.vue‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,25 @@
11
<template>
2-
<div id="nav">
3-
<router-link to="/">Home</router-link> |
4-
<router-link to="/about">About</router-link>
5-
</div>
6-
<router-view/>
2+
<div id="nav"></div>
3+
<router-view />
74
</template>
85

96
<style>
10-
#app {
11-
font-family: Avenir, Helvetica, Arial, sans-serif;
12-
-webkit-font-smoothing: antialiased;
13-
-moz-osx-font-smoothing: grayscale;
14-
text-align: center;
15-
color: #2c3e50;
7+
* {
8+
margin: 0;
9+
padding: 0;
10+
box-sizing: border-box;
1611
}
1712
18-
#nav {
19-
padding: 30px;
13+
body {
14+
background-color: aqua;
2015
}
2116
22-
#nav a {
23-
font-weight: bold;
17+
#app {
18+
font-family: "Redressed", cursive;
19+
-webkit-font-smoothing: antialiased;
20+
-moz-osx-font-smoothing: grayscale;
21+
text-align: center;
2422
color: #2c3e50;
25-
}
26-
27-
#nav a.router-link-exact-active {
28-
color: #42b983;
23+
height: 100vh;
2924
}
3025
</style>

‎src/assets/tailwind.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@tailwind base;
2+
3+
@tailwind components;
4+
5+
@tailwind utilities;

‎src/components/HelloWorld.vue‎

Lines changed: 0 additions & 62 deletions
This file was deleted.

‎src/main.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { createApp } from 'vue'
22
import App from './App.vue'
33
import router from './router'
4+
import './assets/tailwind.css'
45

56
createApp(App).use(router).mount('#app')

‎src/router/index.ts‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,12 @@
11
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
2-
import Home from '../views/Home.vue'
2+
import Board from '../views/Board.vue'
33

44
const routes: Array<RouteRecordRaw> = [
55
{
66
path: '/',
7-
name: 'Home',
8-
component: Home
7+
name: 'Board',
8+
component: Board
99
},
10-
{
11-
path: '/about',
12-
name: 'About',
13-
// route level code-splitting
14-
// this generates a separate chunk (about.[hash].js) for this route
15-
// which is lazy-loaded when the route is visited.
16-
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
17-
}
1810
]
1911

2012
const router = createRouter({

‎src/types/note.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export interface Note {
2+
description: string;
3+
createdAt: Date;
4+
}

‎src/views/About.vue‎

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)