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)

从官网查到的，如果没有这个，路由不起作用

https://router.vuejs.org/installation.html#direct-download-cdn

官网是英文的，偶然遇到的