用命令號創(chuàng)建一個 mytest 文件夾

vue init webpack mytest

初始化 init myproject之后 手動安裝vue-router

image.png

再創(chuàng)建三個.vue文件，注意引用文件圖片的時候加上./

引入node_modules文件夾模塊 不需要加 ./
引入文件要加

<template>
  <div>
    <img class="myImg" src="./timg.jpeg" alt="" />
    <p>這是一只貓</p>
  </div>
</template>

<script>
  export default {
    name: "cat"
  }
</script>

<style scoped>
  .myImg{
    width: 300px;
  }
</style>

<template>
  <div id="app">
    <!--router-view 相當(dāng)于將main中component的內(nèi)容加載到這個地方-->
    <router-view ></router-view>
    <router-link to="/dog">小狗</router-link>
    <router-link to="/cat">小貓</router-link>
    <router-link to="/alpaca">羊駝</router-link>

    <!--<router-link :to="/dog">小狗</router-link>-->
    <!--<router-link :to="/cat">小貓</router-link>-->
    <!--<router-link :to="/alpaca">羊駝</router-link>-->
  </div>
</template>

image.png

image.png

image.png

image.png