用vue写手机端网页代码怎么优化？

Question

想尝试用vue写个网站，但是代码写的很low，很像h5，求大神指教怎么写，怎么优化。这是我的代码<template>  <div class="head">      <div class="logo">        <img src="@/assets/logo.png" alt="">      </div>      <div class="menu">        <img src="@/assets/menu.png" alt="">      </div>  </div></template><script>export default {  name: 'Header',  data () {    return {      msg: '你好'    }  }}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.head{  width: 100%;  height: 1.5rem;  background-color:antiquewhite;  position:relative;}.logo{  width: 4rem;  height: 1.1rem;  background-color: aquamarine;  position: absolute;  top:.2rem;  left: .2rem;}.logo img{  width: 100%;  height: 100%;}.menu{  width: 1rem;  height: 1.1rem;  background-color: azure;  position: absolute;  top: .2rem;  right: .2rem;}.menu img{  width: 100%;}</style>

Answer 1

  <div class="logo">

    <img :src="logo" alt="">

  </div>

  <div class="menu" v-on:click="isShow=!isShow">

    <img :src="menu" alt="">

  </div>

  <ul v-show="isShow">

    <li>首页</li>

    <li>服务项目</li>

    <li>公司案例</li>

    <li>新闻动态</li>

    <li>关于我们</li>

  </ul>

</div>

</template>

<script>

export default {

name: 'Header',

data () {

return {

  msg: '你好',

  isShow:false,

  logo:require("@/assets/logo.png"),

  menu:require("@/assets/menu.png")

}

},

这样写比之前简单了很多