どうもjackです。
お久しぶりです。
あれから色々ありまして今はVue.jsとDjangoを使って開発しています。
現場でせっかくVue.jsを使っているので何か自分でも作ってみたいなぁと。
どうせなら何かAPIを叩いてデータを引っ張って来たいなぁといことで題名のものを作ってみたいなとなりました！
私の開発環境は以下となっています。
- vue@2.6.11
- macOS
既にVue.jsはインストールされているものとしています。
では早速・・・
vue create my-cli
ド定番でプロジェクト名はmy-cliでいきましょう！
そしてディレクトリを移動してbootstrapをインストールしていきます。
npm install vue bootstrap-vue bootstrap
そんでもってMain.jsも書き換えちゃいましょう。えいっ！
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import BootstrapVue from 'bootstrap-vue' // こいつ
Vue.use(BootstrapVue) // こいつ
Vue.config.productionTip = false;
import 'bootstrap/dist/css/bootstrap.css' // こいつ
import 'bootstrap-vue/dist/bootstrap-vue.css' // こいつ
new Vue({
router,
render: h => h(App)
}).$mount("#app");
では、早速動かして見ましょう！！！
npm run serve
例のあの画面が出たのではないでしょうか？
まじこのシステム作った人すげえええ
ただ、メニューの選択を少しいじりたい衝動に駆られたので変えちゃいましょう。
ついでにいらないものも削除！！！えいっ！！！
<template>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<router-link class="navbar-brand" to="/">Home</router-link>|
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<router-link class="nav-link" to="/about">Search</router-link>
</li>
</ul>
</div>
</nav>
<router-view />
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
すると画面的にはこんな感じ。
なんか寂しい。。。
次はホーム画面をかえていきましょう。
と言っても「お気に入りのアーティストを検索してみよう！」くらいしか書かないのですが（泣）
ここでお引越しを行います。
理由としてviewディレクトリにあったりcomponentにあったりややこしいのが好かんからです。
ということでsrc/viewsディレクトリ配下にある下記ファイルをcomponentに移動します。
Home.vue
About.vue
./src
├── App.vue
├── assets
├── components
│ ├── About.vue
│ ├──Home.vue
│ └── HelloWorld.vue
├── main.js
└── router
└── index.js
そしてindex.jsを下記に書き換えちゃいます。
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import About from "../components/About.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/about",
name: "About",
component: About
}
];
const router = new VueRouter({
routes
});
export default router;
そしてHome.vueの不要なコードを削除して下記のようにします。
それと同時にHelloWorld.vueは削除です。
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
うん、すっきり。
でも、まだURLがAboutのままなのでこれをsearchに変更します。
それに伴いAbout.vueもSearch.vueに変更！！
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../components/Home.vue";
import Search from "../components/Search.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home
},
{
path: "/search",
name: "Search",
component: Search
}
];
const router = new VueRouter({
routes
});
export default router;
<template>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<router-link class="navbar-brand" to="/">Home</router-link>|
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<router-link class="nav-link" to="/search">Search</router-link> //ここ変えた
</li>
</ul>
</div>
</nav>
<router-view />
</div>
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
これでURL変更完了です！！！
Home画面は今はこんな感じで！
後で頑張れたら頑張るから。
<template>
<div class="home">
<h2>search my favorite music</h2>
</div>
</template>
<script>
export default {
name: "Home",
};
</script>
simple is ok!!!
では続きはsearch画面編で！！