用命令号创建一个 mytest 文件夹
vue init webpack mytest
初始化 init myproject之后 手动安装vue-router
image.png
再创建三个.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 相当于将main中component的内容加载到这个地方-->
<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
