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 ba6ad91

Browse files
first commit
1 parent 47af010 commit ba6ad91

File tree

12 files changed

+286
-108
lines changed

12 files changed

+286
-108
lines changed

‎package-lock.json‎

Lines changed: 122 additions & 41 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,16 @@
88
"lint": "vue-cli-service lint"
99
},
1010
"dependencies": {
11+
"bootstrap-vue": "^2.10.1",
1112
"core-js": "^3.6.4",
12-
"vue": "^2.6.11"
13+
"vue": "^2.6.11",
14+
"vue-router": "^3.1.6",
15+
"vue2-editor": "^2.10.2"
1316
},
1417
"devDependencies": {
1518
"@vue/cli-plugin-babel": "~4.3.0",
1619
"@vue/cli-plugin-eslint": "~4.3.0",
20+
"@vue/cli-plugin-router": "^4.3.0",
1721
"@vue/cli-service": "~4.3.0",
1822
"babel-eslint": "^10.1.0",
1923
"eslint": "^6.7.2",

‎src/App.vue‎

Lines changed: 29 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,38 @@
11
<template>
22
<div id="app">
3-
<img alt="Vue logo" src="./assets/logo.png">
4-
<HelloWorld msg="Welcome to Your Vue.js App"/>
3+
<div class="container">
4+
<div class="row">
5+
<div class="col-2">
6+
<Logo />
7+
</div>
8+
<div class="col-8">
9+
<Title :msg=welcome_msg />
10+
</div>
11+
<MainNavbar />
12+
<router-view />
13+
</div>
14+
</div>
515
</div>
616
</template>
717

818
<script>
9-
import HelloWorld from './components/HelloWorld.vue'
19+
// @ is an alias to /src
20+
import Title from "@/components/Title.vue";
21+
import Logo from "@/components/Logo.vue";
22+
import MainNavbar from "@/components/MainNavbar.vue";
1023
1124
export default {
12-
name: 'App',
25+
data() {
26+
return {
27+
welcome_msg: 'mi Bloc'
28+
}
29+
},
1330
components: {
14-
HelloWorld
31+
Title,
32+
Logo,
33+
MainNavbar
1534
}
16-
}
35+
};
1736
</script>
1837

1938
<style>
@@ -23,6 +42,9 @@ export default {
2342
-moz-osx-font-smoothing: grayscale;
2443
text-align: center;
2544
color: #2c3e50;
26-
margin-top: 60px;
45+
}
46+
.border-top-bottom {
47+
border-top: solid black 1px;
48+
border-bottom: solid black 1px;
2749
}
2850
</style>

‎src/assets/logo.png‎

100644100755
2.86 KB
Loading[フレーム]

‎src/components/HelloWorld.vue‎

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

‎src/components/Logo.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<img alt="Vue logo" src="../assets/logo.png" class />
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: "Logo"
8+
};
9+
</script>
10+
11+
<style scoped>
12+
img {
13+
width: 100px;
14+
height: auto;
15+
}
16+
</style>

‎src/components/MainNavbar.vue‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<template>
2+
<div class="col-12 border-top-bottom">
3+
<div id="nav">
4+
<router-link to="/">Home</router-link>|
5+
<router-link to="/about">About</router-link>
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script>
11+
export default {
12+
name: "MainNavbar"
13+
};
14+
</script>
15+
16+
<style scoped>
17+
#nav {
18+
padding: 10px;
19+
}
20+
21+
#nav a {
22+
font-weight: bold;
23+
color: #2c3e50;
24+
}
25+
26+
#nav a.router-link-exact-active {
27+
color: #42b983;
28+
}
29+
</style>

‎src/components/Title.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<h1 class="py-4 my-auto">{{ msg }}</h1>
3+
</template>
4+
5+
<script>
6+
export default {
7+
name: "Title",
8+
props: {
9+
msg: String
10+
}
11+
};
12+
</script>
13+
14+
<style scoped>
15+
16+
</style>

‎src/main.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,17 @@
11
import Vue from 'vue'
22
import App from './App.vue'
3+
import router from './router'
4+
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
5+
import 'bootstrap/dist/css/bootstrap.css'
6+
import 'bootstrap-vue/dist/bootstrap-vue.css'
37

8+
// Install BootstrapVue
9+
Vue.use(BootstrapVue)
10+
// Optionally install the BootstrapVue icon components plugin
11+
Vue.use(IconsPlugin)
412
Vue.config.productionTip = false
513

614
new Vue({
7-
render: h => h(App),
15+
router,
16+
render: h => h(App)
817
}).$mount('#app')

‎src/router/index.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Vue from 'vue'
2+
import VueRouter from 'vue-router'
3+
import Home from '../views/Home.vue'
4+
5+
Vue.use(VueRouter)
6+
7+
const routes = [
8+
{
9+
path: '/',
10+
name: 'Home',
11+
component: Home
12+
},
13+
{
14+
path: '/about',
15+
name: 'About',
16+
// route level code-splitting
17+
// this generates a separate chunk (about.[hash].js) for this route
18+
// which is lazy-loaded when the route is visited.
19+
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
20+
}
21+
]
22+
23+
const router = new VueRouter({
24+
routes
25+
})
26+
27+
export default router

0 commit comments

Comments
(0)

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