当前位置：首页 > article >正文

Vue创建一个web项目实现布局和路由

article 2024/11/21 1:32:53

使用 Vue.js 创建一个 Web 项目并实现基本的布局和路由，可以按照以下步骤进行。我们将使用 Vue CLI 工具来快速搭建项目，Vue Router 来管理路由。

步骤 1: 安装 Vue CLI

确保你已经安装了 Vue CLI。如果没有，可以使用以下命令安装：

npm install -g @vue/cli

步骤 2: 创建一个新的 Vue 项目

使用 Vue CLI 创建一个新的项目：

vue create my-project

在创建项目的过程中，你可以选择默认的配置或手动选择配置。

步骤 3: 安装 Vue Router

进入项目目录并安装 Vue Router：

cd my-project
npm install vue-router     如果是2.0版本要npm i vue-router@3.5.2 -S

步骤 4: 配置 Vue Router

在 src 目录下创建一个 router 文件夹，并在其中创建一个 index.js 文件，配置路由信息：

// src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

步骤 5: 创建视图组件

在 src/views 目录下创建 Home.vue 和 About.vue 组件：

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

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

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

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

步骤 6: 配置主应用文件

在 src 目录下的 main.js 中引入并使用 Vue Router：

// src/main.js
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')

步骤 7: 创建布局组件

在 src/components 目录下创建一个 Layout.vue 组件：

<!-- src/components/Layout.vue -->
<template>
  <div>
    <header>
      <nav>
        <router-link to="/">Home</router-link>
        <router-link to="/about">About</router-link>
      </nav>
    </header>
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <p>Footer content</p>
    </footer>
  </div>
</template>

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

<style>
/* 添加一些基本的样式 */
header {
  background-color: #f8f9fa;
  padding: 10px;
}
nav {
  display: flex;
  gap: 10px;
}
main {
  padding: 20px;
}
footer {
  background-color: #f8f9fa;
  padding: 10px;
  text-align: center;
}
</style>

步骤 8: 使用布局组件

在 src/App.vue 中使用 Layout 组件：

<!-- src/App.vue -->
<template>
  <Layout />
</template>

<script>
import Layout from './components/Layout.vue'

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