vue3引入router+axios+element-plus教程
3.2在main.js中加入如下配置,配置完之后便可以直接调用Element-plus的组件了,这是全部引入的,按需引入可以去官网查看怎么操作。2.3在App.vue中调用试一下,引入getCurrentInstance用于获取全局变量。1.4去APP.vue中进行测试,进行手动路由跳转时,引入useRouter。1.2安装成功后新建router目录,创建index.js,复制如下代码。1.3将r
·
一.引入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')
更多推荐
已为社区贡献2条内容
所有评论(0)