vue3新能源汽车网站开发代码

在Vue 3中开发一个单页应用程序（SPA）是一个常见的需求。以下是一个简单的示例，展示如何使用Vue 3和Vue Router创建一个基本的单页应用程序。

首先，确保你已经安装了Node.js和npm。然后，使用Vue CLI创建一个新的Vue 3项目：

npm install -g @vue/cli
vue create my-vue3-app

选择Vue 3作为版本，然后进入项目目录：

cd my-vue3-app

安装Vue Router：

npm install vue-router@4

创建一个简单的路由配置。在`src`目录下创建一个名为`router`的文件夹，并在其中创建一个`index.js`文件：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

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

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

接下来，修改`src/main.js`文件以使用路由：

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

在`src`目录下创建一个`views`文件夹，并在其中创建`Home.vue`和`About.vue`文件：

<!-- src/views/Home.vue -->
<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>

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

<!-- src/views/About.vue -->
<template>
  <div>
    <h1>About</h1>
    <p>This is the about page.</p>
  </div>
</template>

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

最后，修改`App.vue`文件以包含导航链接：

<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

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

<style>
nav {
  padding: 10px;
}
nav a {
  margin-right: 10px;
}
</style>

现在，你可以运行开发服务器：

npm run serve

打开浏览器并访问`http://localhost:8080`，你将看到你的Vue 3单页应用程序。