ページコンポーネントレンダリングウィジェット(アクセント)

ページコンポーネントレンダリングウィジェット(アクセント)
ページコンポーネントを親コンポーネントとして:views/*.vue

<template>
    <div class="home">
        
        <Nav />
    div>
template>

<script>
    //         ：          ，                   
    // 1）       export default{}     
    // 2）@       src        
    // 3）  export default{}       components   
    // 4）                 (html          )
    // 5）  ：i）      ii）      iii）     
    import Nav from '@/components/Nav'

    export default {
        components: {
            Nav,
        }
    }
script>

<style scoped>
    .home {
        width: 100vw;
        height: 100vh;
        background-color: orange;
    }
style>

ナビゲーションバーウィジェット(パッケージルーティングジャンプ):components/*vue

<template>
    <div class="nav">
        <img src="" />
        <ul>
            <li>
                
                <a href="/">  a>
            li>
            <li>
                <router-link to="/about">   router-link>
            li>
            <li>
                
                <router-link :to="{name: 'First'}">   router-link>
            li>
        ul>
    div>
template>

<style scoped>
    .nav {
        width: 100%;
        height: 80px;
        background: rgba(0, 0, 0, 0.3);
    }
    img {
        width: 200px;
        height: 80px;
        background: tan;
        float: left;
    }
    ul {
        float: left;
        list-style: none;
        margin: 0;
        padding: 0;
        height: 80px;
        background: pink;
    }
    ul li {
        float: left;
        height: 80px;
        padding: 30px 20px 0;
    }
    a {
        color: black;
    }
style>