Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 41c4d50

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /