環境構築
brew install yarn
yarn (global) add @vue/cli
yarn -s run vue -V
vue create .
yarn serve
-
brew install yarn
homebrew… ソースコードを取得してビルドするパッケージ管理システム
yarn… npm(Node package Manager)にかわるパッケージマネージャ(ライブラリの追加やインストールを容易にしてくれるもの) -
yarn (global) add @vue/cli
vue-cli…Commnad Line Interfaceの略で前準備をしてくれる
私はglobalを入れなかったのでこのプロジェクトのみで使えるvue-cliをインストール -
yarn -s run vue -V
vueを実行して -Vのオプションでバージョンを確認できる -
vue create .
プロジェクトの作成をしました。 .には任意のプロジェクト名を入れられる -
yarn serve
プロジェクトを立ち上げる
localhost:8080で表示されました〜！
ファイルの構成
- babel.config.js…Babelという次世代JavaScriptをES5に変換してくれるツールの設定をする
全部のブラウザが最新型のJavaScriptを理解できない場合もあるから昔の言葉に直す必要もある！
画像を表示してみる
index.htmlをのぞいてみると、、、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.jsを見てみると、、、
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
mout()関数を使って#appにAppとやらを足している、、、？
import App from './App.vue' なのでApp.vueを覗いてみると
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
<Girl msg="女の子出てきて" />
<Fish msg="ヤマメ" />
<Cat msg="猫" />
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
import Girl from "./components/characters/Girl.vue";
import Fish from "./components/characters/Fish.vue";
import Cat from "./components/characters/Cat.vue";
export default {
name: "App",
components: {
HelloWorld,
Girl,
Fish,
Cat
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
from ~のファイルから取ってきたものをtemplateとしてexportしてる！
それぞれのファイルを見てみると、、、
<!-- Girl.vue -->
<template>
<div class="girl">
<img src="@/assets/girl.png" alt="女の子" />
</div>
</template>
<script>
export default {
name: "Girl",
props: {
msg: String
}
};
</script>
<!-- Fish.vue -->
<template>
<div class="fish">
<img src="@/assets/fish.png" alt="お魚" />
</div>
</template>
<script>
export default {
name: "Fish",
props: {
msg: String
}
};
</script>
<!-- Cat.vue -->
<template>
<div class="cat">
<img src="@/assets/cat.png" alt="猫" />
</div>
</template>
<script>
export default {
name: "Cat",
props: {
msg: String
}
};
</script>
それぞれexportしている
nameの部分がApp.vueのタグになっている