用vue写一个学校官网

首先，我们需要安装Vue CLI：

npm install -g @vue/cli

然后，创建一个新的Vue项目：

vue create school-website

接着，安装一些常用的插件：

cd school-website
npm install axios vue-router vuex bootstrap font-awesome

现在，我们就可以开始编写官网了。

首先，我们需要设置路由。在src目录下创建一个router目录，在该目录下创建index.js文件，内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  { path: '/about', component: () => import('@/views/About.vue') },
  { path: '/contact', component: () => import('@/views/Contact.vue') },
]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

这里我们定义了三个路由，分别对应首页、关于我们和联系我们。

接着，我们需要创建页面组件。在src/views目录下创建Home.vue、About.vue和Contact.vue文件，并编写对应的页面内容。

例如，Home.vue文件内容可以如下：

<template>
  <div>
    <h1>Welcome to Our School</h1>
    <p>We are a leading institution providing high-quality education to students from all over the world.</p>
    <p>Explore our website to learn more about our programs, faculty, and campus life.</p>
  </div>
</template>

然后，我们需要在App.vue文件中引入Bootstrap和Font Awesome，并设置导航栏。

<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container">
        <router-link to="/" class="navbar-brand">School Name</router-link>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <router-link to="/" class="nav-link">Home</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/about" class="nav-link">About</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/contact" class="nav-link">Contact</router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~font-awesome/css/font-awesome.min.css';
</style>

最后，我们需要在main.js文件中引入Vue Router并挂载到Vue实例上。

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

现在，我们就可以运行项目了：

npm run serve

打开http://localhost:8080/查看效果。