Vue CLI のcreateしたファイルについて
Vue CLIでcreateしたファイルの主なフォルダの役割について
メモ
画面で表示される。ファイルはpublicフォルダに入れる。
大事なのはpublic/index.html
内の<div id='app'><div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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>
このapp要素にvueインスタンスをマウントすることでアプリケーションが動作する。
次にインスタンスの生成部分
src/main.js
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
ここで#appとなっているところがポイント
render: h => h(App)
そしてこれでsrc/App.vueを指定している
App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
#app {
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
このように1つのファイルで1つのコンポーネントが設定されている。
これが単一ファイルコンポーネント
→１つのファイルにテンプレートjavascript, css を書く。
コンポーネントは作成したファイルの中のsrc/components/の中に作っていく。
＊例外あり→例外①参照＊
基本的な作りはtemplate, script, styleの３点記入
ちなみにtemplateの記載があれば動作はするscript , styleは任意
vue create をした際に設定するとvcliにはscssが入る。
langにscssを設定するとstyleタグをscss形式で記入ができる。
.vueを作る時の基本構造は以下
<template>
</template>
<script>
</script>
<style scoped lang="scss">//langにscssと記述するとscssの形式でスタイルを記載できる。
</style>
＊例外①
src/views/の中に○○.vueという名前で記述をする。
ここにはHome.vueというファイルがある。これが初期ではホームコンポーネント となっている。
＊ホームコンポーネント とはnpm run serveでサーバーを立ち上げた際に一番最初に表示される画面のこと。
Home.vue
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
元ファイルを元に自分の作りたいファイルを追加していく方法について
まず
src/componets内にAddresses.vueファイルを作成。
Addresses.vue
<template>
<div>
<h1>マイアドレス帳</h1>
</div>
</template>
<script>
</script>
<style scoped lang="scss">//langにscssと記述するとscssの形式でスタイルを記載できる。
</style>
シンプルにh1タグの記述のみにしています。
次にホームコンポーネントの設定を変更
初期ではHome.vueからsrc/component/HelloWorld.vueが設定されている
Home.vue
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
これを修正し、src/components/Addresses.vueを読み込むようにすると、、
<template>
<div class="home">
<!-- <img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/> -->
<Addresses/>
</div>
</template>
<script>
// @ is an alias to /src @/components以下でファイルを指定すると参照できるようになるよと書いてある。
// import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
// HelloWorld,
Addresses
}
}
</script>
このようになる（元あった不要なHelloWorld.vueへの表示のための記述はコメントあうとしてあります）
ポイント
テンプレート
<Addresses/>
スタイル
components: {
// HelloWorld,
Addresses
}
の部分
こうするとnpm run serveでの初期画面が
デフォルトから上記のように変更される。
初期ファイルの変更は以上。
つづく。
