用vue写一个学校官网

好的，写一个学校官网需要考虑到官网的功能和页面布局等方面，以下是一个简单的示例代码：

首先，我们需要在HTML文件中引入Vue.js：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

然后，在Vue实例中定义官网的基本信息和导航菜单：

<div id="app">
  <header>
    <h1>{{ schoolName }}</h1>
    <nav>
      <ul>
        <li v-for="item in menuItems">
          <a :href="item.link">{{ item.name }}</a>
        </li>
      </ul>
    </nav>
  </header>
  
  <!-- 其他内容 -->
  
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      schoolName: 'XXX学校',
      menuItems: [
        { name: '首页', link: '#' },
        { name: '新闻动态', link: '#' },
        { name: '招生信息', link: '#' },
        { name: '教学科研', link: '#' },
        { name: '校园生活', link: '#' },
        { name: '联系我们', link: '#' },
      ]
    }
  })
</script>

接下来，我们可以根据需要添加其他页面的内容，例如展示学校的新闻动态：

<section>
  <h2>新闻动态</h2>
  <ul>
    <li v-for="item in newsItems">
      <a :href="item.link">{{ item.title }}</a>
      <span>{{ item.date }}</span>
    </li>
  </ul>
</section>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      // ...
      newsItems: [
        { title: 'XXX学校举行校园足球比赛', date: '2021-05-01', link: '#' },
        { title: 'XXX学校荣获省级科技奖', date: '2021-04-30', link: '#' },
        // ...
      ]
    }
  })
</script>

我们还可以添加一些交互功能，例如点击导航菜单时切换页面：

<section v-show="activePage === 'home'">
  <h2>欢迎来到XXX学校！</h2>
  <p>这是学校官网的首页。</p>
</section>

<section v-show="activePage === 'news'">
  <h2>新闻动态</h2>
  <ul>
    <li v-for="item in newsItems">
      <a :href="item.link">{{ item.title }}</a>
      <span>{{ item.date }}</span>
    </li>
  </ul>
</section>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      // ...
      activePage: 'home'
    },
    methods: {
      changePage: function(page) {
        this.activePage = page;
      }
    }
  })
</script>

<!-- 导航菜单中的链接 -->
<a @click.prevent="changePage('home')">首页</a>
<a @click.prevent="changePage('news')">新闻动态</a>

以上是一个简单的学校官网示例，具体的页面和功能可以根据实际需求进行修改和完善。