vue3引入router+axios+element-plus教程_app.use(router ,createpinia(), elementplus).mount(

一.引入vue-router

1.1在工程目录处，使用npm安装vue-router

1.2安装成功后新建router目录，创建index.js，复制如下代码

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

1.3将router挂载至全局，在main.js中加入如下代码

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

1.4去APP.vue中进行测试，进行手动路由跳转时，引入useRouter

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script setup>
    import {onMounted} from 'vue'
    import {useRouter} from 'vue-router'
    const router=useRouter()
    onMounted(()=>{
        router.push("/hello")
    })
</script>
 
<style>
 
</style>

二.引入axios

2.1在工程目录处，使用npm安装element-plus

npm install axios

2.2在main.js中新增如下配置

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import axios from 'axios'
 
 
const app=createApp(App)
app.config.globalProperties.$axios=axios //挂载至全局
app.use(router)
app.mount('#app')

2.3在App.vue中调用试一下，引入getCurrentInstance用于获取全局变量

<template>
    <div>
        <router-view></router-view>
    </div>
</template>
<script setup>
    import {onMounted,getCurrentInstance} from 'vue'
    import {useRouter} from 'vue-router'
    const router=useRouter()
    const { $axios }=getCurrentInstance().appContext.config.globalProperties
    function test(){
        $axios.get("http://localhost:8081/user").then(res=>{
               console.log(res)
        })
    }
    onMounted(()=>{
        router.push("/hello")
        test()
    })
</script>
 
<style>
 
</style>

三引入Element-plus

3.1安装element-plus

npminstall element-plus --save

3.2在main.js中加入如下配置,配置完之后便可以直接调用Element-plus的组件了，这是全部引入的，按需引入可以去官网查看怎么操作

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
 
 
const app=createApp(App)
app.config.globalProperties.$axios=axios
app.use(router)
app.use(ElementPlus)
app.mount('#app')