vue3中创建一个login页面

最新推荐文章于 2025-03-14 15:52:22 发布

原创最新推荐文章于 2025-03-14 15:52:22 发布 · 4.5k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端调试

本文介绍如何使用Vue3创建项目，并安装Element Plus插件。详细步骤包括创建登录页面，配置路由使其指向登录页面，以及如何在App.vue中利用router-view组件进行页面渲染。

1.创建vue3项目

2.装element插件

3.创建Login页面

4.router/index.js是项目入口，路由指向Longin.vue

5.App.vue在路由执行某个页面的时候都要通过router-view这个组件渲染

6.经过路由指向，就要有路由支持

1.创建vue3项目

vue create vue-admin //选择vue3

2.装element插件

--save

3.创建Login页面

<template>
    <div>Login</div>
</template>

<script>
    export default {
        name: "Login"
    }
</script>

<style scoped>

</style>

4.router/index.js是项目入口，路由指向Longin.vue

import { createRouter, createWebHashHistory } from 'vue-router'
import Login from '../views/Login.vue'

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

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

export default router

5.App.vue在路由执行某个页面的时候都要通过router-view这个组件渲染

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

6.经过路由指向，就要有路由支持

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';



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

这里的

import router from './router'就是指向router/index.js

app.use(router)