当前位置：首页 > VUE

vue实现index dem

2026-02-18 15:51:52VUE

Vue 实现 Index Demo

在 Vue 中实现一个简单的 Index Demo 可以通过以下步骤完成。这里假设使用 Vue 3 和单文件组件（SFC）的方式。

创建 Vue 项目

使用 Vue CLI 或 Vite 创建一个新的 Vue 项目。以下是使用 Vite 的示例：

npm create vite@latest vue-index-demo --template vue
cd vue-index-demo
npm install
npm run dev

编写 Index 页面

在 src/App.vue 或 src/views/Index.vue 中编写 Index 页面的代码。以下是一个简单的示例：

<template>
  <div class="index-demo">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Vue Index Demo',
      message: 'Welcome to the Vue Index Demo!'
    }
  },
  methods: {
    changeMessage() {
      this.message = 'Message changed!'
    }
  }
}
</script>

<style scoped>
.index-demo {
  text-align: center;
  margin-top: 50px;
}
</style>

添加路由（可选）

如果需要多个页面，可以添加 Vue Router。以下是配置路由的示例：

安装 Vue Router：

npm install vue-router@4

创建路由配置文件 src/router/index.js：

import { createRouter, createWebHistory } from 'vue-router'
import Index from '../views/Index.vue'

const routes = [
  {
    path: '/',
    name: 'Index',
    component: Index
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在 src/main.js 中使用路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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