一.引入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')

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐