vue3路由设置和安装elmentUI

路由设置和安装elmentUI"/>

vue3路由设置和安装elmentUI

Vue3设置路由

1. 首先安装路由

npm install vue-router

2. 在min.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'// createApp(App).mount('#app')
const app=createApp(App)
app.use(router)
app.mount('#app')

3.App.vue中添加 <router-view></router-view>

<template><div id="app"><router-view></router-view></div>
</template><script>export default {name: 'App',}
</script><style></style>

3.新建login.vue组件

4.新建router.js文件

import { createRouter,createWebHistory } from "vue-router";
import Login from "@/components/login/Login";
const router = createRouter({history:createWebHistory(),routes:[{path:'/login',component:Login,}]
})
export default router;

5.访问页面http://localhost:8081/login

OK！

Vue3引用elementUi

1. 安装elementUi

npm install element-plus --save

2.mian.js引用组件，也可以按需引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
import ElmentUI from 'element-plus'// createApp(App).mount('#app')
const app=createApp(App)
app.use(router)
app.use(ElmentUI)
app.mount('#app')

3.测试

OK！